制作树形菜单css

2026-04-02 04:30:42CSS

树形菜单的基本结构

HTML结构通常使用嵌套的无序列表（<ul>和<li>）表示层级关系：

<ul class="tree">
  <li>父节点
    <ul>
      <li>子节点1</li>
      <li>子节点2</li>
    </ul>
  </li>
</ul>

基础CSS样式

清除默认列表样式并设置基础间距：

.tree, .tree ul {
  list-style: none;
  padding-left: 20px;
  margin: 0;
}

.tree li {
  position: relative;
  padding: 5px 0;
}

连接线设计

使用伪元素创建垂直和水平连接线：

制作树形菜单css

.tree li::before {
  content: "";
  position: absolute;
  top: 0;
  left: -15px;
  width: 15px;
  height: 100%;
  border-left: 1px solid #ccc;
}

.tree li::after {
  content: "";
  position: absolute;
  top: 15px;
  left: -15px;
  width: 15px;
  border-bottom: 1px solid #ccc;
}

.tree li:last-child::before {
  height: 15px;
}

交互效果

添加展开/折叠功能时的样式变化：

.tree li > ul {
  display: none;
}

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

.tree li > span::before {
  content: "+";
  margin-right: 5px;
  cursor: pointer;
}

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

美化样式

添加图标和颜色增强视觉效果：

制作树形菜单css

.tree li > span {
  display: inline-block;
  padding: 2px 5px;
  border-radius: 3px;
  transition: background 0.3s;
}

.tree li > span:hover {
  background: #f0f0f0;
}

响应式调整

针对不同屏幕尺寸优化显示：

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

  .tree li::before,
  .tree li::after {
    left: -10px;
    width: 10px;
  }
}

完整示例

结合HTML和JavaScript实现完整功能：

<ul class="tree">
  <li><span>根节点</span>
    <ul>
      <li><span>分支1</span>
        <ul>
          <li><span>叶子1</span></li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

<script>
document.querySelectorAll('.tree span').forEach(span => {
  span.addEventListener('click', function() {
    this.parentElement.classList.toggle('open');
  });
});
</script>