This tutorial will explain how to use JQuery and CSS to create a cool and dynamic menu step by step. JQuery's "write less, do more" feature is a household name. Even if there is no rich JavaScript programming experience, you can quickly learn how to use it through the APIS it provides. Of course, if you have rich experience, I suggest you understand the implementation principles of the main functions of jQuery. If you don't want to talk about anything else, let's look at how to use it to achieve the magical effect of the menu.
Step 1-HTML Structure
Let's take a look at the HTML code of the menu, which is no different from the common menu code:
The Code is as follows:
- Home
- HTML/CSS
- JavaScript
- Resources
- Tutorials
- About
The key is to use the script to create several separation layers in each anchor (element a) so that you can control them separately when hovering over them to generate animations. To this end, we need to modify the DOM structure when the DOM loading is complete, so that each anchor code becomes as follows:
The Code is as follows:
Home
Home
The content of each Original anchor is 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.
Step 2-CSS style
In this example, two styles are displayed, including the background image and the background image (For details, refer to the demo). You can also customize your own styles, to design a cooler menu, the basic style and explanation are provided here:
The Code is as follows:
/* The following is the basic menu style */
. Menu ul li {
Float: left;
/* The content of the sub-element in the menu exceeds invisible */
Overflow: hidden;
/* The following code is omitted */
}
. Menu ul li {
/* Relative positioning is required */
Position: relative;
Display: block;
Width: 110px;
/* The following code is omitted */
}
. 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, the. over layer and. bg layer are compared to element a-45px to achieve hiding 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 {
Color: #000;
}
# Menu ul li a span. over {
Color: # FFF;
}
# Menu ul li span. bg {
/* Specify the height and background image */
Height: 45px;
Background: url(bg_over.gif) center no-repeat;
}
You can also customize CSS styles by yourself. A simplified style is provided here (view the demo)
Step 3-JavaScript code
The first thing to do is to implement the DOM structure after DOM loading as described in step 1. The specific practices are as follows:
The Code is as follows:
// Include the content of each a in a layer (span. out,
// Append the background layer (span. bg) to the end of the span. out layer)
$ ("# Menu li a"). wrapInner ('')
. Append ('');
// Cyclically add a layer (span. over) for each a in the menu)
$ ("# Menu li a"). each (function (){
$ (''+ $ (This). text () + '')
. AppendTo (this );
});
Before talking about the animation code, let's take a look at the animation process, as shown in:
In step 1, we know that after DOM loading, several separation layers are created in element a. in step 2, we set span in CSS style. bg and span. the top attribute of the over layer is-45px, because the span element has been set to absolute positioning, it will be relative to the li a element up-45px, because the content of the li element exceeds invisible, so at the beginning ,. bg layer and. the over layer is out of the space range.
The animation process we want to set is that when you hover the mouse, the three layers move down at the same time, span. the out layer moves down to remove the visible range, span. over and span. bg moves to the visible area and sets span. bg speed is faster than span. the over speed is slightly faster, and misplacement produces more results.
To achieve this animation effect, it is easy to use jQuery's. animate () method. The following is the JS Code and explanation:
The Code is as follows:
$ ("# Menu li a"). hover (function (){
// The function triggered when the mouse is hovering
$ (". Out", this). stop (). animate ({'top': '45px '}, 250); // slide to hide
$ (". Over", this). stop (). animate ({'top': '0px '}, 250); // slide to display
$ (". Bg", this). stop (). animate ({'top': '0px '}, 120); // slide to display
}, Function (){
// The function triggered when the mouse is removed
$ (". Out", this). stop (). animate ({'top': '0px '}, 250); // slide to display
$ (". Over", this). stop (). animate ({'top': '-45px'}, 250); // slide to hide
$ (". Bg", this). stop (). animate ({'top': '-45px'}, 120); // slide to hide
});
Summary
The above explains how to build jQuery's Dynamic Sliding menu step by step. You can implement one step by step, or download the source code modification and customization. Of course, you have any suggestions or problems, you can leave a message for me.
View Final Results
Package and download jOuery Dynamic Sliding menu
PS: Summary by Vic
