jquery and CSS to create a cool dynamic menu

This tutorial step-by-step explains how to use JQuery and CSS to create a cool, dynamic menu. 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 , the other does not say, directly see how to use it to achieve the magic of the menu effect bar

You can click to view the demo, or click to download the source code.

Step1-html structure

Look at the menu's HTML code, no different from the usual menu code:

<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:

<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:

/* Below is the basic style of the menu
*/.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)