checkbox及css实现点击下拉菜单
面试遇到的问题。用checkbox中的:checked伪类选择器实现。
通过label标签来触发checkbox的unchecked 和checked两种状态；用css普通同胞选择器 ~。另外补充一点，相邻同胞选择器是 +。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.column{
display: none;
}
input[type='checkbox']{
display: none;
}
input[type="checkbox"]:checked ~ ul{
display: block;
}
</style>
</head>
<body>
<div class="container">
<input type="checkbox" id="check"/>
<label for="check">标题栏</label>
<ul class="column">
<li>栏目1</li>
<li>栏目2</li>
<li>栏目3</li>
<li>栏目4</li>
<li>栏目5</li>
</ul>
</div>
</body>
</html>
checkbox及css实现点击下拉菜单的更多相关文章
- 纯CSS实现二级导航下拉菜单--css的简单应用
思想:使用css的display属性控制二级下拉菜单的显示与否.当鼠标移动到一级导航菜单的li标签时,显示二级导航菜单的ul标签.由于实现起来比较简单,所以在这里直接给出了参考代码. 1.纯CSS二级 ...
- CSS技巧分享：如何用css制作横排二级下拉菜单
原文:CSS技巧分享:如何用css制作横排二级下拉菜单 导航菜单是每个网站所必备的功能,也是每个学习制作网站的朋友所必须接触的,如何用css样式制作一个简单漂亮的二级下拉菜单呢,下来小编就一步一步教大 ...
- 何使用CSS写出一个下拉菜单。
导航菜单是每个网站所必备的功能,也是每个学习制作网站的朋友所必须接触的,如何用css样式制作一个简单漂亮的二级下拉菜单呢? 下面为大家分享一下我的经验 方法步骤: 第一步 : 首页我们打开Subli ...
- Css之导航栏下拉菜单
Css: /*下拉菜单学习-2017.12.17 20:17 added by ldb*/ ul{ list-style-type:none; margin:; padding:; overflow: ...
- 纯css和js版下拉菜单
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- css用hover制作下拉菜单
首先我们的需求就是 制作一个鼠标移动到某个区域就会有下拉菜单的弹出,这样会有更多的子类内容,示例代码如下: <!DOCTYPE html> <html lang="en&q ...
- css实现hover显示下拉菜单
原理比较简单,首先先隐藏下拉菜单即display:none,当鼠标hover后,设置display:block. <style> .menu-title { postion: relati ...
- 怎样用css写出一个下拉菜单
<style> 2 /* css*/ 3 #body{ 4 float: left; 5 } 6 #xialakuang{ 7 background-color:#f9f9f9; 8 bo ...
- 一个用css写出来的下拉菜单
1 <style> 2 /* css*/ 3 #body{ 4 float: left; 5 } 6 #xialakuang{ 7 background-color:#f9f9f9; 8 ...
随机推荐
- 解决Bat脚本中包含中文，运行乱码
bat文件右键用“编辑” 打开, 另存为时,UTF-8保存为ANSI 格式.即可解决运行时乱码问题.
- LeetCode_Two Sum
Given an array of integers, find two numbers such that they add up to a specific target number. The ...
- Python的subprocess模块（一）
原文连接:http://www.cnblogs.com/wang-yc/p/5624880.html 一.简介 subprocess最早在2.4版本引入.用来生成子进程,并可以通过管道连接他们的输入/ ...
- 使用selenium找出外卖点餐次数最多的10个顾客
大锅在做外卖,给我说能否统计出这半年点餐次数最多的10个顾客,我不知道APP本身是否有这个功能,想了下最近用selenium较多,就用selenium尝试下吧. 1 定义一个类,这里先描述需要的属性和 ...
- Java 运算符及优先级
运算符 分割符: , ; [] () 算数运算符: + - * / % ++ -- 关系运算符: > < >= <= == != 逻辑运算符: ! & | ^ & ...
- python学习笔记(十)完善数据库操作
1.cur = coon.cursor(cursor=pymysql.cursors.DictCursor)的用法 建立游标,指定cursor类型返回的是字典,如果不指定类型,返回的是元组类型数据 i ...
- Java 语言中 Enum 类型的使用介绍【转载】
简介:本文主要介绍了 Java 语言中枚举类型,以及如何定制 Enum 类型的定义,如何正确使用 Enum 类型. From:http://www.ibm.com/developerworks/cn/ ...
- java中使用MD5对密码进行加密
import org.springframework.security.authentication.encoding.MessageDigestPasswordEncoder; import org ...
- vim文本编辑操作
文本选择操作 为了方便地选取文本块,Vim编辑器引入了可视模式(Visual Mode).要选取一段文本块,操作步骤如下: ▶ 将光标移动到要复制文本块的开始处.要注意的是 ...
- ZenCart分类数量打折Category Quantity Discount插件
附件:http://files.cnblogs.com/lzj87980239/Category_Quantity_Discount.rar 效果图后台1.将update.sql导入到数据库 2.将Y ...