JQuery + CSS to create a menu with Dynamic Sliding

Helper House (Bkjia.com) TutorialThis article will explain how to use JQuery and CSS to create a cool 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.

　　Demo address:Click to view

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:

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

<A href = "javascript:;">
<Span class = "out"> Home </span>
<Span class = "bg"> </span>
<Span class = "over"> Home </span>
</A>

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.

• Three pages in total:
• Previous Page
• 1
• 2
• 3
• Next Page