Implementation points of scrolling and fade-in effects in the WordPress navigation menu

This article describes how to implement the scrolling and fade-in effects of the WordPress navigation menu, and explains the PHP programming skills based on the default WordPress topic. For more information, see Scroll navigation menu
Scroll menu, as its name implies, displays and hides menus in scroll mode. in fact, the principle is the same as that of fade-in and fade-out menus and scroll menus. The former is to change the menu transparency when an event is triggered, while the latter is to change the menu height. why is the latter processing more difficult than the former? This is because the processing of menu height is more skillful than transparency. next we will discuss how to deal with it and what is difficult.

Initial processing
To make the processing more flexible, we need to define a sliding speed as a parameter for it, that is, the range of menu height changes per unit time interval. in addition, we need to set the initial height of the menu to 0.

// The speed comes from the parameter. by default, there is no time unit to move 10pxthis. speed = speed | 10; // Set the initialization height this. util. setStyle (this. body, 'height', '0 ');

Expand and collapse
The expansion and collapse methods correspond to the enhancement and opacity reduction of the fade-in and fade-out menus. they only process different objects, and the principle is the same. Note that the obtained height is converted to an integer before calculation.

Expand: function () {// get the current height, and integer var height = parseInt (this. util. getStyle (this. body, 'height'); // add the speed in the time unit until the height is equal to or greater than the maximum height + = this. speed; if (height> = this. height) {height = this. height; // call clearTimeout (this. tid);} // reset the menu height this. util. setStyle (this. body, 'height', height + 'px ');}/*** hide the menu until the height is 1. hide the menu */collapse: function () {// Obtain the current height and integer var height = parseInt (this. util. getStyle (this. body, 'height'); // subtract the velocity from the time unit until the height is equal to or less than 1 height-= this. speed; if (height <= 1) {height = 1; // hide the menu this. util. setStyle (this. body, 'Visibility ', 'den den'); // call clearTimeout (this. tid);} // reset the menu height this. util. setStyle (this. body, 'height', height + 'px ');}

Instant menu activation
It is very important. it is the most skillful and interesting part of the scrolling menu.
In this program, I encapsulate the method for obtaining the height. obtaining the height actually returns the offsetHeight of the element. according to my understanding (I do not know if it is correct), offsetHeight first gets the height in the CSS style and returns it. when the style is empty, it gets the actual height of the element. the following code is available:

// Obtain the initial height. when you place the cursor over the menu title, you can obtain the initial height when you expand the menu. when you place the cursor over the menu body, you can obtain the actual height of the menu. var initHeight = this. util. getStyle (this. body, 'height'); // obtain the actual height. you must first clear the height of the style. Otherwise, only the height in the style will be obtained. this. util. setStyle (this. body, 'height', ''); this. height = this. util. getHeight (this. body); // reset the initial height this. util. setStyle (this. body, 'height', initHeight );

Fade out navigation menu
Implementation

The previous analysis was a bit cool. let's take a look at the code. :) to highlight the modified part, I added some logs to the code.

Initialization
The initial opacity is 0, and the maximum opacity is set value or 1.

// Define the transparency. the default transparency is this. opacity = 0; this. maxopacity = opacity | 1;

Activate
First, perform preliminary processing, and then process the menu transparency.

/*** Activation method ** when the mouse moves to the menu title, it is activated */activate: function () {// obtain the position of the current menu body var pos = this. util. cumulativeOffset (this. title); var left = pos [0]; var top = pos [1] + this. util. getHeight (this. title); // defines the style this. util. setStyle (this. body, 'left', left + 'px '); this. util. setStyle (this. body, 'top', top + 'px '); this. util. setStyle (this. body, 'Visibility ', 'visable'); this. util. setStyle (this. body, 'Opacity ', this. opacity); this. util. setStyle (this. body, 'filter', 'Alpha (opacity = '+ this. opacity * 100 + '); if (this. tid) {clearTimeout (this. tid);} // continuously enhance the menu opacity this. tid = setInterval (this. util. bind (this, this. appear), 30 );}

Enhance the opacity of the menu until the opacity reaches the maximum opacity.

/*** Enhance opacity until maximum opacity */appear: function () {this. opacity ++ = 0.1; if (this. opacity> = this. maxopacity) {this. opacity = this. maxopacity; // cancel the circular call clearTimeout (this. tid);} // reset the transparency this. util. setStyle (this. body, 'Opacity ', this. opacity); this. util. setStyle (this. body, 'filter', 'Alpha (opacity = '+ this. opacity * 100 + ')');}

Release
Process the menu transparency.

/***** Release method * when the mouse moves out of the menu, the title is activated */deactivate: function () {if (this. tid) {clearTimeout (this. tid);} // decrease the opacity of the menu. tid = setInterval (this. util. bind (this, this. fade), 30 );}

Decrease the opacity of the menu until the transparency is 0 and the menu is hidden.

/*** Reduce opacity until the menu is completely transparent */fade: function () {this. opacity-= 0.1; if (this. opacity <= 0) {this. opacity = 0; // hide the menu this. util. setStyle (this. body, 'Visibility ', 'den den'); // call clearTimeout (this. tid);} // reset the transparency this. util. setStyle (this. body, 'Opacity ', this. opacity); this. util. setStyle (this. body, 'filter', 'Alpha (opacity = '+ this. opacity * 100 + ')');}