This tutorial will explain step by step how to use JQuery and CSS to create a cool dynamic menu. The "write less, do more" feature of jQuery is well-known to everyone. Even people without extensive JS programming experience can quickly learn how to use it through the API it provides. Of course, if you are experienced, I still recommend that you can Understand the implementation principles of each main function of jQuery. Let’s not talk about other things. Let’s just see how to use it to achieve the magical effect of the menu.
.jpg)
You can click to view the demo or download the source code .
Step1 - HTML structure
Take a look at the HTML code of the menu. It is no different from the normal 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 scripts to create several separate layers in each anchor point (a element), so that they can be controlled to animate separately when the mouse is hovered. To do this, we need to modify the structure of the DOM when the DOM is loaded so that each anchor code becomes as follows:
<a href="javascript:;">
<span class="out">Home</span>
<span class="bg"></span>
<span class="over">Home</span>
</a>
The content in each original anchor point will be appended to two span elements (.out and .over), and the other span element (.bg) is the background image layer.
As for how to modify the DOM structure, the JS code will be explained in Step 3.
Step2 - CSS style
In the example, two styles are shown, one with a background image and one without a background image (see the demo for details). You can also freely customize your own style to design a cooler menu. Here are the basic styles. and explanation:
/* The following is the basic style of the menu
*/.menuulli{
float: left;
/* The content of the menu sub-element is beyond visibility */
overflow: hidden;
/* Some codes are omitted below*/
}
.menu ul li a {
/* Must be relative positioning */
position: relative;
display: block;
width: 110px;
/* Some codes are omitted below*/
}
.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 {
/* Initially, the .over layer and the .bg layer are -45px relative to the a element to achieve the hidden effect*/
top: -45px;}/
*The following is an example of using a 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 image*/
height: 45px;
background: url(bg_over.gif) center center no-repeat;
}
You can also customize the CSS style yourself, and a simplified version of the style is also provided here ( view demo )