脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → jquery → jquery菜单导航栏

jquery实现垂直和水平菜单导航栏

 更新时间：2020年08月27日 10:07:56   作者：回忆没了焦点  
这篇文章主要为大家详细介绍了jquery实现垂直和水平菜单导航栏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了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;
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

最新评论