搞定折叠导航栏动画，几行CSS轻松解决

2023-12-20 16:55:44

折叠导航栏动画 ，是指当我们点击“关闭”按钮时，导航栏自动折叠，再次点击按钮时，导航栏又自动展开的动画效果。这种效果顺畅，简单又美观，深受网站设计师们的青睐。

在本文中，我们将详细介绍如何使用CSS实现折叠导航栏动画，包括基本原理、步骤和代码示例。通过这篇教程，读者可以轻松掌握折叠导航栏动画的制作方法，为自己的网站增添交互性和美观性。

基本原理

折叠导航栏动画的实现原理非常简单，就是利用CSS的transition属性来实现平滑的动画效果。当我们点击“关闭”按钮时，导航栏的高度从原来的值（例如，50px）逐渐变为0px，同时，导航栏的overflow属性从visible变为hidden，这样就可以将导航栏隐藏起来。当我们再次点击按钮时，导航栏的高度从0px逐渐变回原来的值，同时，导航栏的overflow属性从hidden变为visible，这样就可以将导航栏显示出来。

步骤

准备HTML代码

首先，我们需要准备一个HTML代码结构，用来存放导航栏。代码如下：

<nav>
  <ul>
    <li><a href="#">首页</a></li>
    <li><a href="#">关于我们</a></li>
    <li><a href="#">产品</a></li>
    <li><a href="#">联系我们</a></li>
  </ul>
  <button id="toggle-button">关闭</button>
</nav>

在这个代码中，<nav>标签表示导航栏，<ul>标签表示导航栏中的菜单列表，<li>标签表示菜单项，<a>标签表示菜单项的链接，#toggle-button表示“关闭”按钮。

准备CSS代码

接下来，我们需要准备CSS代码，用来实现导航栏的折叠动画。代码如下：

nav {
  width: 100%;
  height: 50px;
  background-color: #f2f2f2;
}

ul {
  list-style-type: none;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
}

li {
  padding: 10px;
}

a {
  text-decoration: none;
  color: black;
}

#toggle-button {
  position: absolute;
  right: 10px;
  top: 10px;
  padding: 5px;
  border: 1px solid black;
  border-radius: 5px;
  background-color: white;
  color: black;
  cursor: pointer;
}

nav.collapsed {
  height: 0px;
  overflow: hidden;
}

#toggle-button.collapsed {
  display: none;
}

在这个代码中，我们首先定义了导航栏的样式，包括宽度、高度、背景颜色等。然后，我们定义了菜单列表的样式，包括列表样式类型、显示方式、对齐方式和排列方式等。接下来，我们定义了菜单项的样式，包括内边距、文本修饰、颜色等。然后，我们定义了“关闭”按钮的样式，包括位置、内边距、边框、边框圆角、背景颜色、颜色、鼠标指针样式等。最后，我们定义了导航栏折叠后的样式，包括高度和溢出属性。

实现折叠动画

为了实现导航栏的折叠动画，我们需要在JavaScript代码中添加一些代码。代码如下：

const toggleButton = document.getElementById('toggle-button');
const nav = document.querySelector('nav');

toggleButton.addEventListener('click', () => {
  nav.classList.toggle('collapsed');
});

在这个代码中，我们首先获取“关闭”按钮和导航栏的DOM元素。然后，我们在“关闭”按钮上添加一个点击事件监听器。当点击“关闭”按钮时，我们使用classList.toggle()方法在导航栏上切换collapsed类。当导航栏上存在collapsed类时，导航栏就会折叠起来；当导航栏上不存在collapsed类时，导航栏就会展开。

代码示例

完整的代码示例如下：

<!DOCTYPE html>
<html>
<head>
  
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <nav>
    <ul>
      <li><a href="#">首页</a></li>
      <li><a href="#">关于我们</a></li>
      <li><a href="#">产品</a></li>
      <li><a href="#">联系我们</a></li>
    </ul>
    <button id="toggle-button">关闭</button>
  </nav>

  <script src="script.js"></script>
</body>
</html>

nav {
  width: 100%;
  height: 50px;
  background-color: #f2f2f2;
}

ul {
  list-style-type: none;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
}

li {
  padding: 10px;
}

a {
  text-decoration: none;
  color: black;
}

#toggle-button {
  position: absolute;
  right: 10px;
  top: 10px;
  padding: 5px;
  border: 1px solid black;
  border-radius: 5px;
  background-color: white;
  color: black;
  cursor: pointer;
}

nav.collapsed {
  height: 0px;
  overflow: hidden;
}

#toggle-button.collapsed {
  display: none;
}

const toggleButton = document.getElementById('toggle-button');
const nav = document.querySelector('nav');

toggleButton.addEventListener('click', () => {
  nav.classList.toggle('collapsed');
});

结语

通过本文，我们详细介绍了如何使用CSS实现折叠导航栏动画，包括基本原理、步骤和代码示例。读者可以根据本文中的内容，轻松掌握折叠导航栏动画的制作方法，为自己的网站增添交互性和美观性。