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 ...
随机推荐
- Celery（一个懂得 异步任务、定时任务、周期任务 的"芹菜"）
一.什么是Celery? Celery 是基于Python实现的模块,用于执行异步.定时.周期任务的,其结构的组成是: - 用户任务 app - 管道 broker 用于存储任务(官方推荐 redis ...
- Python第一个爬虫学习
在网上查看大神的关于Python爬虫的文章,代码如下: #coding=utf-8 import urllib import re def getHtml(url): page = urllib.ur ...
- undefined reference to _imp__xmlFree
Re: [xml] MSYS and MINGW: undefined reference to _imp__xmlFree From: Mike Peat <mpeat unicorninte ...
- 处理函数和数组声明[条款17]---《C++必知必会》
指向函数的指针声明和指向数组的指针声明容易混淆,原因在于函数和数组修饰符的优先级比指针修饰符的优先级高,因此通常需要使用圆括号. int *f1( );//一个返回值为 int* 的函数 int ( ...
- Redis持久化及复制
一.持久化的两种方式 1.RDB: RDB是在指定时间间隔内生成数据集的时间点快照(point-in-time snapshot)持久化,它是记录一段时间内的操作,一段时间内操作超过多少次就持久化.默 ...
- 82. Remove Duplicates from Sorted List II（删除有序链表中的重复元素）
Given a sorted linked list, delete all nodes that have duplicate numbers, leaving only distinct numb ...
- HDU - 4725 The Shortest Path in Nya Graph(拆点+Dijkstra)
题意:N个点,每个点有一个层号L,相邻的两层 Li 与 Li+1 之间的距离为C.另外给出M条无向边,求从点1到点N的最短路. 分析:同一层之间的两点距离并不是0,这是一个小坑.依次把相邻两层的所有点 ...
- 【android】 如何把gif图片下载到本地
以上图片大家可以看到,虽然是个jpg格式的文件,但是本质上是个动图. 但是发现在咱的图片模块下,本地存储的图片只有一帧,问题出在哪里呢? http获取到的byte[]数据是没问题的 断点跟踪了下,发现 ...
- 20145316《Java程序设计》第二周学习总结
20145316<Java程序设计>第2周学习总结 教材学习内容总结 3.1.1 Java的类型 分为基本类型(Primitive type)和类类型(Class type) 基本类型: ...
- Log4Net 日志文件分类保存
1.app.config <configSections> <section name="log4net" type="log4net.Config.L ...