CSS を使用してサイドバー メニューの特殊効果を実装するためのヒントと方法

<div class="sidebar">
  <ul>
    <li><a href="#">菜单项1</a></li>
    <li><a href="#">菜单项2</a></li>
    <li><a href="#">菜单项3</a></li>
    <li><a href="#">菜单项4</a></li>
  </ul>
</div>

.sidebar {
  width: 250px;  /* 侧边栏的宽度 */
  height: 100%;  /* 侧边栏的高度 */
  background-color: #f1f1f1;  /* 背景颜色 */
  display: flex;
  flex-direction: column;  /* 设置为纵向排列 */
}

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

.sidebar ul li {
  padding: 10px;
}

.sidebar ul li a {
  text-decoration: none;
  color: #333;
}

.sidebar ul li:hover {
  background-color: #ccc;  /* 鼠标悬停时的背景颜色 */
}

<div class="sidebar">
  <ul>
    <li><a href="#submenu1">菜单项1</a>
      <ul id="submenu1">
        <li><a href="#">子菜单项1-1</a></li>
        <li><a href="#">子菜单项1-2</a></li>
        <li><a href="#">子菜单项1-3</a></li>
      </ul>
    </li>
    <li><a href="#submenu2">菜单项2</a>
      <ul id="submenu2">
        <li><a href="#">子菜单项2-1</a></li>
        <li><a href="#">子菜单项2-2</a></li>
        <li><a href="#">子菜单项2-3</a></li>
      </ul>
    </li>
    <li><a href="#">菜单项3</a></li>
    <li><a href="#">菜单项4</a></li>
  </ul>
</div>

.sidebar ul li ul {
  height: 0;
  overflow: hidden;
  transition: height 0.3s ease;  /* 设置动画过渡效果 */
}

.sidebar ul li:target ul {
  height: auto;  /* 子菜单展开时的高度 */
}

.sidebar ul li {
  position: relative;
  overflow: hidden;
}

.sidebar ul li:hover {
  background-color: #ccc;  /* 鼠标悬停时的背景颜色 */
}

.sidebar ul li a {
  display: block;
  transition: transform 0.3s ease;  /* 设置动画过渡效果 */
}

.sidebar ul li a:hover {
  transform: translateX(20px);  /* 设置滑动的距离 */
}