jq简单实现小屏左侧导航

内容概要：

-引入文件bootstrap、jquery

文章内容主要实现简单的左侧导航（一级二级）功能实现，作为学习记录与参考**，文中多有不足，请多指正，欢迎交流

头部文件引用：

    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/left.css">
    <script src="js/bootstrap.min.js"></script>
    <script src="js/jquery-3.4.1.min.js"></script>

HTML部分：

<body>
    <div class="btn">
        <div class="line"></div>
        <div class="line"></div>
        <div class="line"></div>
    </div>
    <div class="leftmenu hidden-lg hidden-md">
        <div class="leftmenuicon"></div>
        <ul class="leftfirul">
            <li class="leftfir"><a href="">第一导航</a>
                <ul class="leftulsec">
                    <li class="leftsec"><a href="#">二级导航</a></li>
                    <li class="leftsec"><a href="#">二级导航</a></li>
                    <li class="leftsec"><a href="#">二级导航</a></li>
                </ul>
            </li>
            <li class="leftfir"><a href="">第一导航</a>
                <ul class="leftulsec">
                    <li class="leftsec"><a href="#">二级导航</a></li>
                    <li class="leftsec"><a href="#">二级导航</a></li>
                    <li class="leftsec"><a href="#">二级导航</a></li>
                </ul>
            </li>
            <li class="leftfir"><a href="">第一导航</a></li>
        </ul>
    </div>
</body>

JQ代码块：

<script>
    $('.btn').click(function() {
        if ($('.leftmenu').is(':hidden')) {
            $('.leftmenu').show().css({
                "left": "0",
                "transition": "all .2s"
            });
        } else {
            $('.leftmenu').hide(200).css("left", "-200px");
        }
    })
    $('.leftfir').click(function() {
        $(this).children("ul").slideToggle(100);
    });
</script>

left.css

    margin: 0;
    padding: 0;
}

a {
    text-decoration: none;
}

li {
    list-style: none;
}

.btn {
    width: 45px;
    height: 45px;
    border: 1px solid #a4a4a4;
    border-radius: 5px;
    text-align: center;
    position: absolute;
    right: 0;
}

.line {
    display: block;
    width: 95%;
    border-top: 2px solid #a4a4a4;
    margin: 6px auto;
    text-align: center;
}

.btn:hover {
    border: 1px solid #a4a4a4;
    cursor: pointer;
}

.btn:hover .line:first-child {
    transition: all .2s ease;
    width: 16px;
    text-align: center;
    cursor: pointer;
}

.btn:hover .line:nth-child(2) {
    width: 25px;
    text-align: center;
    transition: all .2s ease;
    cursor: pointer;
}

.btn:hover .line:last-child {
    transition: all .2s ease;
    text-align: center;
    width: 16px;
    cursor: pointer;
}

.leftmenu {
    width: 130px;
    height: 100%;
    background: lightsteelblue;
    z-index: 999;
    position: fixed;
    left: -200px;
}

.leftfirul {
    width: 100%;
    margin: 15px 3px;
}

.leftfirul .leftfir {
    margin: 10px 0;
    text-align: left;
}

.leftulsec {
    width: 100%;
}

.leftulsec .leftsec {
    text-align: center;
    margin: 5px 0;
}

.leftsec a {
    font-size: 15px;
    color: #f7f7f7;
}

.leftfir a {
    color: white;
    font-size: 15px;
}

.leftulsec {
    display: none;
}

效果展示：
原始界面
通过点击可以下拉/收起二级导航
功能简单代码不多，还有需要优化的地方，欢迎交流！

一袋酸奶

发布了2 篇原创文章 · 获赞 1 · 访问量 929

私信关注

jq简单实现小屏左侧导航

猜你喜欢