原码笔记

原码笔记

纯CSS实现可折叠树状菜单

小诸哥 0

这篇文章主要介绍了纯CSS实现可折叠树状菜单,不用js让你体会到css的强大,需要的朋友可以参考下

1:Html代码

  1. <li>
  2. <label for="subsubfolder1">下级</label>
  3. <input id="subsubfolder1" type="checkbox" />
  4. <ol>
  5. <li class="file"><a>下级</a></li>
  6. <li>
  7. <label for="subsubfolder2">下级</label>
  8. <input id="subsubfolder2" type="checkbox" />
  9. <ol>
  10. <li class="file"><a>无限级</a></li>
  11. <li class="file"><a>无限级</a></li>
  12. <li class="file"><a>无限级</a></li>
  13. <li class="file"><a>无限级</a></li>
  14. <li class="file"><a>无限级</a></li>
  15. <li class="file"><a>无限级</a></li>
  16. </ol>
  17. </li>
  18. </ol>
  19. </li>

实现的思路是运用checkbox的checked值来判断下级栏目是否展开,css3的选择器中提供了:checked 这个伪类,这个伪类提供我们,当元素拥有checked这个值的时候就执行你的CSS。(很强大是吧。有了CSS3我们会少写很多js哦!)

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

当checkbox的拥有checked值的时候就就让OL现实出来,达到我们想要的功能。

接下来看看CSS代码吧:

  1. li input {
  2. position:absolute;left:0;margin-left:0;opacity:0;z-index:2;cursor:pointer;height:1em;width:1em;top:0;
  3. }
  4. input + ol {
  5. display:none;
  6. }
  7. input + ol > li {
  8. height:0;overflow:hidden;margin-left:-14px!important;padding-left:1px;
  9. }
  10. li label {
  11. cursor:pointer;display:block;padding-left:17px;background:url(toggle-small-expand.png) no-repeat 0px 1px;
  12. }
  13. input:checked + ol {
  14. background:url(toggle-small.png) 44px 5px no-repeat;margin:-22px 0 0 -44px;padding:27px 0 0 80px;height:auto;display:block;
  15. }
  16. input:checked + ol > li {
  17. height:auto;
  18. }

这段代码是树状菜单的中心:

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

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

使用IE9以下浏览就不用看了,请使用非IE浏览器。(想让IE6+浏览器支持也是可以滴,但是需要加JS来模拟css3属性。国外有很多牛人都写了让IE6+浏览器支持部分CSS3的JS,例如PIE)

总结:

总体来说,实现思路很简单,主要是利用CSS3的 checked 伪类来实现OL的隐藏显示。不过遗憾的是IE游览器不支持CSS3,但我们不能因为IE的不支持而放弃对CSS3的研究。在国外CSS3和HTML5都是前端很热门的话题,他们研究的东西远远超过我们,但国内真正去尝试的还是不多,对于一个前端开发人员来说是一件很可悲的事。我认为CSS3应该引起我们的重视,不能让我们输在起跑线。让我们大家一起来推动CSS3的发展吧。

2:实例源代码

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2. <html>
  3. <head>
  4. <title>纯CSS可折叠树状菜单</title>
  5. <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
  6. <style type="text/css">
  7.      body, ul, li{margin: 0;padding: 0;}
  8.      body { background-color:#e4e9f1; color:#002446; margin: 0; }
  9.      input, select, textarea, th, td { font-size: 1em; }
  10.      ol.tree {padding: 0 0 0 30px;width: 300px;}
  11.      li {position: relative;margin-left: -15px;list-style: none;}
  12.      li.file{margin-left: -18px !important;}
  13.      li.file a{background: url(document.png) 0 0 no-repeat;color: #002446;padding-left: 21px;text-decoration:none;display: block;}
  14.      li input{position: absolute;left: 0;margin-left: 0;opacity: 0;z-index: 2;cursor: pointer;height: 1em;width:1em;top: 0;}
  15.      input + ol{display: none;}
  16.      input + ol > li { height: 0; overflow: hidden; margin-left: -14px !important; padding-left: 1px; }
  17.      li label {cursor: pointer;display: block;padding-left: 17px;background: url(toggle-small-expand.png) no-repeat 0px 1px;}
  18.      input:checked + ol {background: url(toggle-small.png) 44px 5px no-repeat;margin: -22px 0 0 -44px;padding:27px 0 0 80px;height: auto;display: block;}
  19.      input:checked + ol > li { height: auto;}
  20.  
  21. </style>
  22. </head>
  23. <body>
  24.     
  25.      <ol class="tree">
  26.          <li>
  27.              <label for="folder1">水产养殖</label> <input type="checkbox" id="folder1" checked="checked" />
  28.              <ol>
  29.  
  30.                  <li class="file"><a href="#">实时数据</a></li>
  31.                  <li>
  32.                      <label for="subfolder1">实时数据</label> <input type="checkbox" id="subfolder1" />
  33.      <ol>
  34.                      <li class="file"><a href="">下级</a></li>
  35.                      <li>
  36.                      <label for="subsubfolder1">下级</label> <input type="checkbox" id="subsubfolder1" />
  37.                      <ol>
  38.  
  39.                  <li class="file"><a href="">下级</a></li>
  40.                      <li>
  41.                      <label for="subsubfolder2">下级</label> <input type="checkbox" id="subsubfolder2" />
  42.                      <ol>
  43.                      <li class="file"><a href="">无限级</a></li>
  44.                      <li class="file"><a href="">无限级</a></li>
  45.                      <li class="file"><a href="">无限级</a></li>
  46.  
  47.                      <li class="file"><a href="">无限级</a></li>
  48.                      <li class="file"><a href="">无限级</a></li>
  49.                      <li class="file"><a href="">无限级</a></li>
  50.                      </ol>
  51.                      </li>
  52.                      </ol>
  53.                      </li>
  54.  
  55.                      <li class="file"><a href="">下级</a></li>
  56.                      <li class="file"><a href="">下级</a></li>
  57.                      <li class="file"><a href="">下级</a></li>
  58.                      <li class="file"><a href="">下级</a></li>
  59.                      </ol>
  60.                  </li>
  61.              </ol>
  62.  
  63.          </li>
  64.          <li>
  65.              <label for="folder2">水产养殖</label> <input type="checkbox" id="folder2" />
  66.              <ol>
  67.                  <li class="file"><a href="">实时数据</a></li>
  68.                  <li>
  69.                      <label for="subfolder2">实时数据</label> <input type="checkbox" id="subfolder2" />
  70.                      <ol>
  71.  
  72.                      <li class="file"><a href="">下级</a></li>
  73.                      <li class="file"><a href=&quot;">下级</a></li>
  74.                      <li class="file"><a href="">下级</a></li>
  75.                      <li class="file"><a href="">下级</a></li>
  76.                      <li class="file"><a href="">下级</a></li>
  77.                      <li class="file"><a href="">下级</a></li>
  78.  
  79.                      </ol>
  80.                  </li>
  81.              </ol>
  82.          </li>
  83.      </ol>
  84.     
  85. </body>
  86. </html>

 3:效果图

 

标签: CSS 实现