纯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日

相关文章

  • Css3制作变形与动画效果

    我来为您讲解一下 “Css3制作变形与动画效果” 的完整攻略。 1. 引言 Css3具有丰富的样式属性,可以制作出各种变形及动画效果,让页面更生动、更具吸引力。接下来,我将带领您学习如何实现Css3制作变形与动画效果。 2. 变形效果 2.1 旋转 使用 transform 属性可以实现元素旋转的效果。例如: .box { transform: rotate…

    css 2023年6月10日
    00
  • 利用负边距技术制作自适应宽度布局的网页

    制作自适应宽度布局的网页,通常可以用到负边距技术。下面是具体的攻略: 1. 理解负边距的概念和作用 负边距是指让元素的边界向相反方向偏移的技术。负边距可用于解决两个元素之间的间隙问题,扩大元素的可点击区域,创造一些装饰性质的效果等。利用负边距实现自适应宽度布局的方法是,将容器元素的宽度设为100%,再将里面的元素向相反方向使用负值边距进行偏移,从而创建一种自…

    css 2023年6月9日
    00
  • 使用Springboot打成jar包thymeleaf的问题

    下面是关于“使用Springboot打成jar包thymeleaf的问题”的完整攻略。 1. 为什么需要使用Springboot打成jar包thymeleaf的问题 当我们使用Springboot构建web项目时,我们通常会使用thymeleaf模板引擎来编写html页面。当项目开发完成后,我们需要将其部署到服务器上,使其可以在服务器上运行。这时候,如果我们…

    css 2023年6月9日
    00
  • 图解CSS中position属性的定位用法

    让我来详细讲解一下“图解CSS中position属性的定位用法”。 什么是position属性 在CSS中,position属性用于定义一个元素的定位方式。 position属性的取值有四种: static:默认值,表示元素正常的定位方式,即遵循文档流的方式进行排版; relative:相对定位,表示元素相对于自身原来的位置进行定位; absolute:绝对…

    css 2023年6月9日
    00
  • CSS3 text shadow字体阴影效果

    下面是“CSS3 text-shadow字体阴影效果”完整攻略。 什么是CSS3 text-shadow字体阴影效果? CSS3 text-shadow是用来在文字周围添加阴影效果的CSS属性。它可以给文字添加精美的立体效果,增强其可读性和美观度,常常应用于标题、导航栏等元素中。使用CSS3 text-shadow属性可以实现多种不同的字体阴影效果。 CSS…

    css 2023年6月9日
    00
  • vue一个页面实现音乐播放器的示例

    针对“vue一个页面实现音乐播放器”的完整攻略,我为你详细讲解如下: 前置知识 在开始进行Vue一个页面实现音乐播放器的开发前,需要具备一定的前置知识: HTML、CSS、JavaScript等基础知识 Vue框架基础知识:组件、路由等 音频DOM操作知识 步骤 创建Vue项目 首先需要创建一个Vue项目,并安装所需的依赖: vue create vue-m…

    css 2023年6月11日
    00
  • 简单但很实用的5个css属性

    下面是详细讲解“简单但很实用的5个CSS属性”的完整攻略: 1. 文字截断(text-overflow) 有时候,我们需要限制文字的长度,同时想要显示省略号 (…) 来表示截断。这个时候,可以使用 text-overflow 属性。 text-overflow: ellipsis; white-space: nowrap; overflow: hidde…

    css 2023年6月9日
    00
  • CSS表格样式:圆角,隔行,变色的具体实现

    实现CSS表格样式包括圆角、隔行、以及变色的步骤如下: 1. 圆角表格样式 使用CSS的border-radius属性可以实现表格的圆角效果。 示例代码如下: table { border-collapse: collapse; } table, td, th { border: 1px solid #999; border-radius: 6px; pad…

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