在网页设计中，菜单是网站导航的重要组成部分。为了提高用户体验，我们可以利用 CSS 折叠动画来实现菜单的展开与收起效果。本文将介绍如何使用 CSS 来实现这一效果，并附有示例代码。
CSS 动画基础
在开始编写折叠动画之前，我们先来回顾一下 CSS 动画的基本概念。
实现 CSS 动画有两种方法：使用 @keyframes 关键帧或使用 CSS 过渡属性。在本文中，我们将使用过渡属性 max-height 来实现折叠动画效果。
过渡属性是指元素在状态改变时逐渐改变的属性。通过设置过渡属性以及持续时间、延迟时间等参数，我们可以实现元素从一种状态平滑过渡到另一种状态的效果。
实现菜单折叠动画
接下来我们将通过示例代码来演示如何实现一个简单的菜单折叠动画。
<!DOCTYPE html>
<html>
<head>
<style>
.menu {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
}
.menu.active {
max-height: 200px;
}
.button {
cursor: pointer;
}
</style>
</head>
<body>
<div class="button">点击展开/收起菜单</div>
<ul class="menu">
<li>菜单项1</li>
<li>菜单项2</li>
<li>菜单项3</li>
</ul>
<script>
var btn = document.querySelector('.button');
var menu = document.querySelector('.menu');
btn.addEventListener('click', function() {
menu.classList.toggle('active');
});
</script>
</body>
</html>
在上面的代码中，我们使用了一个包含菜单项的无序列表 <ul>，并设置了菜单的初始状态为折叠状态，max-height 属性为 0。通过点击按钮，我们通过 JavaScript 切换菜单元素的 active 类，从而改变菜单的高度。
在 CSS 部分，我们设置了菜单元素的 max-height 以及过渡属性，使菜单能够在状态改变时平滑地展开或收起。同时，我们设置了一个具有 cursor: pointer 样式的按钮，使其在被点击时切换菜单的状态。
通过以上代码，我们成功地实现了一个使用 CSS 折叠动画来实现菜单展开与收起效果的示例。
总结
使用 CSS 折叠动画可以为网页的菜单效果增添一些动感和交互性，提高用户体验。本文介绍了如何使用 CSS 过渡属性来实现菜单的折叠动画，并附有示例代码供读者参考。希望本文对于实现菜单折叠动画效果有所帮助。
本文来自极简博客，作者：橙色阳光，转载请注明原文链接：使用CSS折叠动画实现菜单效果
