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 ...
随机推荐
- CF#301 B：School Marks(贪心)
B:School Marks 有n个测试,已经完成了k个,每个测试得分为a[i],接下来的分数不知道,让我们求出任何一个满足题意的即可,满足题意就是n个测试的得分总和<=x, 中位数>=y ...
- python基础知识体系
一.编程风格.语法要求.变量格式.基本数据类型.运算.流程控制.用户交互 二.字符串.列表.元组.字典.迭代器和生成器 三.函数.内置函数.文件操作.异常处理.模块.常用模块.lambda.yield ...
- 006-Shell printf 命令
一.概述 printf 命令模仿 C 程序库(library)里的 printf() 程序. printf 由 POSIX 标准所定义,因此使用 printf 的脚本比使用 echo 移植性好. pr ...
- sipp模拟freepbx分机测试(SIP协议调试)
1.sipp的安装 1) 在centos 7.2下安装 yum install make gcc gcc-c++ ncurses ncurses.x86_64 ncurses-devel ncurse ...
- apache-storm-1.0.3安装部署
CentOS7-1 CentOS7-2 CentOS7-3 CentOS7-4 nimbus supervisor supervisor supervisor core(UI) 1.首 ...
- POJ1269:Intersecting Lines（判断两条直线的关系）
题目:POJ1269 题意:给你两条直线的坐标,判断两条直线是否共线.平行.相交,若相交,求出交点. 思路:直线相交判断.如果相交求交点. 首先先判断是否共线,之后判断是否平行,如果都不是就直接求交点 ...
- JMS术语
Provider(MessageProvider):生产者Consumer(MessageConsumer):消费者PTP:Point to Point,即点对点的消息模型Pub/Sub:Publis ...
- Linux文件权限分析
一.用户组概念 在linux系统中,每个用户必属于一个组,不能独立于组之外.每个文件都有所有者,所在组和其他组这三个概念. (1)所有者:一般为文件的创建者,谁创建了该文件,就成为了该文件的所有者, ...
- 斯坦福第二课：单变量线性回归(Linear Regression with One Variable)
二.单变量线性回归(Linear Regression with One Variable) 2.1 模型表示 2.2 代价函数 2.3 代价函数的直观理解 I 2.4 代价函数的直观理解 I ...
- mysql在线手册汇总
1. MySQL官网 http://www.mysql.com/ • Reference Manual ▶ MySQL 5.0 Reference Manual:http://dev.mysql.co ...