JQuery uses CSS to create a dynamic drop-down menu, jquerycss

JQuery uses CSS to create a dynamic drop-down menu, jquerycss

When you want to place a large sub-menu in a limited navigation menu space, we usually use a drop-down menu to make up for the lack of space. This article uses jQuery and CSS to create a dynamic drop-down menu with the minimum time needed.

XHTML
First, introduce the jquery library in the head part of the page. This is required.

<script type="text/javascript" src="js/jquery.js"></script> 

Then I use an unordered list to create a menu.

<Ul class = "menu"> <li> <a href = "#"> homepage </a> </li> <a href = "#"> Service </a> </li> <a href = "#"> case </a> </li> <a href = "#"> about </a> </li> <a href = "#"> BLOG </a> </li> </ul>

It looks very simple at a Glance. Since the drop-down menu is closed at the beginning, I also need to create a visual trigger drop-down button. This article uses an image as the trigger button for convenience. Place the image on the top of the menu list

CSS
Create CSS styles for the menu separately. See the Code:

.menu_head{border:1px solid #998675; background:#f30} .menu{display:none; width:184px; border:1px solid #998675; border-top:none} .menu li{list-style:none; background:#493e3b} .menu li a{padding:10px; display:block;color:#fff; text-decoration:none;} .menu li a:hover{font-weight:bold;} .menu li.alt{background:#362f2d;} 

It is worth noting that the. menu li. alt style is used to distinguish between line breaks of parity rows, which will be reflected in the jquery code below.
JQuery
In jQuery code, I first need to differentiate the number of lines in a drop-down menu, and give the even row a style: alt. Next, add a trigger event for the image button. When you click the button, you can switch to the drop-down menu.

$(function(){   $(".menu li:even").addClass("alt");   $("img.menu_head").click(function(){     $(".menu").slideToggle("fast");   }); }); 

Note:,I used jQuery's slideToggle method to display and hide menus in a slide manner. The effect is very smooth.

The above is the share of jQuery combined with CSS to create a dynamic drop-down menu, hope to help you learn.