[分享]css动画收缩菜单栏

在网站开发过程中，动画效果是很重要的一部分。其中，CSS动画效果可以为网站带来更加生动的展示方式。在本文中，我们将介绍如何实现CSS动画收缩菜单栏。/ HTML 代码 / Home About Se...

在网站开发过程中，动画效果是很重要的一部分。其中，CSS动画效果可以为网站带来更加生动的展示方式。在本文中，我们将介绍如何实现CSS动画收缩菜单栏。

/* HTML 代码 */
<nav class="menu">
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Service</a>
  <a href="#">Contact</a>
</nav>

/* CSS 代码 */
.menu {
  width: 100%;
  background-color: #333;
  display: flex;
  justify-content: space-around;
  align-items: center;
  transition: all 0.5s ease-in-out;
}

.menu a {
  text-decoration: none;
  color: #fff;
  font-size: 1.2rem;
  padding: 1rem 2rem;
}

.menu.collapsed {
  width: 0%;
}

.menu.collapsed a {
  display: none;
} 

以上代码中，我们使用了 <nav> 标签来创建菜单栏，使用 <a> 标签作为菜单中的链接。然后，我们使用 flex 布局来给菜单栏设置了水平居中和垂直居中的样式。

对于CSS动画效果，我们使用 transition 属性来制定菜单栏的尺寸和内容变化的过渡效果。此外，我们也使用了 .collapsed 类来设置菜单栏的收缩样式。

在JavaScript代码中，我们可以使用以下代码来实现菜单栏收缩效果：

const menu = document.querySelector('.menu');
const button = document.querySelector('#menu-btn');

button.addEventListener('click', function() {
  menu.classList.toggle('collapsed');
}); 

以上代码中，我们使用了 querySelector() 方法获取HTML中的菜单栏和按钮。然后，我们使用 addEventListener() 方法为按钮元素添加了 ‘click’ 事件响应，点击按钮时可以切换菜单栏的状态。

到这里，我们已经学习了如何实现CSS动画效果收缩菜单栏。这样的效果可以让网站更加精美，同时为用户带来更好的浏览体验。