快捷導(dǎo)航

jquery實現(xiàn)垂直和水平菜單導(dǎo)航欄

更新時間：2020年08月27日 10:07:56 作者：回憶沒了焦點

這篇文章主要為大家詳細介紹了jquery實現(xiàn)垂直和水平菜單導(dǎo)航欄，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了jquery菜單導(dǎo)航欄的實現(xiàn)代碼，供大家參考，具體內(nèi)容如下

1.HTML代碼

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>豎直導(dǎo)航菜單</title>
  <link href="css/Vmenu.css" rel="stylesheet" />
  <script src="js/jquery-2.1.4.min.js"></script>
  <script>
   $(function(){
    //垂直導(dǎo)航欄，點擊下拉子菜單
    $(".main>a").click(function(){
     $(this).next().slideToggle(500)
     .parent().siblings().find(".child").slideUp(500);
    })
     
    //水平導(dǎo)航欄，鼠標經(jīng)過下拉導(dǎo)航欄
    $(".hmain").hover(function(){
     $(this).find(".child").slideToggle(500)
      .parent().siblings().find(".child").slideUp();
    })
   })
  </script>
 </head>
 <body>
  <!--垂直導(dǎo)航欄-->
  <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>
   
  <!--水平導(dǎo)航欄-->
  <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;
}
 
/*垂直導(dǎo)航欄左浮動*/
.hmain{
 float: left;
}

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: