js+css实现移动端抽屉式导航

前言

移动端导航多种多样，抽屉式导航就是常见之一，下面我们通过javascript和css相结合来实现移动端的抽屉式导航。先看看实现的效果：
在这里插入图片描述

index.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>抽屉式demo</title>
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
<div id="root">
    <div class="box">
        <div class="btn-box">
            <button id="btn" class="btn">
                <span></span>
                <span></span>
                <span></span>
            </button>
        </div>
        <div id="content-box" class="content-box">
            <ul class="content-ul">
                <li class="content-li active">首页</li>
                <li class="content-li">文章</li>
                <li class="content-li">归档</li>
            </ul>
        </div>
    </div>
</div>

<script src="./javascript/index.js"></script>
</body>
</html>

index.css

抽屉式导航的核心就是通过css3的transition实现导航栏高度的变化过渡；还需要注意的是，虽然父元素高度发生变化，但是子元素如果有固定高度或者有内容的话，布局还是会受到影响。所以我们就要把父元素的overflow设置为hidden，这样就不会出现子元素撑开父元素的情况。

#root{
    width: 100%;
    height: 400px;
    margin-top: 100px;
    background: #cccccc;
}
*{
    margin: 0;
    padding: 0;
}
li{
    list-style: none;
}
.box{
    width: 400px;
    border: 1px solid #eeeeee;
    height: 100%;
    margin: 0 auto;
    background: #ffffff;
}
.btn-box{
    width: 100%;
    height: 60px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    border-bottom: 1px solid #cccccc;
}
.btn{
    height: 40px;
    width: 40px;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: space-around;
    border: none;
    background: #ffffff;
    outline: none;
}
.btn span{
    display: inline-block;
    height: 4px;
    width: 30px;
    background: #2b2b2b;
}
.content-box{
    height: 0;
    border-bottom: 1px solid #dddddd;
    background: #cccccc;
    overflow: hidden;  /* 让子元素不能撑开父元素 */
    transition:height ease-out .3s;
    -webkit-transition:height ease-out .3s; /* Safari */
}
.content-li{
    padding: 5px 10px;
    margin-bottom: 20px;
    font-size: 20px;
}
.active{
    background: #ffffff;
}

index.js

这里做了两个功能：一个是导航抽屉式变化，另一个是导航栏选中效果。

let btn = document.getElementById("btn");
let nav = document.getElementById("content-box");
let contentLi = document.getElementsByClassName("content-li");

let hide = true;
let length = contentLi.length;

/**
 *  实现导航条抽屉式
 */
btn.addEventListener('click', function () {
    if (hide){
        nav.style.height = "200px";
        hide = false;
    } else {
        nav.style.height = "0";
        hide = true;
    }
});

/**
 *  导航选中效果
 */
for (let i = 0; i < length; i++ ){
    contentLi[i].addEventListener('click', function () {
        for (let j = 0; j < length; j++){
            contentLi[j].classList.remove('active');
        }
        contentLi[i].classList.add('active');
    })
}

最后

文中若有不准确或错误的地方，欢迎指出~

来源：CSDN

作者：XmanLinC

链接：https://blog.csdn.net/qq_42002487/article/details/104748027

标签

移动互联网终端

background