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 ...
随机推荐
- Guess Your Way Out! II---cf 558D （区间覆盖，c++STL map 的使用）
题目链接:http://codeforces.com/contest/558/problem/D 题意就是有一个二叉树高度为 h ,人站在根节点上,现在要走出去,出口在叶子节点上,有 q 条信息,每条 ...
- return的结果
return只会返回第一个,接下去的不会再返回 所以return放在for里面用的话,即使循环好几次,但是除了循环的第一个,后面循环出来的结果都作废
- POJO，简单的Java对象
POJO = "Plain Ordinary Java Object",简单的Java对象,是为了避免和EJB混淆所创造的简称,是MartinFowler等发明的一个术语,用来表示 ...
- 20165324 实验二《Java面向对象程序设计》实验报告
20165324 实验二<Java面向对象程序设计>实验报告 一.实验报告封面 课程:Java程序设计 班级:1653班 姓名:何春江 学号:20165324 指导教师:娄嘉鹏 实验日期: ...
- Java基础知识陷阱(七)
本文发表于本人博客. 上次说了下HashSet和HashMap之间的关系,其中HashMap这个内部有这么一句: static final float DEFAULT_LOAD_FACTOR = 0. ...
- SQL Server 使用 Hierarchyid 操作层次结构数据
层次结构数据定义为一组通过层次结构关系互相关联的数据项. 在层次结构关系中,一个数据项是另一个项的父级或子级. sql server2008开始内置的 hierarchyid 数据类型使存储和查询层次 ...
- splay伸展树模板
普通版本: struct SplayTree { ; ], key[maxn], val[maxn], sz[maxn], lz[maxn], fa[maxn]; , ) { ch[x][]=ch ...
- 开源一款android 偷拍 app【静拍】豌豆荚、flyme商店已经上线
首先先花3秒时间,预览下下app的大概是做啥的,解决啥痛点的:) app: 本地下载地址 需求点: 1:音量键可以拍照 2:没有快门声.闪光灯 3:锁屏下.或者是在其他程序界面都可以拍照 思路: 1: ...
- 【转】网页窗口DIV自定义拖动
一个来自网上的东西- -被我捡到了 然后我访问到了 发出来就可以粘贴复制自己做成js文件了吧 // by zhangxinxu welcome to visit my personal website ...
- 【转】html之file标签 --- 图片上传前预览 -- FileReader
记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能.当时用html的<input type="file"/>标签一直实现不了,最后舍弃了这个标签,使用了 ...