如何在CSS中实现导航菜单折叠动画_使用CSS animation与height/max-height制作菜单展开收起-css教程-PHP中文网

如何在CSS中实现导航菜单折叠动画_使用CSS animation与height/max-height制作菜单展开收起

P粉602998670

发布： 2025-11-17 16:47:02

原创

644人浏览过

使用max-height和transition实现菜单折叠动画，通过设置max-height从0到足够大值的过渡，配合overflow:hidden实现平滑展开收起效果。

如何在css中实现导航菜单折叠动画_使用css animation与height/max-height制作菜单展开收起

实现导航菜单的折叠动画，关键在于让菜单在展开和收起时有平滑的过渡效果。使用 CSS 的 animation 或 transition 配合 height 或 max-height 可以轻松实现这一效果。虽然不能直接对 height: auto 做过渡，但通过一些技巧可以绕过这个限制。

使用 max-height 实现渐进式展开动画

由于无法对 height: auto 添加 transition，一个常见做法是使用 max-height 来模拟动态高度。

基本思路是：将元素的 max-height 从 0 过渡到一个足够大的值（如 500px），从而实现“看起来”像自动适应高度的动画效果。

初始状态设置 max-height: 0; overflow: hidden;
展开状态设置 max-height: 500px;（需大于菜单最大可能高度）
添加 transition 控制动画时长和缓动函数

示例代码：

立即学习“前端免费学习笔记（深入）”；

.nav-menu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}

.nav-menu.expanded {
  max-height: 500px;
}

登录后复制

HTML 结构示例：

表单大师AI

一款基于自然语言处理技术的智能在线表单创建工具，可以帮助用户快速、高效地生成各类专业表单。

查看详情

<button onclick="toggleMenu()">切换菜单</button>
<nav id="menu" class="nav-menu">
  <ul>
    <li><a href="#">首页</a></li>
    <li><a href="#">关于</a></li>
    <li><a href="#">服务</a></li>
    <li><a href="#">联系</a></li>
  </ul>
</nav>

<script>
function toggleMenu() {
  const menu = document.getElementById('menu');
  menu.classList.toggle('expanded');
}
</script>

登录后复制

使用 CSS animation 制作更精细的展开效果

如果需要更复杂的动画控制（比如配合 opacity、transform），可以使用 @keyframes 定义动画。

这种方式适合做组合动画，例如：高度展开的同时淡入。

@keyframes slideDown {
  from {
    max-height: 0;
    opacity: 0;
  }
  to {
    max-height: 500px;
    opacity: 1;
  }
}

@keyframes slideUp {
  from {
    max-height: 500px;
    opacity: 1;
  }
  to {
    max-height: 0;
    opacity: 0;
  }
}

.nav-menu.animated {
  overflow: hidden;
  opacity: 1;
}

.nav-menu.expand {
  animation: slideDown 0.3s forwards;
}

.nav-menu.collapse {
  animation: slideUp 0.3s forwards;
}

登录后复制

JavaScript 控制动画类名切换：

function animateMenu(expand) {
  const menu = document.getElementById('menu');
  menu.classList.remove('expand', 'collapse');
  if (expand) {
    menu.classList.add('expand');
  } else {
    menu.classList.add('collapse');
  }
}

登录后复制