二级菜单的制作

年夜雪

 关注

阅读 111

2022-06-20

​​二级菜单的制作​​

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    .nav{
        list-style: none;
        width: 300px;
        margin: 100px auto;
    }
    .nav > li{
        border: 1px solid #000;
        line-height: 35px;
        border-bottom: none;
        text-indent: 2px;
        position: relative;
    }
    .nav li:last-child{
        border-bottom:  1px solid #000;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
    }
    .nav li:first-child{
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
    }
    .nav >li > span{
        display: inline-block;
        background-image: url(./img/right.png) ;
        width: 32px;
        height:32px ;
        position: absolute;
        right: 10px;
        top: 5px;

    }
    .sub >li{
        list-style: none;

        border-bottom: 1px solid white;
    }
    .sub >li:hover{
        background: red;
    }

    .nav > .current >span{
        transform: rotate(90deg);
    }
    .sub{
        display: none;
    }
</style>
<body>
    <ul class="nav">
        <li class="">一级菜单<span></span>
            <ul class="sub">
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
            </ul>
        </li>
        <li>一级菜单<span></span>
            <ul class="sub">
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
            </ul>
        </li>
        <li>一级菜单<span></span>
            <ul class="sub">
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
            </ul></li>
        <li>一级菜单<span></span>
            <ul class="sub">
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
            </ul></li>
        <li>一级菜单<span></span>
            <ul class="sub">
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
            </ul></li>
        <li>一级菜单<span></span>
            <ul class="sub">
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
            </ul></li>
    </ul>
</body>
<script src="./jquery.js"></script>
<script>
    $(function () {
        //1.监听一级菜单的点击事件
        $(".nav > li").click(function () {
            //1.1拿到二级菜单
            var $sub =$(this).children(".sub")
            //1.2让二级菜单展开
            $sub.slideDown(1000);

            //1.3拿到所以非当前二级菜单
           var $otherSub =$(this).siblings().children(".sub")

            //1.4让所以非当前二级菜单收起
            $otherSub.slideUp(1000)

            //1.5让被点击的一级菜单箭头旋转
            $(this).addClass("current");

           //1.6让非被点击的一级菜单还原
            $(this).siblings().removeClass("current");

        })

    })

</script>
</html>

效果图:

二级菜单的制作_二级菜单


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    .nav{
        list-style: none;
        width: 300px;
        margin: 100px auto;
    }
    .nav > li{
        border: 1px solid #000;
        line-height: 35px;
        border-bottom: none;
        text-indent: 2px;
        position: relative;
    }
    .nav li:last-child{
        border-bottom:  1px solid #000;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
    }
    .nav li:first-child{
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
    }
    .nav >li > span{
        display: inline-block;
        background-image: url(./img/right.png) ;
        width: 32px;
        height:32px ;
        position: absolute;
        right: 10px;
        top: 5px;

    }
    .sub >li{
        list-style: none;

        border-bottom: 1px solid white;
    }
    .sub >li:hover{
        background: red;
    }

    .nav > .current >span{
        transform: rotate(90deg);
    }
    .sub{
        display: none;
    }
</style>
<body>
    <ul class="nav">
        <li class="">一级菜单<span></span>
            <ul class="sub">
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
            </ul>
        </li>
        <li>一级菜单<span></span>
            <ul class="sub">
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
            </ul>
        </li>
        <li>一级菜单<span></span>
            <ul class="sub">
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
            </ul></li>
        <li>一级菜单<span></span>
            <ul class="sub">
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
            </ul></li>
        <li>一级菜单<span></span>
            <ul class="sub">
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
            </ul></li>
        <li>一级菜单<span></span>
            <ul class="sub">
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
            </ul></li>
    </ul>
</body>
<script src="./jquery.js"></script>
<script>
    $(function () {
        //1.监听一级菜单的点击事件
        $(".nav > li").click(function () {
            //1.1拿到二级菜单
            var $sub =$(this).children(".sub")
            //1.2让二级菜单展开
            $sub.slideDown(1000);

            //1.3拿到所以非当前二级菜单
           var $otherSub =$(this).siblings().children(".sub")

            //1.4让所以非当前二级菜单收起
            $otherSub.slideUp(1000)

            //1.5让被点击的一级菜单箭头旋转
            $(this).addClass("current");

           //1.6让非被点击的一级菜单还原
            $(this).siblings().removeClass("current");

        })

    })

</script>
</html>

效果图:

二级菜单的制作_二级菜单

相关推荐

二级收缩菜单，点击出现二级菜单

分湖芝蘭 109 0 0

省市二级菜单

天际孤狼 102 0 0

jquery实现二级菜单

海牙秋天 83 0 0

Excel 二级菜单设置

上善若水的道 215 0 0

[css] 二级菜单---仿照京东

一天清晨 89 0 0

html | 无js二级菜单

王老师说 77 0 0

yii2中怎么输出二级菜单，根据我自己的样式建立的二级菜单

认真的老去 74 0 0

二级（点击伸开）伸展动态菜单

海牙秋天 97 0 0

Axure二级菜单下拉交互实例

酷子腿长一米八 35 0 0

DIV+CSS实现二级菜单

小编 144 0 0

精彩评论（0）

0 0 举报