前言
移动端导航多种多样,抽屉式导航就是常见之一,下面我们通过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');
})
}
最后
文中若有不准确或错误的地方,欢迎指出~