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

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