如何用css实现简单折叠菜单_石家庄创泽智能科技有限公司

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

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

2025-10-15

浏览次数：次

返回列表

答案：通过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 伪类实现无 J*aScript 的折叠效果：

有一导航

有一导航延续了美国Groupon网站一贯的简约风格和购物流程，致力于打造中国本土化的精品消费限时团购网站，您会发现网站的页面非常简单，简单到每天只有一款产品。产品通常不是实物，而是生活消费领域的各类服务型产品，比如服装、饰品、数码、化妆品、培训、健身等各类商品，用户只需在线购买，三分钟就可轻松买到超低折扣的团购产品！

0 查看详情有一导航

/* 当 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>

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

以上就是如何用css实现简单折叠菜单的详细内容，更多请关注其它相关文章！

# 选择器 # 网站推广价格佳好乐云seo # 鹤壁网站平台建设 # 网站营销推广只信u火19星 # 学生如何做营销号推广 # 绥化抖音关键词搜索排名价格 # 怎么找服装关键词排名 # 广州网络营销推广软件 # 大通网站推广怎么样做的 # 江苏网站推广报价优化 # 长葛网站建设报价 # 只需 # 可以用 # 多个 # css # 两种类型 # 是一个 # 中不 # 团购 # 如何用 # 有一 # overflow # html元素 # 伪元素 # html # java # javascript

相关栏目：【科技资讯46185 】【网络学院92790 】

上一篇：css选择器与媒体查询结合如何应用

首页

关于我们

产品展示

咨询研究

新闻中心

留言板

联系我们

新闻中心 NEWS CENTER

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

1. HTML 结构

2. 基础 CSS 样式

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

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