Using CSS3 checked pseudo class to realize the hidden display of OL

Web page Production WEBJX article introduction: Pure CSS To create a collapsible tree menu.

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.

Directly above:

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" > Subordinate </label>
	    <input id= "subsubfolder2" type= "checkbox"
		/>
	    < ol>
	        <li class= "file" ><a> Unlimited level </a></li>
		<li class= "file" ><a> infinite level </a></li>
		<li class= "File" ><a> Unlimited class </a></li>
		<li class= "File" > <a> infinite level </a></li>
		<li class= "file" ><a> Unlimited level </a></li>
		<li class= "File" ><a> Unlimited 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" > Subordinate </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: Block
		;

This is the style that when Inoput owns the checked.

View Demo

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

(Want to let ie6+ browser support also can drip, but need to add JS to simulate CSS3 properties. There are a lot of cows abroad have written 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.