您所在的位置:小祥子 » 编程 » CSS » 正文

使用checkbox实现纯CSS下拉框

时间:2015-08-17 编辑:real_燎原之火 来源:CnBlogs

在这个例子中,我们会看到一个纯CSS制作的下拉框。主要是要用到了HTML元素的checkbox 和CSS3选择器,并没有用到JavaScript。例子如下:

  • 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

关键词:CSS