纯CSS完成可折叠树状菜单

2021-01-20 18:09 jianzhan

1：Html编码

<li>
<label for="subsubfolder1">下级</label>
<input id="subsubfolder1" type="checkbox" />
<ol>
<li class="file"><a>下级</a></li>
<li>
<label for="subsubfolder2">下级</label>
<input id="subsubfolder2" type="checkbox" />
<ol>
<li class="file"><a>无尽级</a></li>
<li class="file"><a>无尽级</a></li>
<li class="file"><a>无尽级</a></li>
<li class="file"><a>无尽级</a></li>
<li class="file"><a>无尽级</a></li>
<li class="file"><a>无尽级</a></li>
</ol>
</li>
</ol>
</li>

完成的思路是应用checkbox的checked值来分辨下级栏目是不是进行，CSS3的挑选器中出示了:checked 这个伪类，这个伪类出示大家，当元素有着checked这个值的情况下就实行你的CSS。（很强劲是吧。有了CSS3大家会少写许多JS哦！）

<label for="subsubfolder1">下级</label><input id="subsubfolder1" type="checkbox" />

当checkbox的有着checked值的情况下就就让OL实际出来，做到大家要想的作用。

接下看来看CSS编码吧：

li input {
position:absolute;left:0;margin-left:0;opacity:0;z-index:2;cursor:pointer;height:1em;width:1em;top:0;
}
input + ol {
display:none;
}
input + ol > li {
height:0;overflow:hidden;margin-left:⑴4px!important;padding-left:1px;
}
li label {
cursor:pointer;display:block;padding-left:17px;background:url(toggle-small-expand.png) no-repeat 0px 1px;
}
input:checked + ol {
background:url(toggle-small.png) 44px 5px no-repeat;margin:⑵2px 0 0 ⑷4px;padding:27px 0 0 80px;height:auto;display:block;
}
input:checked + ol > li {
height:auto;
}

这段编码是树状菜单的管理中心：

input:checked + ol { 
background: url(toggle-small.png) 44px 5px no-repeat;margin: ⑵2px 0 0 ⑷4px;padding:27px 0 0 80px;height: auto;display: block; 
}

这个是讲当inoput 有着了checked后它平级的OL有着的款式。

应用IE9下列访问就无需看了，请应用非IE访问器。（想让IE6+访问器适用也是能够滴，可是必须加JS来仿真模拟css3特性。海外有许多牛人都写了让IE6+访问器适用一部分CSS3的JS，比如PIE）

总结：

整体来讲，完成思路很简易，关键是运用CSS3的 checked 伪类来完成OL的掩藏显示信息。但是遗憾的是IE游玩器不适用CSS3，但大家不可以由于IE的不适用而舍弃对CSS3的科学研究。在海外CSS3和HTML5全是前端开发很热门的话题，她们科学研究的物品远远超出大家，但中国真实去尝试的還是很少，针对1个前端开发开发设计人员来讲是1件很悲哀的事。我觉得CSS3应当引发大家的高度重视，不可以让大家输在起跑线。让大家大伙儿1起来促进CSS3的发展趋势吧。

2：案例源码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>纯CSS可折叠树状菜单</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf⑻">
<style type="text/css">
    body, ul, li{margin: 0;padding: 0;}
    body { background-color:#e4e9f1; color:#002446; margin: 0; }
    input, select, textarea, th, td { font-size: 1em; }
    ol.tree {padding: 0 0 0 30px;width: 300px;}
    li {position: relative;margin-left: ⑴5px;list-style: none;}
    li.file{margin-left: ⑴8px !important;}
    li.file a{background: url(document.png) 0 0 no-repeat;color: #002446;padding-left: 21px;text-decoration:none;display: block;}
    li input{position: absolute;left: 0;margin-left: 0;opacity: 0;z-index: 2;cursor: pointer;height: 1em;width:1em;top: 0;}
    input + ol{display: none;}
    input + ol > li { height: 0; overflow: hidden; margin-left: ⑴4px !important; padding-left: 1px; }
    li label {cursor: pointer;display: block;padding-left: 17px;background: url(toggle-small-expand.png) no-repeat 0px 1px;}
    input:checked + ol {background: url(toggle-small.png) 44px 5px no-repeat;margin: ⑵2px 0 0 ⑷4px;padding:27px 0 0 80px;height: auto;display: block;}
    input:checked + ol > li { height: auto;}

</style>
</head>
<body>
    
    <ol class="tree">
        <li>
            <label for="folder1">水产品饲养</label> <input type="checkbox"  id="folder1" checked="checked" /> 
            <ol>

                <li class="file"><a href="#">即时数据信息</a></li>
                <li>
                    <label for="subfolder1">即时数据信息</label> <input type="checkbox" id="subfolder1" /> 
                    <ol>
                        <li class="file"><a href="">下级</a></li>
                        <li>
                            <label for="subsubfolder1">下级</label> <input type="checkbox" id="subsubfolder1" /> 
                            <ol>

                                <li class="file"><a href="">下级</a></li>
                                <li>
                                    <label for="subsubfolder2">下级</label> <input type="checkbox" id="subsubfolder2" /> 
                                    <ol>
                                        <li class="file"><a href="">无尽级</a></li>
                                        <li class="file"><a href="">无尽级</a></li>
                                        <li class="file"><a href="">无尽级</a></li>

                                        <li class="file"><a href="">无尽级</a></li>
                                        <li class="file"><a href="">无尽级</a></li>
                                        <li class="file"><a href="">无尽级</a></li>
                                    </ol>
                                </li>
                            </ol>
                        </li>

                        <li class="file"><a href="">下级</a></li>
                        <li class="file"><a href="">下级</a></li>
                        <li class="file"><a href="">下级</a></li>
                        <li class="file"><a href="">下级</a></li>
                    </ol>
                </li>
            </ol>

        </li>
        <li>
            <label for="folder2">水产品饲养</label> <input type="checkbox" id="folder2" /> 
            <ol>
                <li class="file"><a href="">即时数据信息</a></li>
                <li>
                    <label for="subfolder2">即时数据信息</label> <input type="checkbox" id="subfolder2" /> 
                    <ol>

                        <li class="file"><a href="">下级</a></li>
                        <li class="file"><a href="">下级</a></li>
                        <li class="file"><a href="">下级</a></li>
                        <li class="file"><a href="">下级</a></li>
                        <li class="file"><a href="">下级</a></li>
                        <li class="file"><a href="">下级</a></li>

                    </ol>
                </li>
            </ol>
        </li>
    </ol>
    
</body>
</html>

 3：实际效果图

 

为您推荐