响应式全屏导航
每天一个小案例
HTML部分
<header>
<main>
<div class="logo">小神童</div>
<ul class="nav">
<li><a href="#">首页</a></li>
<li><a href="#">关于我</a></li>
<li><a href="#">我的作品</a></li>
<li><a href="#">我的简历</a></li>
<li><a href="#">我的博客</a></li>
</ul>
<!-- 三条线折叠按钮 -->
<div class="burger">
<div class="top-line"></div>
<div class="mid-line"></div>
<div class="bottom-line"></div>
</div>
</main>
</header>
CSS部分
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
header {
position: relative;
width: 100vw;
height: 100vh;
background: url(../img/flower.jpg);
background-size: cover;
/*图片自动缩放 */
}
main {
display: flex;
align-items: center;
height: 80px;
padding: 0 5vw;
background-color: rgba(24, 30, 37, 0.9);
}
.logo {
font-size: 24px;
color: #dadbdd;
font-weight: 600;
flex: 1;
}
.nav {
flex: 1;
display: flex;
justify-content: space-between;
max-width: 520px;
}
.nav li {
list-style: none;
/* flex: 20%; */
font-weight: 600;
}
a {
text-decoration: none;
color: #dadbdd;
}
.burger div {
width: 25px;
height: 3px;
background-color: #dadbdd;
margin: 4px;
}
.burger {
display: none;
}
@media screen and (max-width:760px) {
.nav {
position: absolute;
top: 80px;
right: 0;
bottom: 0;
width: 50vw;
/* 浏览器高度减去它top */
height: calc(100vh - 80px);
background-color: rgba(24, 30, 37, 0.9);
flex-direction: column;
align-items: center;
justify-content: start;
/* 开始时隐藏,出来时有过渡效果 */
transform: translateX(100%);
transition: 0.4s ease-in-out;
}
.nav.open {
transform: translateX(0);
}
.nav li {
margin: 3vh;
/* transform: translateX(20px); */
/* 透明度为0 */
/* opacity: 0; */
}
.burger {
display: block;
}
/* 三个条的过渡效果 */
.burger.active div {
transition: 0.3s ease-in-out 0.3s;
}
.burger.active .top-line {
transform: rotate(45deg) translate(4px, 6px);
}
.burger.active .bottom-line {
transform: rotate(-45deg) translate(4px, -6px);
}
.burger.active .mid-line {
opacity: 0;
transform: translateX(10px);
transition: 0.3s ease-in-out;
}
/* 动画 li一个接一个出来 */
/* @keyframes slideIn {
/* 开始
from {
transform: translateX(20px);
/* 透明度为0
opacity: 0;
}
/* 结束
to {
transform: translateX(0);
opacity: 1;
}
} */
}
js部分
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
header {
position: relative;
width: 100vw;
height: 100vh;
background: url(../img/flower.jpg);
background-size: cover;
/*图片自动缩放 */
}
main {
display: flex;
align-items: center;
height: 80px;
padding: 0 5vw;
background-color: rgba(24, 30, 37, 0.9);
}
.logo {
font-size: 24px;
color: #dadbdd;
font-weight: 600;
flex: 1;
}
.nav {
flex: 1;
display: flex;
justify-content: space-between;
max-width: 520px;
}
.nav li {
list-style: none;
/* flex: 20%; */
font-weight: 600;
}
a {
text-decoration: none;
color: #dadbdd;
}
.burger div {
width: 25px;
height: 3px;
background-color: #dadbdd;
margin: 4px;
}
.burger {
display: none;
}
@media screen and (max-width:760px) {
.nav {
position: absolute;
top: 80px;
right: 0;
bottom: 0;
width: 50vw;
/* 浏览器高度减去它top */
height: calc(100vh - 80px);
background-color: rgba(24, 30, 37, 0.9);
flex-direction: column;
align-items: center;
justify-content: start;
/* 开始时隐藏,出来时有过渡效果 */
transform: translateX(100%);
transition: 0.4s ease-in-out;
}
.nav.open {
transform: translateX(0);
}
.nav li {
margin: 3vh;
}
.burger {
display: block;
}
/* 三个条的过渡效果 */
.burger.active div {
transition: 0.3s ease-in-out 0.3s;
}
.burger.active .top-line {
transform: rotate(45deg) translate(4px, 6px);
}
.burger.active .bottom-line {
transform: rotate(-45deg) translate(4px, -6px);
}
.burger.active .mid-line {
opacity: 0;
transform: translateX(10px);
transition: 0.3s ease-in-out;
}
}