本文實例為大家分享了jquery菜單導航欄的實現代碼，供大家參考，具體內容如下
1. HTML代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>豎直導航菜單</title>
<link href="css/Vmenu.css" rel="stylesheet" />
<script src="js/jquery-2.1.4.min.js"></script>
<script>
$(function(){
//垂直導航欄，點擊下拉子菜單
$(".main>a").click(function(){
$(this).next().slideToggle(500)
.parent().siblings().find(".child").slideUp(500);
})
//水平導航欄，鼠標經過下拉導航欄
$(".hmain").hover(function(){
$(this).find(".child").slideToggle(500)
.parent().siblings().find(".child").slideUp();
})
})
</script>
</head>
<body>
<!--垂直導航欄-->
<ul class="content">
<li class="main"><a href="#">菜單 1</a>
<ul class="child">
<li>菜單1.1</li>
<li>菜單1.2</li>
<li>菜單1.3</li>
</ul>
</li>
<li class="main"><a href="#">菜單 2</a>
<ul class="child">
<li>菜單2.1</li>
<li>菜單2.2</li>
<li>菜單2.3</li>
<li>菜單2.4</li>
</ul>
</li>
<li class="main"><a href="#">菜單 3</a>
<ul class="child">
<li>菜單3.1</li>
<li>菜單3.2</li>
<li>菜單3.3</li>
</ul>
</li>
<li class="main"><a href="#">菜單 4</a>
<ul class="child">
<li>菜單4.1</li>
<li>菜單4.3</li>
</ul>
</li>
<li class="main"><a href="#">菜單 5</a>
<ul class="child">
<li>菜單5.1</li>
<li>菜單5.2</li>
</ul>
</li>
</ul>
<!--水平導航欄-->
<ul class="content">
<li class="hmain"><a href="#">菜單 1</a>
<ul class="child">
<li>菜單1.1</li>
<li>菜單1.2</li>
<li>菜單1.3</li>
</ul>
</li>
<li class="hmain"><a href="#">菜單 2</a>
<ul class="child">
<li>菜單2.1</li>
<li>菜單2.2</li>
<li>菜單2.3</li>
<li>菜單2.4</li>
</ul>
</li>
<li class="hmain"><a href="#">菜單 3</a>
<ul class="child">
<li>菜單3.1</li>
<li>菜單3.2</li>
<li>菜單3.3</li>
</ul>
</li>
<li class="hmain"><a href="#">菜單 4</a>
<ul class="child">
<li>菜單4.1</li>
<li>菜單4.3</li>
</ul>
</li>
<li class="hmain"><a href="#">菜單 5</a>
<ul class="child">
<li>菜單5.1</li>
<li>菜單5.2</li>
</ul>
</li>
</ul>
</body>
</html>
2. CSS代碼
*{
margin: 0px;
padding: 0px;
}
.content{
margin: 40px 100px;
float: left;
}
ul ,li{
list-style: none;
}
.main,.hmain{
width: 150px;
background: #222;
font-size: 16px;
text-align: center;
cursor: pointer;
line-height: 40px;
color: white;
}
.main>a,.hmain>a{
text-decoration: none;
color: white;
display: inline-block;
width: 150px;
min-height: 40px;
}
.main:hover,.hmain:hover{
background: black;
}
.child{
background: #444;
display:none;
}
.child li:hover{
background: #333333;
}
/*垂直導航欄左浮動*/
.hmain{
float: left;
}
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持。