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

2019-11-20 09:15:23

字体：大中小

来源：转载

供稿：网友

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

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

上一篇：javascript实现瀑布流动态加载图片原理

下一篇：JS实现图片剪裁并预览效果