正文

手机电脑通用，轻松实现菜单展开收起，CSS菜单动画效果教程

/0 浏览量
0824

在这个数字时代，一个美观且功能强大的网站菜单对于用户体验至关重要。本文将指导你如何使用CSS轻松实现一个既适用于手机又适用于电脑的菜单，并添加一些动画效果来提升用户的视觉体验。

一、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>
</nav>

二、CSS样式设计

接下来，我们将使用CSS来设计菜单的外观。为了确保菜单在手机和电脑上都能良好显示，我们可以使用媒体查询。

nav ul {
  list-style-type: none;
  padding: 0;
}

nav ul li {
  position: relative;
}

nav ul li a {
  display: block;
  padding: 10px 20px;
  text-decoration: none;
  color: #333;
}

/* 手机端样式 */
@media screen and (max-width: 768px) {
  nav ul li {
    display: block;
  }

  nav ul li a {
    background-color: #f0f0f0;
    border-bottom: 1px solid #ddd;
  }
}

三、CSS动画效果

为了使菜单更加生动，我们可以添加一些简单的CSS动画效果。以下是一个菜单项展开和收起的动画示例：

nav ul li::after {
  content: '';
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border: 5px solid transparent;
  border-top-color: #333;
  transition: all 0.3s ease;
}

nav ul li:hover::after {
  width: 10px;
  height: 10px;
  border-top-color: transparent;
  border-right-color: #333;
}

/* 动画效果 */
nav ul li a {
  transition: background-color 0.3s ease;
}

nav ul li:hover a {
  background-color: #ddd;
}

四、响应式菜单按钮

为了在手机上更好地展示菜单，我们可以添加一个汉堡按钮（Hamburger menu）：

<nav>
  <div class="hamburger">
    <div class="bar"></div>
    <div class="bar"></div>
    <div class="bar"></div>
  </div>
  <ul>
    <li><a href="#">首页</a></li>
    <li><a href="#">关于</a></li>
    <li><a href="#">服务</a></li>
    <li><a href="#">联系</a></li>
  </ul>
</nav>

.hamburger {
  display: none;
}

@media screen and (max-width: 768px) {
  .hamburger {
    display: block;
    cursor: pointer;
    padding: 10px 20px;
  }

  .hamburger .bar {
    width: 25px;
    height: 3px;
    background-color: #333;
    margin: 5px 0;
    transition: all 0.3s ease;
  }

  /* 汉堡按钮动画效果 */
  .hamburger.open .bar:nth-child(1) {
    transform: rotate(-45deg) translate(-5px, 6px);
  }

  .hamburger.open .bar:nth-child(2) {
    opacity: 0;
  }

  .hamburger.open .bar:nth-child(3) {
    transform: rotate(45deg) translate(-5px, -6px);
  }
}

五、JavaScript交互

最后，我们需要添加一些JavaScript代码来控制汉堡按钮的展开和收起：

document.querySelector('.hamburger').addEventListener('click', function () {
  this.classList.toggle('open');
  document.querySelector('nav ul').classList.toggle('show');
});

nav ul.show li {
  display: block;
}

nav ul.show li a {
  background-color: #f0f0f0;
  border-bottom: 1px solid #ddd;
}

通过以上步骤，我们成功地创建了一个既美观又实用的响应式菜单。这个菜单在手机和电脑上都能良好显示，并具有一些简单的动画效果来提升用户体验。希望这篇文章能帮助你更好地理解CSS菜单动画的制作过程。

-- 展开阅读全文 --