With the release of CSS3, foreign research is in full swing, but there are many people in the country 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 the following will share a collapsible tree-like menu that you can create with CSS3.
Tree-like menu I believe we are not unfamiliar, we generally use css+js way to achieve. And the arrival of CSS3, let us get rid of the shackles of JS, direct use of CSS3 "selector" can be achieved collapsible tree menu.
The whole code is a lot, do not step-by-step, just put I think important place to say it.
HTML code:
<li>
<label for= "Subsubfolder1" > Subordinates </label>
<input id= "Subsubfolder1" type= "checkbox"/>
<ol>
<li class= "file" ><a> subordinate </a></li>
<li>
<label for= "Subsubfolder2" > Subordinates </label>
<input id= "Subsubfolder2" type= "checkbox"/>
<ol>
<li class= "file" ><a> infinite level </a></li>
<li class= "file" ><a> infinite level </a></li>
<li class= "file" ><a> infinite level </a></li>
<li class= "file" ><a> infinite level </a></li>
<li class= "file" ><a> infinite level </a></li>
<li class= "file" ><a> infinite level </a></li>
</ol>
</li>
</ol>
</li>
The idea of implementation is to use the checked value of the checkbox to determine whether the sub-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 execution of your CSS. (Very powerful, isn't it?) With the CSS3 we will write a lot less js Oh!)
<label for= "Subsubfolder1" > Subordinates </label>
<input id= "Subsubfolder1" type= "checkbox"/>
When the checkbox has the checked value of the time to let the ol reality out, to achieve the function we want.
Now let's 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 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 about the style that Inoput has when it has a checked.
Use IE9 the following browsing will not be seen, please use non-IE browser.
(It is also possible to have ie6+ browser support, but JS is required to emulate the CSS3 attribute.) A lot of people abroad have written to let ie6+ browser support some CSS3 JS, such as pie. )
Summarize:
Overall, the realization of the idea is very simple, mainly using CSS3 checked pseudo-class to realize the hidden display of ol. Unfortunately, IE browser does not support CSS3, but we can not because IE does not support the CSS3 to abandon the study. In foreign CSS3 and HTML5 are front-end very hot topic, they research things far more than we, but the domestic really to try is still not much, for a front-end developer is a very sad thing. I think that the CSS3 should arouse our attention, can't let us lose at the starting line. Let us all together to promote the development of CSS3.
