简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > Web Front-end > CSS Tutorial > body text

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

高洛峰
Release： 2017-03-17 13:00:56
Original
1632 people have browsed it

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:





    1. file">subordinate< ;/li>




      1. Unlimited

      2. < a>Infinite level

      3. Infinite level

      4. Unlimited level

      5. Infinite level
      6. Unlimited



      3. < ;/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!)




      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!

    • Related labels：
    css
    source：php.cn
    Previous article：Summary of using CSS3 media queries Next article：Use css to achieve fixed width on the left (right) side, and an introduction to the adaptive method of width on the right (left) side
    Statement of this Website
    The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
    Latest Articles by Author
    Latest Issues
    Where is the courseware about CSS mind mapping? Courseware
    From 2024-04-16 10:10:18
    0
    0
    1335
    The page suddenly cannot pull css or bootstrap So I'm developing a page, I did part of it yesterday and it worked great, and today I cont...
    From 2024-04-06 21:58:04
    0
    1
    800
    Dynamically modify inline CSS styles in Javafx I'm trying to change the background image of a pane when the application is maximized. My ...
    From 2024-04-06 20:57:16
    0
    1
    487
    How to make floated elements stack vertically instead of horizontally in CSS? I'm trying to make a webpage with two columns, with main content on one side and additiona...
    From 2024-04-06 20:45:26
    0
    2
    386
    Is there a way to force the text in the flexbox to be vertically centered, no matter what other CSS code we have? I have the following CSS code that is part of a larger CSS code used in a website I'm deve...
    From 2024-04-06 20:41:51
    0
    1
    518
    Related Topics
    More>
    Popular Recommendations
    Popular Tutorials
    More>
    Related Tutorials
    Popular Recommendations
    Latest courses
    Latest Downloads
    More>
    Web Effects
    Website Source Code
    Website Materials
    Front End Template
    About us Disclaimer Sitemap
    php.cn：Public welfare online PHP training，Help PHP learners grow quickly！