使用checkbox實現純CSS下拉框

在這個例子中，我們會看到一個純CSS制作的下拉框。主要是要用到了HTML元素的checkbox 和CSS3選擇器，並沒有用到JavaScript。例子如下：

 

Click to Expand

• Link One
• Link Two
• Link Three
• Link Four

實現過程：

 HTML結構

<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作為一個容器包裹所有標簽

#input[type=checked]標簽用於標識checked 和unchecked 屬性，元素是隱藏的

#label標簽用於觸發下拉菜單

#ul為菜單列表

 添加Checkbox Hack

我們只需要checkbox元素的偽類選擇器:checked就可以檢測到元素的checked狀態，通過label標簽來觸發checkbox的unchecked 和checked 狀態。首先把checkbox隱藏

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

同時，我們也把ul默認隱藏掉，當觸發菜單時才會顯示。

ul{
    display: none;
}

通過結合:checked選擇器 和相鄰同胞選擇器~ 來控制對應的菜單的顯示狀態。

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

當checkbox為選中狀態時，下拉菜單就顯示，否則隱藏。

 

demo:

demo.zip