Home > Article > Web Front-end > 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
Implementation process:
<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
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