css 左侧导航菜单收缩代码

以下是一个使用纯CSS实现左侧导航菜单收缩的示例代码：

HTML代码：

<div class="sidebar">
  <ul>
    <li><a href="#"><i class="fa fa-home"></i><span>Home</span></a></li>
    <li><a href="#"><i class="fa fa-user"></i><span>Profile</span></a></li>
    <li><a href="#"><i class="fa fa-cog"></i><span>Settings</span></a></li>
  </ul>
  <div class="collapse-btn"><i class="fa fa-angle-double-left"></i></div>
</div>

CSS代码：

.sidebar {
  width: 200px;
  height: 100vh;
  background-color: #f0f0f0;
  position: fixed;
  top: 0;
  left: 0;
  transition: width 0.3s ease-in-out;
  z-index: 1000;
}

.sidebar.collapsed {
  width: 50px;
}

.sidebar ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sidebar ul li {
  height: 50px;
  border-bottom: 1px solid #ddd;
}

.sidebar ul li a {
  display: block;
  height: 100%;
  width: 100%;
  text-decoration: none;
  color: #333;
  padding-left: 20px;
  line-height: 50px;
  position: relative;
}

.sidebar ul li a i {
  margin-right: 10px;
}

.sidebar ul li a span {
  display: inline-block;
}

.collapse-btn {
  position: absolute;
  bottom: 20px;
  left: 10px;
  cursor: pointer;
  transition: transform 0.3s ease-in-out;
}

.collapse-btn:hover {
  transform: rotate(-180deg);
}

.collapse-btn i {
  font-size: 20px;
}

以上代码中，我们使用了CSS的transition属性和Javascript的classList属性，实现了左侧导航菜单的收缩效果。当点击收缩按钮时，Javascript代码会给菜单栏的容器添加一个名为"collapsed"的类，CSS中根据该类的存在与否来决定菜单栏的宽度和子元素的显示方式。