实现一个可折叠的树状菜单,通常可以用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技术站