CSS导航菜单折叠展开技巧

积累知识，胜过积蓄金银！毕竟在文章开发的过程中，会遇到各种各样的问题，往往都是一些细节知识点还没有掌握好而导致的，因此基础知识点的积累是很重要的。下面本文《CSS动画实现导航菜单折叠展开_height与@keyframes应用》，就带大家讲解一下知识点，若是你对本文感兴趣，或者是想搞懂其中某个知识点，就请你继续往下看吧~

使用max-height模拟、@keyframes定义关键帧或JavaScript动态计算高度，可实现导航菜单平滑展开收起。1. 通过设置max-height与overflow:hidden结合transition实现简单动画；2. 利用@keyframes对已知高度进行精确动画控制，配合forwards保持最终状态；3. 借助JavaScript读取scrollHeight实现真正自适应height动画，适用于动态内容。根据场景选择合适方案可突破height:auto无法动画的限制。

导航菜单的折叠展开效果在响应式设计中非常常见，使用CSS动画结合 height 属性与 @keyframes 能实现平滑过渡。虽然 height: auto 无法直接参与动画插值，但通过一些技巧可以模拟出自然的展开收起效果。

1. 使用 height 配合 max-height 模拟动画

由于 height: auto 不能被 CSS 动画直接驱动，一个常用方法是使用 max-height 来代替。设置一个足够大的 max-height 值，在展开时生效，收起时设为 0，并配合 overflow: hidden 实现内容隐藏。

示例代码：

<nav class="menu"><ul class="menu-list"><li>首页</li><li>产品</li><li>关于</li></ul></nav><button class="toggle-btn" onclick="this.classList.toggle('active')">
  切换菜单
</button>

这种方式简单有效，适合内容高度相对固定的场景。缺点是如果 max-height 设置过大（如 1000px），动画时间可能显得拖沓。

2. 使用 @keyframes 定义更精细的 height 动画

如果需要更精确控制 height 的变化过程，可以借助 @keyframes 定义关键帧动画。虽然不能直接对 height: auto 做动画，但可以针对特定已知高度设置关键帧。

示例：预知菜单高度时的 keyframes 动画

JavaScript 控制类名切换即可触发动画：

注意：forwards 保持动画结束后的最终状态，避免动画完成后跳回初始值。

3. 结合 JavaScript 获取真实高度实现动态动画

为了兼容不同设备和屏幕尺寸，可使用 JavaScript 动态获取元素展开后的实际高度，再注入到 CSS 变量或内联样式中，实现真正“自适应”的 height 动画。

实现思路：

• 将菜单临时设为 display: block、height: auto 并隐藏溢出
• 用 offsetHeight 获取真实高度
• 将该值设为 height 动画的目标值
• 执行动画后恢复 overflow 显示

示例代码片段：

这种方法最灵活，适用于内容动态变化的导航菜单，能真正实现基于 height 的流畅动画。

基本上就这些。合理选择 max-height 过渡、@keyframes 关键帧或 JS 动态计算，能让导航菜单的折叠展开既顺滑又可靠。关键是理解 height: auto 不可动画的本质，并用合适方式绕过限制。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《CSS导航菜单折叠展开技巧》文章吧，也可关注golang学习网公众号了解相关技术文章。