纯CSS实现可折叠树状菜单

实现一个可折叠的树状菜单，通常可以用JavaScript来进行实现。但是，我们也可以使用纯CSS来实现一个可折叠的树状菜单。

实现思路

我们可以利用HTML中的checkbox和label标签的关联联动效果，以及CSS中的选择器和属性来实现可折叠的树状菜单。具体步骤如下：

利用HTML的各种标签来构建树状结构，比如使用ul和li标签，其中ul标签表示整个菜单，li标签表示菜单的每一个节点，可包含一个span标签表示节点的名称。
利用checkbox和label标签的关联联动效果，来实现菜单的展开和收缩。具体做法是，在li标签内先插入一个checkbox标签，然后再插入带有for属性的label标签，for属性的值为checkbox标签的id属性值。也就是说，点击label标签时，就会触发checkbox标签的勾选或取消勾选。
利用CSS的选择器和属性控制菜单的样式和状态。具体做法是，利用选择器选择checkbox标签和label标签的状态来控制菜单的样式。例如，当checkbox标签被勾选时，利用+符号选择下一个兄弟元素的状态，来控制菜单的显隐。当checkbox标签没有勾选时，使用:checked选择器将其隐藏。

示例

下面提供两个示例用来说明如何实现纯CSS的可折叠树状菜单。

示例1

HTML代码：

<ul class="menu">
  <li>
    <input type="checkbox" id="menu1" />
    <label for="menu1">菜单1</label>
    <ul>
      <li>
        <input type="checkbox" id="menu1-1" />
        <label for="menu1-1">菜单1-1</label>
        <ul>
          <li>
            <span>菜单1-1-1</span>
          </li>
          <li>
            <span>菜单1-1-2</span>
          </li>
        </ul>
      </li>
      <li>
        <span>菜单1-2</span>
      </li>
    </ul>
  </li>
</ul>

CSS代码：

/* 控制所有 ul 标签的样式 */
.menu {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

/* 控制第一级 li 标签的样式 */
.menu > li {
  position: relative;
}

/* 控制第一级单选框的样式 */
.menu > li > input[type="checkbox"] {
  display: none;
}

/* 控制第一级标签的样式 */
.menu > li > label {
  display: inline-block;
  padding-left: 16px;
  position: relative;
  z-index: 2;
  cursor: pointer;
}

/* 控制第一级菜单的折叠样式 */
.menu > li > ul {
  max-height: 0;
  overflow: hidden;
  list-style-type: none;
  padding: 0;
  margin: 0;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  z-index: 1;
  transition: all 0.3s ease;
}

/* 控制第一级菜单的展开样式 */
.menu > li > input[type="checkbox"]:checked ~ ul {
  max-height: 150px; /* 修改 max-height，实现菜单的展开 */
}

/* 控制第二级 ul 标签的样式 */
.menu > li > ul > li > ul {
  max-height: 0;
  overflow: hidden;
  list-style-type: none;
  padding: 0;
  margin: 0 0 0 16px;
  position: relative;
  left: 16px;
  transition: all 0.3s ease;
}

/* 控制第二级单选框的样式 */
.menu > li > ul > li > input[type="checkbox"] {
  display: none;
}

/* 控制第二级 label 标签的样式 */
.menu > li > ul > li > label {
  display: inline-block;
  padding-left: 16px;
  position: relative;
  cursor: pointer;
}

/* 控制第二级叶节点的样式 */
.menu > li > ul > li > span {
  display: inline-block;
  padding-left: 16px;
  cursor: pointer;
}

/* 控制第二级菜单的展开样式 */
.menu > li > ul > li > input[type="checkbox"]:checked ~ ul {
  max-height: 150px; /* 修改 max-height，实现菜单的展开 */
}

示例2

HTML代码：

<ul class="menu">
  <li>
    <input type="checkbox" id="menu2" />
    <label for="menu2">菜单2</label>
    <ul>
      <li>
        <span>菜单2-1</span>
        <ul>
          <li>
            <span>菜单2-1-1</span>
          </li>
          <li>
            <span>菜单2-1-2</span>
          </li>
        </ul>
      </li>
      <li>
        <span>菜单2-2</span>
      </li>
    </ul>
  </li>
</ul>

CSS代码：

/* 控制所有 ul 标签的样式 */
.menu {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

/* 控制第一级 li 标签的样式 */
.menu > li {
  position: relative;
}

/* 控制第一级单选框的样式 */
.menu > li > input[type="checkbox"] {
  display: none;
}

/* 控制第一级 label 标签的样式 */
.menu > li > label {
  display: inline-block;
  padding-left: 16px;
  position: relative;
  z-index: 2;
  cursor: pointer;
}

/* 控制第一级菜单的折叠样式，因为没有子菜单，所以 max-height 设置为0 */
.menu > li > ul {
  max-height: 0;
  overflow: hidden;
  list-style-type: none;
  padding: 0;
  margin: 0;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  z-index: 1;
  transition: all 0.3s ease;
}

/* 控制第一级菜单的展开样式 */
.menu > li > input[type="checkbox"]:checked ~ ul {
  max-height: 150px; /* 修改 max-height，实现菜单的展开 */
}

/* 控制第二级 ul 标签的样式 */
.menu > li > ul > li > ul {
  max-height: 0;
  overflow: hidden;
  list-style-type: none;
  padding: 0;
  margin: 0 0 0 16px;
  position: relative;
  left: 16px;
  transition: all 0.3s ease;
}

/* 控制第二级叶节点的样式，因为没有子菜单，所以不设置展开样式 */
.menu > li > ul > li > span {
  display: inline-block;
  padding-left: 16px;
  cursor: pointer;
}

注意事项

在使用纯CSS实现可折叠的树状菜单时需要注意以下几点：

checkbox和label标签必须要有正确的关联，才能实现菜单的展开和收缩效果。其中，checkbox标签的id属性值必须和label标签的for属性值相同。
由于纯CSS实现树状菜单的方式是通过伪类:checked控制伪元素，实现菜单的展开和收缩，因此展开和收缩的过程都是瞬间完成的。如果需要实现缓慢展开和收缩的效果，可以在CSS中使用transition属性，设置动画时间和效果。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：纯CSS实现可折叠树状菜单 - Python技术站