jquery's "Write less, do more" feature is a household name, even if there is no very rich JS programming experience, can also be provided by the API quickly learn how to use, of course, if you are experienced, I still suggest you can understand the principle of the implementation of the main functions of jquery , others do not say, directly to see how to use it to achieve the magic of the menu effect bar.
step1-html Structure
Look at the menu's HTML code, no different from the usual menu code:
Copy Code code as follows:
<div id= "Menu" class= "Menu" >
<ul>
<li><a href= "javascript:;" >Home</a></li>
<li><a href= "javascript:;" >HTML/CSS</a></li>
<li><a href= "javascript:;" >JavaScript</a></li>
<li><a href= "javascript:;" >Resources</a></li>
<li><a href= "javascript:;" >Tutorials</a></li>
<li><a href= "javascript:;" >About</a></li>
</ul>
</div>
The key is to use a script to create several separator layers in each anchor point (a element) so that you can control the animation when the mouse hovers. To do this, we modify the structure of the DOM at the completion of the DOM load so that each anchor code becomes the following:
Copy Code code as follows:
<a href= "javascript:;" >
<span class= "Out" >Home</span>
<span class= "BG" ></span>
<span class= "Over" >Home</span>
</a>
The contents of each of the original anchor points are appended to the two span elements (. Out and. over), and the other span element (. BG) is the background picture layer.
As for how to modify the DOM structure, JS code will be explained in Step3.
step2-css Style
In the example, two styles are shown, with a background and no background (see the demo), you can also freely customize your own style to design a more cool menu, which provides the basic style and explanation:
Copy Code code as follows:
/* Below is the menu basic style * *
. menu ul Li {
Float:left;
/* Menu child element content is beyond visible/
Overflow:hidden;
/* The following omitted part of the code * *
}
. menu ul Li a {
/* Must be relative positioning * *
position:relative;
Display:block;
width:110px;
/* The following omitted part of the code * *
}
. menu UL Li a span {
/* All layers will use absolute positioning */
Position:absolute;
left:0;
width:110px;
}
. menu ul Li a span.out {
top:0px;
}
. menu ul Li a span.over,
. menu ul Li a span.bg {
//At first. over layer and. BG layer relative to a element -45px to achieve hidden effect.
Top: -45px;
}
/* The following is an example using the background image * *
#menu {
/* Menu Background * *
Background:url (bg_menu.gif) scroll 0-1px repeat-x;
border:1px solid #CCC;
}
#menu ul Li a {
Color: #000;
}
#menu ul Li a span.over {
Color: #FFF;
}
#menu ul Li span.bg {
/* Specify height and background map * *
height:45px;
Background:url (bg_over.gif) Center Center no-repeat;
}
You can also customize the CSS style, which also provides a simplified version of the style (see demo)
Step3-javascript Code
The first thing to do is to implement what is said in Step1 to modify its DOM structure after the completion of the DOM load, as follows:
Copy Code code as follows:
The contents of each A are included in a layer (span.out),
Then append the background layer behind the span.out layer (span.bg)
$ ("#menu li a"). Wrapinner (' <span class= ' out ' ></span> ')
. Append (' <span class= ' bg ' ></span> ');
Loop adds a layer to each menu's a (span.over)
$ ("#menu li a"). each (function () {
$ (' <span class= ' over ' > ' + $ (this). Text () + ' </span> ')
. Appendto (this);
});
Before you talk about animation code, look at the animation process, as shown in the following illustration:
In Step1 we know that after the DOM is loaded, a few separator layers are created in the a element, and in Step2, we set the top property of the span.bg and span.over layers as -45px in the CSS style, because the span element is set to absolute positioning, and it will be relative to Li a Element is -45px because the content of the LI element is not visible, so at the beginning, the. BG layer and. Over layer are located outside the space range.
We want to set the animation process is, when the mouse hover, three layers move down at the same time, span.out layer down to remove the visible range, span.over and span.bg movement into the visible area, set span.bg speed than span.over speed slightly faster, dislocation produced more effect.
For this animation to work, the. Animate () method of jquery is easy to implement, and the following is the JS code and explanation:
Copy Code code as follows:
$ ("#menu li a"). Hover (function () {
A function that is triggered when the mouse hovers over
$ (". Out", this). Stop (). Animate ({' Top ': ' 45px '},250);/Fall to hide
$ (". Over", this). Stop (). Animate ({' top ': ' 0px '},250); Slide to show
$ (". BG", this). Stop (). Animate ({' top ': ' 0px '},120); Slide to show
}, function () {
A function that is triggered when the mouse is moved
$ (". Out", this). Stop (). Animate ({' top ': ' 0px '},250); Slide up to display
$ (". Over", this). Stop (). Animate ({' Top ': ' -45px '},250), slide up to hide
$ (". BG", this). Stop (). Animate ({' Top ': ' -45px '},120), slide up to hide
});
Summarize
The above explains how to create a step-by-step jquery Dynamic Drop menu, you can step through your own implementation, you can download the source code to modify the customization, of course, you have any good suggestions or have any questions, you can give me a message.
View Final effect
Jouery Dynamic Drop Menu Package download
PS: This article is summarized by Vicky
