如何用css实现简单折叠菜单-css教程-PHP中文网

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

P粉602998670

发布： 2025-10-15 17:01:01

原创

131人浏览过

答案：通过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 的折叠效果：

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

表单大师AI

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

查看详情

/* 当 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实现简单折叠菜单的详细内容，更多请关注php中文网其它相关文章！