jquery案例之二级菜单

最新推荐文章于 2024-05-06 21:09:29 发布

置顶流云浅暮

最新推荐文章于 2024-05-06 21:09:29 发布

阅读量207

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/qq_40176258/article/details/84670537

版权

jQuery 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding:0;
            list-style: none;
        }
        .warp{
            width:340px;
            height:30px;
            background:#06afda;
            margin:100px auto;
            border-radius:4px;
            /* 不让文字被选中 */
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }
        .warp li{
            background: linear-gradient(to bottom,white, #06afda);
        }
        .warp > ul > li{
            float:left;
            margin-left: 10px;
            position: relative;
            border-radius: 2px;
        }
        .warp a{
            display:block;
            height:30px;
            width:100px;
            text-decoration: none;
            color:#000;
            line-height: 30px;
            text-align:center;
        }
        .warp li ul{
            position:absolute;
           top:30px;
          display: none;
        } 
    </style>
</head>
<body>
   <div class="warp">
       <ul>
            <li>
                    <a href="javascript:void(0);">一级菜单1</a>
                    <ul class='ul'>
                        <li><a href="javascript:void(0);">二级菜单11</a></li>
                        <li><a href="javascript:void(0);">二级菜单12</a></li>
                        <li><a href="javascript:void(0);">二级菜单13</a></li>
                    </ul>
            </li>
            <li>
                        <a href="javascript:void(0);">一级菜单2</a>
                        <ul class='ul'>
                            <li><a href="javascript:void(0);">二级菜单21</a></li>
                            <li><a href="javascript:void(0);">二级菜单22</a></li>
                            <li><a href="javascript:void(0);">二级菜单23</a></li>
                        </ul>
            </li>
             <li>
                        <a href="javascript:void(0);">一级菜单3</a>
                        <ul class='ul'>
                            <li><a href="javascript:void(0);">二级菜单31</a></li>
                            <li><a href="javascript:void(0);">二级菜单32</a></li>
                            <li><a href="javascript:void(0);">二级菜单33</a></li>
                        </ul>
                </li>
       </ul>
   </div>
   <script src="../jQuery/jquery.js"></script>
   <script>
       $(function(){
           var $li = $('.warp>ul>li');
           //鼠标点击事件
           $li.mouseover(function(e){
               //stop():停止当前正在执行的动画
               $(this).children('ul').stop().slideDown();
           });
           $li.mouseout(function(e){
               $(this).children('ul').stop().slideUp();
           });
       });
   </script>
</body>
</html>

效果图：

流云浅暮

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
jquery案例之二级菜单

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
复制链接

扫一扫

专栏目录