zoukankan      html  css  js  c++  java
  • 使用checkbox实现纯CSS下拉框

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

    实现过程:

     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

  • 相关阅读:
    Codeforces Round #687 A. Prison Break
    最小生成树自用笔记(Kruskal算法+prim算法)
    Codeforces Round #686 (Div. 3)(A->D)(模拟,vector,数学)
    Acwing 852. spfa判断负环
    Linux内核分析_课程学习总结报告
    结合中断上下文切换和进程上下文切换分析Linux内核的一般执行过程
    深入理解系统调用
    基于mykernel 2.0编写一个操作系统内核
    何评测一个软件工程师的计算机网络知识水平与网络编程技能水平?——参考试题
    TCP三次握手Linux源码解析
  • 原文地址:https://www.cnblogs.com/GeniusLyzh/p/4735954.html
Copyright © 2011-2022 走看看