纯CSS实现可折叠树状菜单

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

实现思路

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

  1. 利用HTML的各种标签来构建树状结构,比如使用ul和li标签,其中ul标签表示整个菜单,li标签表示菜单的每一个节点,可包含一个span标签表示节点的名称。
  2. 利用checkbox和label标签的关联联动效果,来实现菜单的展开和收缩。具体做法是,在li标签内先插入一个checkbox标签,然后再插入带有for属性的label标签,for属性的值为checkbox标签的id属性值。也就是说,点击label标签时,就会触发checkbox标签的勾选或取消勾选。
  3. 利用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实现可折叠的树状菜单时需要注意以下几点:

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

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

(0)
上一篇 2023年6月9日
下一篇 2023年6月9日

相关文章

  • 使用CSS transition和animation改变渐变状态的实现方法

    有关如何使用CSS transition和animation改变渐变状态的实现方法,我可以提供以下完整攻略: 1. 使用CSS transition改变渐变状态的实现方法 1.1 使用线性渐变 在CSS中,我们可以使用线性渐变(linear-gradient)来实现渐变效果,并使用transition来改变渐变状态。以下是一个示例代码: .gradient …

    css 2023年6月11日
    00
  • VS Code代码六边形颜色长度怎么设置未错误?

    VS Code代码六边形颜色长度设置攻略 在 VS Code 中,六边形颜色长度通常指的是 CSS 颜色值的长度。设置正确的颜色长度可以让你的代码更具可读性,并且避免出现一些错误。接下来,我们将详细讲解如何设置 VS Code 中的六边形颜色长度。 步骤一:打开设置 首先,我们需要打开 VS Code 设置。方法是在菜单栏中选择 File -> Pre…

    css 2023年6月9日
    00
  • css3的transition属性详解

    CSS3的transition属性详解 CSS3的transition属性用于定义元素从一种样式平滑过渡到另一种样式的效果。可以设置过渡效果的属性包括: background-color border height width opacity transform 等等 语法 transition: property duration timing-funct…

    css 2023年6月10日
    00
  • vue3新拟态组件库开发流程之table组件源码分析

    Vue3新拟态组件库开发流程之table组件源码分析攻略 1. 前言 Vue3作为一款优秀的前端框架,不断地为前端开发者带来更加方便和高效的开发模式。其中,拟态风格越来越受到大家的关注,为此,我们今天就来学习一下Vue3新拟态组件库开发流程中的table组件源码分析。 2. 源码分析 2.1. 源文件结构 table组件的源码位于/src/component…

    css 2023年6月9日
    00
  • CSS linear-gradient属性案例详解

    以下是“CSS linear-gradient属性案例详解”的完整攻略: 什么是CSS linear-gradient属性? CSS linear-gradient属性用于创建一个线性渐变背景色。它可以指定渐变的起点和终点,以及每个颜色所处的位置和数量。可以使用CSS的渐变方式在Web页面中创建一些酷炫的效果。 如何使用CSS linear-gradient…

    css 2023年6月10日
    00
  • 基于Jquery实现表格动态分页实现代码

    基于jQuery实现表格动态分页的过程其实很简单,主要包含以下三个步骤: 准备HTML代码 首先准备一个包含表格的HTML代码,例如以下代码段: <table id="table"> <thead> <tr> <th>ID</th> <th>Name</th&g…

    css 2023年6月10日
    00
  • vertical-align 表单元素垂直对齐的解决方法

    下面是关于 vertical-align 属性的完整攻略: 一、vertical-align 属性的作用 vertical-align 属性用于设置表单元素的垂直对齐方式。它的取值范围包括: baseline:基线对齐。 sub:下标对齐。 super:上标对齐。 top:顶部对齐。 middle:中部对齐。 bottom:底部对齐。 text-top:文本…

    css 2023年6月10日
    00
  • 纯CSS实现的大小渐变、渐远效果

    下面是详细讲解“纯CSS实现的大小渐变、渐远效果”的完整攻略。 纯CSS实现的大小渐变效果 步骤1:创建HTML结构 首先,我们需要先创建HTML结构用于展示效果。假设我们需要创建一个圆形的元素,并在元素中心放置一些内容。我们可以使用一个div元素,并设置它的宽度和高度相等,即可创建出一个圆形的元素,同时在div元素内部加入一些子元素,用于展示需要突出显示的…

    css 2023年6月9日
    00
合作推广
合作推广
分享本页
返回顶部