WEB开发网
开发学院网页设计DivCss 学用纯CSS打造可折叠树状菜单 阅读

学用纯CSS打造可折叠树状菜单

 2010-10-10 12:22:44 来源:WEB开发网   
核心提示:随着CSS3的发布,国外研究正如火如荼,学用纯CSS打造可折叠树状菜单,但在国内还有很多人抱着IE不支持CSS3的想法,始终无动于衷不肯去学习,这个伪类提供我们,当元素拥有checked这个值的时候就执行你的CSS,但是历史告诉我们,好的东西必将盛行

随着CSS3的发布,国外研究正如火如荼,但在国内还有很多人抱着IE不支持CSS3的想法,始终无动于衷不肯去学习。但是历史告诉我们,好的东西必将盛行,CSS3也终将也会替代CSS2,下面就和大家分享一个用CSS3打造的可折叠树状菜单。

树状菜单相信大家都不会陌生,我们一般用css+JS 的方式来实现。而css3的到来,让我们摆脱JS的束缚,直接运用CSS3的“选择器“就能实现可折叠树状菜单。

整体的代码很多,就不逐句逐句讲了,只把我觉得重要的地方提出来说说吧。

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哦!)

1 2  下一页

Tags:学用 CSS 打造

编辑录入:爽爽 [复制链接] [打 印]
赞助商链接