Create a collapsible tree menu with pure CSS

with the release of CSS3, foreign research is in full swing, but in the country there are many people holding IE does not support the idea of CSS3, always indifferent refused to learn. But history tells us that good things are bound to prevail, and that CSS3 will eventually replace CSS2, and share with you a collapsible tree menu built with CSS3.

Tree Menu I believe that we are not unfamiliar, we generally use the css+js way to achieve. And the arrival of CSS3, let us get rid of the shackles of JS, directly using the CSS3 "selector" can be realized collapsible tree menu.

The whole code is a lot, do not step by step, but I think the important point to say it.

HTML code:

<li>
  <label for= "Subsubfolder1" > Subordinate </label>
  <input id= "Subsubfolder1" type= "checkbox"/>
  <ol>
<li class= "file" ><a> subordinate </a></li>
  <li>
  <label for= "Subsubfolder2" > Downlevel </label>
  <input id= "Subsubfolder2" type= "checkbox"/>
  <ol>
<li class= "file" ><a> unlimited </a></li>
  <li class= "file" ><a> infinite level </a></li>
  <li class= "file" ><a> infinite level </a></li
  <li class= "file" ><a> Unlimited level </a></li>
  <li class= "file" ><a> Infinite-level </a></li>
  <li class= "file" ><a> infinite-level </a></li>
  </ol>
  </LI>
  </OL>
  </li>

The realization of the idea is to use the checked value of the checkbox to determine whether the subordinate column is expanded, the CSS3 selector provides: checked this pseudo class, this pseudo class provides us, when the element has checked this value when the implementation of your CSS. (Very strong, yes.) With CSS3 we will write a lot less js Oh!

<label for= "Subsubfolder1" > Subordinates </label>
<input id= "Subsubfolder1" type= "checkbox"/>

When the checkbox has checked value, let ol reality out, to achieve the function we want.

Next look at the CSS code:

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:-14px!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:-22px 0 0-44px;padding:27px 0 0 80px;height:auto;display: Block
}
input:checked + ol > Li {
Height:auto;
}

This piece of code is the center of the tree menu:

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:b Lock
}

This is the style that when Inoput owns the checked.

Use IE9 The following browsing is not necessary to see, please use non IE browser.

(Want to let ie6+ browser support is also OK, but need to add JS to simulate CSS3 properties.) Many foreign cattle have written to let ie6+ browser support part of the CSS3 JS, such as pie. )

Summarize:

Overall, the realization of the idea is very simple, mainly the use of CSS3 checked pseudo class to achieve the hidden display of ol. However, unfortunately, IE browser does not support CSS3, but we can not because IE does not support and give up the research of CSS3. In foreign CSS3 and HTML5 are very hot topic, they study things far more than we, but the domestic really to try or not much, for a front-end developers is a very sad thing. I think CSS3 should arouse our attention, can't let us lose at the starting line. Let us all work together to promote the development of CSS3.