【demo50】导航栏最小化

客怎眠qvq

发布于 2022-11-01 16:24:37

6090

文章被收录于专栏：某菜鸟の小屋某菜鸟の小屋

📢前言

代码取自开源项目50projects50days，用作个人学习和巩固三件套的知识，增加了注释，可能会有小改动。

在线演示地址

📝实现思路及效果

💻代码

index.html

<!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>

style.css

@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);
}

script.js

const toggle = document.getElementById('toggle')
const nav = document.getElementById('nav')

toggle.addEventListener('click', () => nav.classList.toggle('active'))

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022-08-29，如有侵权请联系 cloudcommunity@tencent.com 删除

css