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

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

jquery实现网站列表切换效果的2种方法
本文实例为大家分享了jquery实现网站列表切换效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下效果图：htmlheadmetacharset="utf-8"/title网站品牌

jquery插件uploadify多图上传功能实现代码
本文实例为大家分享了uploadify多图上传具体实现代码，可动态添加上传框，供大家参考，具体内容如下!DOCTYPEHTMLhtmlheadmetahttp-equiv="Content-Type"content="text/ht

jquery表格datatables实例解析直接加载和延迟加载
参考自官方文档，需要引入jquery.js，jquery.dataTables.js，dataTables.bootstrap.js（可选）,由于时间紧，省略了很多，所以总结份简化版的仅供参考。1、直接加