本文實例為大家分享了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;}以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
