An introduction to how to create a collapsible tree menu using pure CSS

With the release of CSS3, foreign research is in full swing, but there are still many people in China who hold the idea that IE does not support CSS3 and remain indifferent and refuse to learn. But history tells us that good things will prevail, and CSS3 will eventually replace CSS2. Let’s share with you a collapsible tree menu created with CSS3.

I believe everyone is familiar with the tree menu. We usually use css+JS to implement it. The arrival of CSS3 allows us to get rid of the constraints of JS and directly use the "selector" of CSS3 to realize a collapsible tree menu.

There is a lot of overall code, so I won’t go into it sentence by sentence. I will only mention what I think is important.

Html code:

for="subsubfolder1">subordinate

1. file">subordinate< ;/li>
   
2. 
   subordinate
   
   
   
   
   1. Unlimited
   
   
   2. Infinite level
   
   
   3. Infinite level
   
   
   4. Unlimited level
   
   
   5. Infinite level
   > ;
   
   6. Unlimited
   
   
   
   

< ;/ol>

The idea of ​​implementation is to use the checked value of checkbox to determine whether the subordinate column is expanded. The CSS3 selector provides: checked this pseudo-class, this pseudo-class provides us with executing your CSS when the element has the checked value. (Very powerful, right? With CSS3 we will write a lot less JS!)

subordinate


When the checkbox has a checked value, the OL will be realized to achieve the function we want.

Let’s look at the CSS code next:

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: block;
}

This is the style owned by the OL of the same level after inoput has checked. .

You don’t have to read it if you are using IE9 or below. Please use a non-IE browser.

(You can also want IE6+ browser to support it, but you need to add JS to simulate css3 attributes. There are many talented people abroad who have written JS to let IE6+ browser support part of CSS3, such as PIE.)

Summary:

Generally speaking, the implementation idea is very simple, mainly using the checked pseudo-class of CSS3 to realize the hidden display of OL. Unfortunately, the IE browser does not support CSS3, but we cannot give up research on CSS3 just because IE does not support it. CSS3 and HTML5 are both very hot topics in the front-end abroad. Their research far exceeds ours, but there are still not many people who actually try it in China. It is very sad for a front-end developer. thing. I think CSS3 should attract our attention and not let us lose at the starting line. Let us all work together to promote the development of CSS3.

The above is the detailed content of An introduction to how to create a collapsible tree menu using pure CSS. For more information, please follow other related articles on the PHP Chinese website!