css初级项目侧边栏折叠菜单如何实现-css教程-PHP中文网

css初级项目侧边栏折叠菜单如何实现

P粉602998670

发布： 2025-10-24 21:09:02

原创

295人浏览过

侧边栏折叠菜单通过HTML结构、CSS样式和JavaScript交互实现，点击按钮切换类名控制侧边栏宽度与主内容区联动位移，配合过渡动画实现平滑效果。

css初级项目侧边栏折叠菜单如何实现

实现一个CSS初级项目中的侧边栏折叠菜单，核心是利用HTML结构搭配CSS样式控制显示与隐藏。可以通过点击按钮切换类名，用CSS控制侧边栏的宽度或位移来达到“折叠”效果。下面是一个简单实用的实现方法。

1. 基本HTML结构

构建一个包含侧边栏、按钮和主内容区的基本布局：

<div class="sidebar">
  <div class="toggle-btn" id="toggleBtn">☰</div>
  <ul class="menu">
    <li><a href="#">首页</a></li>
    <li><a href="#">文章</a></li>
    <li><a href="#">设置</a></li>
  </ul>
</div>
<div class="main-content">
  <h2>主内容区域</h2>
</div>

2. CSS样式设计

使用CSS定义侧边栏展开和折叠状态。默认展开，点击后通过JavaScript添加类实现收缩。

.sidebar {
  width: 200px;
  height: 100vh;
  background-color: #333;
  color: white;
  transition: width 0.3s ease;
}

.sidebar.collapsed {
  width: 60px;
}

.menu a {
  display: block;
  padding: 15px;
  color: white;
  text-decoration: none;
  font-size: 14px;
  text-align: center;
}

.menu a::before {
  display: block;
  margin-bottom: 5px;
}

.sidebar.collapsed .menu a {
  font-size: 12px;
}

.sidebar.collapsed .menu a span {
  display: none;
}

.toggle-btn {
  text-align: center;
  padding: 15px;
  font-size: 20px;
  cursor: pointer;
}

.main-content {
  margin-left: 200px;
  padding: 20px;
  transition: margin-left 0.3s ease;
}

.sidebar.collapsed ~ .main-content {
  margin-left: 60px;
}