Home > Web Front-end > JS Tutorial > body text

jQuery ul label drop-down menu demo code_jquery

WBOY
Release: 2016-05-16 18:14:02
Original
1253 people have browsed it

This is the content of the menu. Use the ul tag to implement the menu:

Copy the code The code is as follows:

This is the CSS control code:
Copy code The code is as follows:

ul,ol,li{list-style:none;padding: 0px;margin:0px;}
#menu *{line-height:30px;}
#menu a{
text-decoration:none;
display:block;
}
#menu ul{
text-align:left;
background:#333;
}
#menu .arrow{ /* Small arrow on the right side of the menu item*/
float: right;
padding-right:5px;
}
#menu>ul{height:30px;} /* Maintain the height of the top menu bar even if there are no menu items. */
/* First level menu*/
#menu>ul>li{
text-align:center;
display:inline-block;
width:80px;
}
#menu>ul>li>a{color:#fff;}
#menu>ul>li:hover{background:#666;}
/* Drop-down menu bar*/
#menu>ul>li ul{
display:none;
width:150px;
position:absolute;
background:#c1cd94;
box-shadow:2px 2px 2px #000 ;
-webkit-box-shadow:2px 2px 2px #000;
-moz-box-shadow:2px 2px 2px #123;
}
/* Menu items of drop-down menu*/
#menu>ul>li>ul li{padding-left:5px; position:relative;}
#menu>ul>li>ul li>a{color:#000;}
#menu> ul>li>ul li:hover{background:#d3dbb3;}
/* Positioning of menu items at level three and below*/
#menu>ul>li>ul>li ul{left:150px; top:0px;}

This is the JS control code:
Copy code The code is as follows:

$(document).ready(function()
{
/* Menu initialization*/
$('#menu>ul>li>ul').find ('li:has(ul:not(:empty))>a').append(">"); // For those with submenus Add '>' symbol to menu items
$("#menu>ul>li").bind('mouseover',function() // Mouseover operation for top-level menu items
{
$( this).children('ul').slideDown('fast');
}).bind('mouseleave',function() // Mouse out operation for top menu items
{
$( this).children('ul').slideUp('fast');
});
$('#menu>ul>li>ul li').bind('mouseover',function() //Mouse-in operation for submenu
{
$(this).children('ul').slideDown('fast');
}).bind('mouseleave',function() / / Mouse out operation of submenu
{
$(this).children('ul').slideUp('fast');
});
});
Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template