主页 / 网络编程 /

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

网络编程 2021-07-04 20:00www.168986.cn编程入门
这篇文章主要为大家详细介绍了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;
}

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

上一篇：javascript实现瀑布流动态加载图片原理 下一篇：JS实现图片剪裁并预览效果

编程语言

Copyright © 2016-2025 www.168986.cn 狼蚁网络 版权所有 Power by