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;
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持菜鸟教程(cainiaojc.com)。

声明:本文内容来源于网络,版权归原作者所有,内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:notice#cainiaojc.com(发邮件时,请将#更换为@)进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。