jQuery导航条三级菜单

原创 2019-01-15 17:02:02 278
摘要:<!DOCTYPE html><html><head>    <meta charset="utf-8" />    <title>jQuery导航条三级菜单</title>    <script type="text/javasc

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8" />
   <title>jQuery导航条三级菜单</title>
   <script type="text/javascript" src="/static/js/jquery-3.3.1.min.js"></script>
   <style>
       html,body,div,ul,li,a{
           margin: 0;padding: 0;
       }
       body{
           font-size: 14px;
           font-family: "微软雅黑";
           background: #333;
       }
       ul{
           list-style: none;
       }
       a{
           text-decoration: none;
       }
       .box{
           height: 50px;
           background: #128a28;
       }
       .box .nav{
           width: 1000px;
           line-height: 50px;
           margin: 0 auto;
           position: relative;
           z-index: 111;
       }
       .box .nav li{
           float: left;
           width: 14.28%;
           height: 50px;
           line-height: 50px;
           text-align: center;
       }
       .box .nav li a{
           color: #fff;
       }
       .box .nav li .second-nav{
           width: 150px;
           display: none;
           position: relative;
       }
       .box .nav li .second-nav li{
           position: relative;
           width: 100%;
           height: 40px;
           line-height: 40px;
           background: #097d1f;
           border-top: 1px solid yellow;
       }
       .box .nav li .second-nav li .third-nav{
           width: 150px;
           height: 200px;
           display: none;
           margin-left: 100%;
           margin-top: -40px;
       }
   </style>
   <script type="text/javascript">
       $(function(){
           //显示二级菜单
           $('.nav>li').hover(function(){
               $(this).find('.second-nav').show();
               //显示三级菜单
               $(this).find('.second-nav').find('li').hover(function(){
                   $(this).find('.third-nav').show();
                   $(this).find('.third-nav').hover(function(){
                       $(this).show();
                   },function(){
                       $(this).hide();
                   });
               }, function(){
                   $(this).find('.third-nav').hide();
               });
               //隐藏菜单
           },function(){
               $(this).find('.second-nav').hide();
           });
       });
   </script>
</head>
<body>
<div class="box">
   <ul class="nav">
       <li><a href="#">手机</a>
           <ul class="second-nav">
               <li><a href="#">小米</a>
                   <ul class="third-nav">
                       <li><a href="#">小米红米</a></li>
                       <li><a href="#">小米8s</a></li>
                       <li><a href="#">小米max</a></li>
                   </ul>
               </li>
               <li><a href="#">苹果</a>
                   <ul class="third-nav">
                       <li><a href="#">苹果max</a></li>
                       <li><a href="#">苹果7s</a></li>
                   </ul>
               </li>
               <li><a href="#">oppo</a></li>
           </ul>
       </li>
       <li><a href="#">电脑</a>
           <ul class="second-nav">
               <li><a href="#">小米电脑</a></li>
               <li><a href="#">华为电脑</a></li>
           </ul>
       </li>
       <li><a href="#">电视机</a>
           <ul class="second-nav">
               <li><a href="#">小米电视</a>
                   <ul class="third-nav">
                       <li><a href="#">50寸电视</a></li>
                       <li><a href="#">60寸电视</a></li>
                       <li><a href="#">70寸电视</a></li>
                   </ul>
               </li>
               <li><a href="#">华为电视</a></li>
               <li><a href="#">夏新电视</a>
                   <ul class="third-nav">
                       <li><a href="#">70寸电视</a></li>
                       <li><a href="#">60寸电视</a></li>
                   </ul>
               </li>
           </ul>
       <li><a href="#">智能手表</a>
           <ul class="second-nav">
               <li><a href="#">小米手表</a>
                   <ul class="third-nav">
                       <li><a href="#">小米手表1</a></li>
                       <li><a href="#">小米手表2</a></li>
                       <li><a href="#">小米手表3</a></li>
                   </ul>
               </li>
               <li><a href="#">华为手表</a></li>
               <li><a href="#">苹果手表</a>
                   <ul class="third-nav">
                       <li><a href="#">苹果手表1</a></li>
                       <li><a href="#">苹果手表2</a></li>
                   </ul>
               </li>
           </ul>
       </li>

   </ul>
</div>
</body>
</html>

批改老师:灭绝师太批改时间:2019-01-15 17:26:24
老师总结:完成的不错!需要知道每个方法的用法和作用哦!

发布手记

热门词条