「这是我参与11月更文挑战的第24天，活动详情查看：2021最后一次更文挑战」
Javascript 一个简单的导航展开和关闭效果的实现
之前在很多大佬的个人博客上发现过非常过酷炫的导航栏，感觉挺有意思的。这篇文章主要是记录一下用Javascript和CSS实现一个简单的导航展开和关闭效果。
一、实现的效果
导航展开前
导航展开后
二、实现的思路
首先可以大致分成两个部分
- 左上角的按钮图标
- 导航内容的打开和关闭
左上角的按钮图标可以通过CSS样式来实现，可以通过不同的样式来控制打开和关闭的状态，在js中添加和移除样式来实现状态的改变。
三、步骤
<!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>lala</title>
<link rel="stylesheet" href="nav.css" type="text/css" />
</head>
<body>
<div class="container">
<!-- 导航栏 -->
<div class="bgbox" id="box">
<div class="box1" id="xbox1">
<ul>
<li>
<div class="btn from-left"><a href="#">Home</a></div>
</li>
<li>
<div class="btn from-right"><a href="#">Introduction</a></div>
</li>
<li>
<div class="btn from-middle"><a href="#">Groups</a></div>
</li>
<li>
<div class="btn from-bottom"><a href="#">Projects</a></div>
</li>
<li>
<div class="btn from-right"><a href="#">About</a></div>
</li>
<li>
<div class="btn from-left"><a href="#">Contact</a></div>
</li>
</ul>
</div>
</div>
<!-- 导航栏开关 -->
<div class="bar" onclick="change(this)">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
</div>
<script>
function change(x) {
console.log(x)
console.log("click")
if (x.classList.contains('change')) {
x.classList.remove('change');
document.getElementById("box").style.width = "0";
document.getElementById("xbox1").style.display = "none";
} else {
x.classList.add('change');
document.getElementById("box").style.width = "100%";
document.getElementById("xbox1").style.display = "block";
}
}
</script>
</body>
</html>
复制代码* {
margin: 0;
padding: 0;
list-style-type: none;
}
body {
padding: 0;
margin: 0;
overflow: hidden;
}
.bgbox {
width: 0;
height: 100vh;
background-color: rgb(58, 132, 175);
display:block;
transition: width 0.5s;
margin: 0 auto;
letter-spacing: 0.6rem;
}
.box1{
width: 28rem;
height: 30rem;
margin: 0 auto;
display:none;
}
.bgbox ul {
height: 100%;
padding-top: 18vh;
line-height: 6vh;
}
.bgbox ul li {
list-style: none;
text-align: center;
height: 3.8rem;
margin-bottom: 0.8rem;
}
.bgbox ul li a{
text-decoration: none;
font-size: 2rem;
display: block;
color: rgb(255, 255, 255);
}
.btn {
position: relative;
padding-top: 0.8rem;
padding-bottom: 1.2rem;
padding-right: 3.1rem;
padding-left: 3.1rem;
margin-bottom: 1rem;
font-size: 1.4rem;
letter-spacing: 0.5rem;
-webkit-transition: all 600ms cubic-bezier(0.77, 0, 0.175, 1);
transition: all 600ms cubic-bezier(0.77, 0, 0.175, 1);
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
width:23rem;
height: 1.8rem;
margin: 0 auto;
z-index: 2;
}
.btn:before, .btn:after {
content: '';
position: absolute;
-webkit-transition: inherit;
transition: inherit;
z-index: -1;
}
.bar {
width: 40px;
height: 30px;
left: 30px;
position: absolute;
top: 20px;
}
.bar1,
.bar2,
.bar3 {
width: 35px;
height: 5px;
background-color: rgb(115, 136, 238);
margin: 6px 0;
transition: 0.4s;
}
.change .bar1 {
-webkit-transform: rotate(-45deg) translate(-8px, 6px);
transform: rotate(-45deg) translate(-8px, 6px);
background-color: white;
}
.change .bar2 {
opacity: 0;
}
.change .bar3 {
-webkit-transform: rotate(45deg) translate(-8px, -8px);
transform: rotate(45deg) translate(-8px, -8px);
background-color: white;
}
复制代码