css折叠树形菜单教程

发布时间：2025-01-27 以下文章来源于网友投稿，内容仅供参考！

在网页设计中，折叠树形菜单是非常常见的一种导航形式。通过CSS能够很轻松地实现这种效果。下面就给大家介绍如何利用CSS折叠树形菜单。
首先，在HTML中需要创建一个基本的菜单结构，比如下面这样：

<div ><ul><li>菜单1</li><li>菜单2</li><li>菜单3<ul><li>子菜单1</li><li>子菜单2</li><li>子菜单3<ul><li>子子菜单1</li><li>子子菜单2</li></ul></li></ul></li><li>菜单4</li></ul></div>

然后，在CSS中设置菜单的基本样式，比如字体、颜色等等，代码如下：

.menu li {list-style: none; position: relative;}.menu a {display: block;padding: 10px;color: #333;text-decoration: none;font-size: 14px;}.menu ul ul {position: absolute;top: 0;left: 100%;z-index: 999; opacity: 0; visibility: hidden;transition: opacity 0.2s ease-in-out;background-color: #fff;box-shadow: 0 2px 2px rgba(0,0,0,0.1);}.menu ul ul li {float: none;width: 100%;position: relative;}.menu ul ul a {padding: 5px 10px;font-size: 12px;}.menu ul li:hover > ul {opacity: 1;visibility: visible;}

最后，加入折叠效果的代码，即点击菜单项时呈现子菜单：

.menu input[type="checkbox"] {position: absolute;visibility: hidden;}.menu input[type="checkbox"] ~ ul {max-height: 0;transition: max-height .25s ease-in-out;}.menu input[type="checkbox"]:checked ~ ul {max-height: 1000px;transition: max-height .5s ease-in-out;}

以上就是创建折叠树形菜单的全部代码。在实际使用时，可以根据实际情况进行调整。使用CSS创建折叠树形菜单，其实就是利用了CSS的各种样式属性及其操作方式，对HTML中的结构进行布局，达到了设计的效果。