当前位置：首页 > 文章列表 > 文章 > 前端 > CSS简单折叠菜单实现教程

CSS简单折叠菜单实现教程

2025-11-29 11:39:28 0浏览收藏

在文章实战开发的过程中，我们经常会遇到一些这样那样的问题，然后要卡好半天，等问题解决了才发现原来一些细节知识点还是没有掌握好。今天golang学习网就整理分享《CSS实现简单折叠菜单教程》，聊聊，希望可以帮助到正在努力赚钱的你。

答案：通过CSS的:target伪类控制max-height实现折叠菜单，点击带锚点的标题触发内容显示隐藏，配合transition创建动画效果，并可用伪元素箭头指示状态。

如何用css实现简单折叠菜单

实现一个简单的折叠菜单，主要通过 CSS 控制内容的显示与隐藏，配合一些过渡动画让效果更自然。下面是一个基础但实用的实现方式。

1. HTML 结构

使用一个容器包裹菜单标题和内容，便于用 CSS 控制展开与收起：

<div class="menu-item">
  <div class="menu-header">点击展开/收起</div>
  <div class="menu-content">
    <p>这里是折叠菜单中的内容，可以是任意HTML元素。</p>
  </div>
</div>

2. 基础 CSS 样式

设置菜单外观，并默认隐藏内容：

.menu-header {
  background-color: #444;
  color: white;
  padding: 10px;
  cursor: pointer;
  font-weight: bold;
}
<p>.menu-content {
max-height: 0;
overflow: hidden;
background-color: #f9f9f9;
transition: max-height 0.3s ease-out;
}</p><p>.menu-content p {
margin: 10px;
}</p>

3. 使用 :target 实现简单交互

利用锚点链接和 :target 伪类实现无 JavaScript 的折叠效果：

/* 当 menu-content 被 target 时展开 */
.menu-content:target {
  max-height: 200px; /* 根据内容调整高度 */
}

修改 HTML 中的标题为可点击链接：

<div class="menu-item">
  <a href="#content1" class="menu-header">点击展开/收起</a>
  <div id="content1" class="menu-content">
    <p>这里是折叠菜单中的内容。</p>
  </div>
</div>

4. 可选：添加箭头图标指示状态

可以用伪元素做一个小三角，点击时翻转表示展开或收起：

.menu-header::after {
  content: " ▼";
  font-size: 0.8em;
  transition: transform 0.3s;
}
<p>.menu-header:hover::after {
opacity: 0.7;
}</p><p>/<em> 收起状态不旋转，展开时向下箭头变向上 </em>/
.menu-content:target ~ .menu-header::after {
transform: rotate(180deg);
}</p>

基本上就这些。这种方式无需 JavaScript，适合静态页面或对性能要求较高的场景。如果需要多个菜单项，复制结构并确保每个 id 唯一即可。虽然功能简单，但足够应对很多基础需求。

今天关于《CSS简单折叠菜单实现教程》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！