代码取自开源项目50projects50days,用作个人学习和巩固三件套的知识,增加了注释,可能会有小改动。
<!DOCTYPE html>
<html lang="en">
<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>导航栏最小化</title>
<link rel="shortcut icon" href="../logo.svg">
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav class="active" id="nav">
<ul>
<!--
<li><a href="#">Home</a></li>
<li><a href="#">Works</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
-->
<!--
<li><a href="#">kawldkl aakwdmk</a></li>
<li><a href="#">wndakaj wdikma</a></li>
<li><a href="#">aiwnif kajhwndj</a></li>
<li><a href="#">akwn dkamw</a></li>
-->
<!-- 当我转换成汉字后 旋转过程 汉字会出现竖直排列的情况……但英文字符串就没这个问题 但是 如果英文中间添加了空格 就会出现和汉字相同的情况…… 调整a nav li 的宽度无果 -->
<!-- 问题抽象:弹性盒子在盒子宽度变小时 自动把汉字和多个英文单词换行 -->
<!-- 解决方案 父级flex显示 子级添加 flex-shrink: 0 取消自动换行 (style.css文件 第60行) -->
<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>
<button class="icon" id="toggle">
<div class="line line1"></div>
<div class="line line2"></div>
</button>
</nav>
<script src="script.js"></script>
<!-- Dribbble link: https://dribbble.com/shots/2427219-Header-Navigation-Day-053-dailyui -->
</body>
</html>
@import url('https://fonts.googleapis.com/css?family=Muli&display=swap');
* {
box-sizing: border-box;
}
body {
background-color: #eafbff;
/* 设置渐变背景色 使页面为蓝白相间的格式 */
background-image: linear-gradient(
to bottom,
#eafbff 0%,
#eafbff 50%,
#5290f9 50%,
#5290f9 100%
);
font-family: 'Muli', sans-serif;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
}
/* 缩小后的导航栏样式 */
nav {
background-color: #fff;
padding: 20px;
width: 80px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 3px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
/* 宽度变化动画 线性变换(匀速) 0.6s完成 */
transition: width 0.6s linear;
overflow-x: hidden;
}
/* 正常情况下 展开的导航栏样式 */
nav.active {
width: 350px;
}
nav ul {
display: flex;
list-style-type: none;
padding: 0;
margin: 0;
width: 0;
transition: width 0.6s linear;
}
nav.active ul {
width: 100%;
}
nav ul li {
transform: rotateY(0deg);
flex-shrink: 0;
opacity: 0;
transition: transform 0.6s linear, opacity 0.6s linear;
}
/* 正常情况下 导航栏每一项的样式 */
nav.active ul li {
opacity: 1;
/* 展开时 绕y轴旋转的过渡动画 */
transform: rotateY(360deg);
}
nav ul a {
/* display: inline-block; */
position: relative;
color: #000;
text-decoration: none;
margin: 0 10px;
}
.icon {
background-color: #fff;
border: 0;
cursor: pointer;
padding: 0;
position: relative;
height: 30px;
width: 30px;
}
.icon:focus {
outline: 0;
}
.icon .line {
background-color: #5290f9;
height: 2px;
width: 20px;
position: absolute;
top: 10px;
left: 5px;
transition: transform 0.6s linear;
}
.icon .line2 {
top: auto;
bottom: 10px;
}
/* 设置关闭 展开导航栏的样式切换动画 由 x 变成 = */
nav.active .icon .line1 {
transform: rotate(-765deg) translateY(5.5px);
}
nav.active .icon .line2 {
transform: rotate(765deg) translateY(-5.5px);
}
const toggle = document.getElementById('toggle')
const nav = document.getElementById('nav')
toggle.addEventListener('click', () => nav.classList.toggle('active'))