靠左扁平下拉菜单以及水平下拉菜单的功能实现

感觉这两个功能很重要，以后用的地方也多，所以在此处发出来分享一下，同时，自己在以后也可以回过头来看看。

这两个下拉菜单分别用了点击触发和焦点触碰时触发，都是比较常用的两种方式

在这其中。我导入了jquery-3.3.1.min.js这个包

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <script src="jquery/jquery-3.3.1.min.js"></script>
       <style >
           *{
               margin: 0;
               padding: 0;
           }
           ul{
               list-style: none;
           }
           .menu{
               width: 200px;
               background-color: #CCCCCC;
           }
           .menu>li>a,.hmenu>li>a{
               display: block;
               height: 35px;
               width: 200px;
               line-height: 35px;
               text-align: center;
               color: #fff;
               background: #3498db;
           }
           a{
               text-decoration: none;
           }
           .submenu>li>a{
               display: block;
               height: 35px;
               line-height: 35px;
               text-align: center;
               color: #fff;
               border-bottom: 1px solid rgba(255,255,255,0.5);
               transition: all .5s; /*css3过度*/
           }
           .menu>li:not(:last-child){
               border-bottom: 1px solid rgba(255,255,255,0.5);
           }
           .submenu{
               display: none;
           }
           .submenu>li>a:hover{
               background: #FFFFFF;
               color: #000;
           }
           .hmenu>li{
               float: left;
               width: 200px;
               background: #CCCCCC;
           }
           .hmenu>li:not(:last-child){
               border-right: 1px solid rgba(255,255,255,0.5);
           }
       </style>
   </head>
   <body>
       
       

       <ul class="menu">
           <li class="an"><a href="#" >商品管理</a>
               <ul class="submenu">
                   <li><a href="">类别列表</a></li>
                   <li><a href="">商品列表</a></li>
               </ul>
           </li>
           <li class="an"><a href="#">库存管理</a>
               <ul class="submenu">
                   <li><a href="">类别列表</a></li>
                   <li><a href="">商品列表</a></li>
               </ul>
           </li>
           <li class="an"><a href="#">供应管理</a>
               <ul class="submenu">
                   <li><a href="">类别列表</a></li>
                   <li><a href="">商品列表</a></li>
               </ul>
           </li>
           <li class="an"><a href="#">商品管理</a>
               <ul class="submenu">
                   <li><a href="">类别列表</a></li>
                   <li><a href="">商品列表</a></li>
               </ul>
           </li>
       </ul>

       <br />
       <br />
       <br />

       <ul class="hmenu">
           <li class="an"><a href="#" >商品管理</a>
               <ul class="submenu">
                   <li><a href="">类别列表</a></li>
                   <li><a href="">商品列表</a></li>
               </ul>
           </li>
           <li class="an"><a href="#">库存管理</a>
               <ul class="submenu">
                   <li><a href="">类别列表</a></li>
                   <li><a href="">商品列表</a></li>
               </ul>
           </li>
           <li class="an"><a href="#">供应管理</a>
               <ul class="submenu">
                   <li><a href="">类别列表</a></li>
                   <li><a href="">商品列表</a></li>
               </ul>
           </li>
           <li class="an"><a href="#">商品管理</a>
               <ul class="submenu">
                   <li><a href="">类别列表</a></li>
                   <li><a href="">商品列表</a></li>
               </ul>
           </li>
       </ul>

       <script>
           $(function(){
               //将页面中的所有空连接失效
               $('a[href=""]').attr('href','javascript:void(0)')

               //单击时触发
               $('.menu>li>a').on('click',function(){
                   $(this).next().slideToggle();
               })

               //焦点触碰时触发
               $('.hmenu>li').hover(function(){
                   $(this).children('.submenu').stop().slideDown();
               },function(){
                   $(this).children('.submenu').stop().slideUp();
               })
           ;
           })
       </script>
   </body>
</html>

靠左扁平下拉菜单以及水平下拉菜单的功能实现

猜你喜欢