当前位置：首页 > CSS

css制作树形菜单

2026-03-12 10:23:10CSS

使用HTML和CSS创建树形菜单

HTML结构采用嵌套的无序列表<ul>和列表项<li>，每个菜单项包含可点击的标签和子菜单容器。

<div class="tree-menu">
  <ul>
    <li>
      <label for="item1">菜单项1</label>
      <input type="checkbox" id="item1">
      <ul>
        <li>子项1</li>
        <li>子项2</li>
      </ul>
    </li>
    <li>
      <label for="item2">菜单项2</label>
      <input type="checkbox" id="item2">
      <ul>
        <li>子项3</li>
        <li>
          <label for="item3">子项4</label>
          <input type="checkbox" id="item3">
          <ul>
            <li>孙项1</li>
            <li>孙项2</li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>

CSS样式设计

通过CSS控制树形菜单的显示效果，包括缩进、图标和交互状态。

css制作树形菜单

.tree-menu ul {
  list-style: none;
  padding-left: 20px;
}

.tree-menu li {
  position: relative;
  margin: 5px 0;
}

.tree-menu input[type="checkbox"] {
  position: absolute;
  opacity: 0;
}

.tree-menu label {
  cursor: pointer;
  padding-left: 25px;
  position: relative;
}

.tree-menu label:before {
  content: "+";
  position: absolute;
  left: 0;
}

.tree-menu input[type="checkbox"]:checked ~ ul {
  display: none;
}

.tree-menu input[type="checkbox"]:checked + label:before {
  content: "-";
}

.tree-menu input[type="checkbox"]:checked ~ ul {
  display: block;
}

添加连接线和图标

增强视觉效果的样式调整，添加连接线和自定义图标。

.tree-menu ul {
  border-left: 1px dotted #ccc;
}

.tree-menu label:hover {
  color: #0066cc;
}

.tree-menu label:before {
  color: #666;
  font-weight: bold;
}

纯CSS实现方法

不使用JavaScript的替代方案，依赖CSS伪类和相邻选择器。

css制作树形菜单

.tree-menu li > ul {
  display: none;
}

.tree-menu li.open > ul {
  display: block;
}

.tree-menu li > span:before {
  content: "▶";
  margin-right: 5px;
}

.tree-menu li.open > span:before {
  content: "▼";
}

响应式设计考虑

针对不同屏幕尺寸调整菜单样式。

@media (max-width: 768px) {
  .tree-menu ul {
    padding-left: 15px;
  }

  .tree-menu label {
    font-size: 14px;
  }
}

动画效果增强

为展开/折叠操作添加平滑过渡效果。

.tree-menu ul {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}

.tree-menu input[type="checkbox"]:checked ~ ul {
  max-height: 1000px;
}

这些方法提供了创建树形菜单的不同实现方式，可以根据项目需求选择最适合的方案。HTML结构保持简洁，CSS负责所有视觉表现和交互逻辑，确保无需JavaScript也能实现基本功能。