Home  >  Article  >  Web Front-end  >  Use checkbox to implement pure CSS drop-down box_html/css_WEB-ITnose

Use checkbox to implement pure CSS drop-down box_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 11:38:411042browse

In this example, we will see a drop-down box made with pure CSS. It mainly uses the checkbox and CSS3 selector of HTML elements, and does not use JavaScript. Examples are as follows:

Click to Expand

  • Link One
  • Link Two
  • Link Three
  • Link Four
  • Implementation process:

    HTML structure

    <div class="dropdown">    <input type="checkbox" id="checkbox_toggle">    <label for="checkbox_toggle">Click to Expand</label>    <ul>        <li><a href="#">Link One</a></li>        <li><a href="#">Link Two</a></li>        <li><a href="#">Link Three</a></li>        <li><a href="#">Link Four</a></li>    </ul></div>

    #div acts as a container to wrap all tags

    #input[type=checked] tag is used to identify checked and unchecked attributes, and the element is hidden

    #label tag is used to trigger the drop-down menu

    #ul is the menu list

    Add Checkbox Hack

    We only need the pseudo-class selector of the checkbox element: checked to detect the checked status of the element, and trigger the unchecked and checked status of the checkbox through the label tag. First, hide the checkbox

    input[type=checkbox]{    display: none;}

    At the same time, we also hide the ul by default, and it will only be displayed when the menu is triggered.

    ul{    display: none;}

    Control the display state of the corresponding menu by combining the :checked selector and the adjacent sibling selector~.

    input[type=checkbox]:checked ~ ul {    display: block}

    When the checkbox is selected, the drop-down menu is displayed, otherwise it is hidden.

    demo:

    demo.zip

    Statement:
    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