The key points to realize the scrolling and fading effect of WordPress navigation menu _php Skills

Scrolling navigation Menu
scrolling menus, as the name suggests, show and hide menus in a scrolling fashion. It's the same as fading menus and scrolling menus, which change the transparency of the menu when the event is triggered, while the latter changes the height of the menu. So why is the latter more difficult to deal with than the former? This is because the menu height of the processing than transparency has a higher technical requirements. Let's discuss how to deal with it and where it is difficult.

Initial processing of
In order to deal with the more flexible, we need to define a sliding speed as a parameter, that is, each unit time interval, menu height change amplitude. In addition, we need to set the initial height of the menu to 0.

Speed from parameter, default no time unit mobile 10px
this.speed = Speed |
Set initialization height
this.util.setStyle (this.body, ' height ', ' 0 ');

Expand and collapse
The expand and collapse method corresponds to the Fade menu's enhancement and decrease the opacity, but the processing object is different, the principle is the same. Note that the height of the gain is converted to an integral type and then evaluated.

Expand:function () {
 //get current height, and integer
 var height = parseint (This.util.getStyle (this.body, ' height '));
 Add speed to the unit of time until the height equals or exceeds the maximum height
 = this.speed;
 if (height >= this.height) {
 height = this.height;
 Cancels the loop call
 cleartimeout (This.tid)
 ;
 Reset Menu Height
 this.util.setStyle (this.body, ' height ', height + ' px ');
}
 
/**
 * Fold menu until height is 1 o'clock hide menu/
collapse:function () {
 //get current height, and integer
 var = parseint ( This.util.getStyle (this.body, ' height '));
 Subtract the speed in the unit of time until the height is equal to or less than 1
 height-= this.speed;
 if (height <= 1) {
 height = 1;
 Hide Menu
 this.util.setStyle (this.body, ' visibility ', ' hidden ');
 Cancels the loop call
 cleartimeout (This.tid)
 ;
 Reset Menu Height
 this.util.setStyle (this.body, ' height ', height + ' px ');
}

Instantly activates the menu
Very, very important, the most skillful and interesting part of the scrolling menu.
In this program, I have a way to get the height of the encapsulation, get the height is actually the return element of the offsetheight. As I understand it (I don't know if it's right), Offsetheight takes precedence to get the height in the CSS style and returns the actual height of the element when the style is empty. So there's the following code:

Get the initial height, when the mouse on the menu title when the initial height of the expansion, when the mouse on the menu body to get the actual height of the menu
var initheight = This.util.getStyle (this.body, ' height ');
To get the actual height, you must first clear the height of the style, otherwise you will only get the height of the style
This.util.setStyle (this.body, ' height ', ');
This.height = This.util.getHeight (this.body);
Reset Initial height
this.util.setStyle (this.body, ' height ', initheight);

Fade Fade in navigation menu
Implementation Action

The previous analysis is a bit long-winded, or look at the code. :) To highlight the changes, I added some Log to the code.

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

Define transparency, default transparent
this.opacity = 0;
this.maxopacity = Opacity | | 1;

Activated
Pre-processing, and then the transparency of the menu processing.

/**
 * Activation Method
 * When the mouse moves to the menu title is activated
/activate:function () {
 //Get current menu body position
 var pos = This.util.cumulativeOffset (this.title);
 var left = pos[0];
 var top = pos[1] + this.util.getHeight (this.title);
 
 Define active style
 This.util.setStyle (this.body, ' left ', left + ' px ');
 This.util.setStyle (this.body, ' top ', top + ' px ');
 This.util.setStyle (this.body, ' visibility ', ' visible ');
 This.util.setStyle (This.body, ' opacity ', this.opacity);
 This.util.setStyle (This.body, ' filter ', ' alpha (opacity= ' + this.opacity + ') ');
 
 if (This.tid) {
 cleartimeout (this.tid);
 }
 Continuously enhance the opacity of the menu
 This.tid = SetInterval (This.util.bind (this, this.appear);
}

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

/**
 * Enhance opacity until maximum opacity * *
appear:function () {
 this.opacity + = 0.1;
 if (this.opacity >= this.maxopacity) {
 this.opacity = this.maxopacity;
 Cancels the loop call
 cleartimeout (This.tid)
 ;
 Re-set Transparency
 this.util.setStyle (this.body, ' opacity ', this.opacity);
 This.util.setStyle (This.body, ' filter ', ' alpha (opacity= ' + this.opacity * + ') ');
}

Lifted
Handles the transparency of the menu.

/**
 * Lifting Method
 * When the mouse moves out menu title is
 activated
/deactivate:function () {
 if (this.tid) {
 cleartimeout ( This.tid);
 }
 Weakening the opacity of the menu
 This.tid = SetInterval (This.util.bind (this, this.fade);
}

Reduce the opacity of the menu until the opacity is 0 and the menu is hidden.

/**
 * Reduces opacity until fully transparent hidden menu
/fade:function () {
 this.opacity = 0.1;
 if (this.opacity <= 0) {
 this.opacity = 0;
 Hide Menu
 this.util.setStyle (this.body, ' visibility ', ' hidden ');
 Cancels the loop call
 cleartimeout (This.tid)
 ;
 Re-set Transparency
 this.util.setStyle (this.body, ' opacity ', this.opacity);
 This.util.setStyle (This.body, ' filter ', ' alpha (opacity= ' + this.opacity * + ') ');
}