css初级项目侧边栏折叠菜单如何实现_石家庄创泽智能科技有限公司

新闻中心 NEWS CENTER

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

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

2025-10-24

浏览次数：次

返回列表

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

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

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

1. 基本HTML结构

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

  ☰

主内容区域

2. CSS样式设计

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

.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;
}