不使用JavaScript实现菜单的打开和关闭
我在写有菜单栏的网页时,基本都会用响应式设计来适配移动端,例如把不重要的菜单选项隐藏,或者创建一个菜单按钮来控制的菜单的打开和关闭之类的。而我之前一直是使用JavaScript来实现菜单的打开和关闭的,但最近在网上看到有人使用CSS和HTML来实现这一功能,让我真正的感受到手里只要有一把锤,什么都可以做钉子。
实现之前先来看一下HTML标签和输入类型:
label
<label> 标签为 input 元素定义标注(标记)。
label 元素不会向用户呈现任何特殊效果。不过,它为鼠标用户改进了可用性。如果您在 label 元素内点击文本,就会触发此控件。就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。
<label> 标签的 for 属性应当与相关元素的 id 属性相同。
Input Type: checkbox
<input type="checkbox"> 定义复选框。
复选框允许用户在有限数量的选项中选择零个或多个选项。
下面是demo的代码:
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <meta http-equiv="X-UA-Compatible" content="ie=edge">
7 <title>menu demo</title>
8 <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
9 <style>
10 .demo {11 text-align: center;
12 }
13 /* 点击checkbox时,菜单打开或显示 */
14 #menu-checkbox:checked ~ .nav {15 display: none;
16 }
17 /* 隐藏checkbox的复选框 */
18 #menu-checkbox {19 display: none;
20 }
21 .nav ul{22 list-style: none;
23 margin: 0;
24 padding: 0;
25 font-size: 20px;
26 }
27 .glyphicon-menu-hamburger {28 font-size: 30px;
29 margin-top: 50px;
30 }
31 </style>
32 </head>
33 <body>
34 <div class="demo">
35 <!-- label绑定checkbox -->
36 <label for="menu-checkbox"><span class="glyphicon glyphicon-menu-hamburger"></label>
37 <input id="menu-checkbox" type="checkbox">
38 <div class="nav">
39 <ul>
40 <li>aaa</li>
41 <li>bbb</li>
42 <li>ccc</li>
43 <li>ddd</li>
44 </ul>
45 </div>
46 </div>
47 </body>
48 </html>
效果:
点击上面的hamburger图标,菜单就会显示和隐藏。
虽然是很简单的一个东西,不过它对于我而言更多的是一种启发。
不使用JavaScript实现菜单的打开和关闭相关推荐
- ZUI 动态加载树形菜单+动态打开Tab
appData数据: {"code": 0,"msg": "操作成功","data": [{"AppGUID& ...
- HTML一级菜单和二级菜单区别,JavaScript点击一级菜单打开和关闭二级菜单
[JavaScript点击一级菜单打开和关闭二级菜单] ``` Document #sub_menu_1,#sub_menu_2{ display: none; } ul li:hover{ curs ...
- android cmd 右键菜单不见了,为Windows右键菜单提供打开命令行选项
下面是编程之家 jb51.cc 通过网络收集整理的代码片段. 编程之家小编现在分享给大家,也给大家做个参考. :: 更新说明 :: :: 版本:V1.0 :: 日期:2012-07-31 :: 说明: ...
- Javascript右键菜单类
代码简介: 这是自己写的一个右键菜单类,屏蔽掉了IE固有的右键菜单,一共有四个参数:第一个是出发显示右键菜单的div的id 第二个是右键菜单这个层的id,根据这个id去创建一个新的层,menuList ...
- javascript option 菜单图标_MacBook上神奇的Option键
不知道昨天的(Mac上Command键的妙用)有没有帮助到大家呢?今天我们就来讲一讲Mac上的Option键. Option作为Mac上四大控制键(Shift,Command,Control,Opti ...
- 无法打开计算机开始菜单,开始菜单,教您开始菜单无法打开
win10系统开始菜单不能使用该如何是好呢?最近有位用户反映在使用win10系统的过程当中,发现开始菜单没莫名其妙的就出现了打不开的情况,这该怎么办呢?不要着急,小编这就来将处理开始菜单打不开这个问题 ...
- html当前窗口打开页面,JavaScript 在本窗口打开网页
JavaScript 在本窗口打开网页 相关文档: 很多人都向在服务器 端调用客户端的函数来操作,也就是在asp中调用java script脚本中已经定义好的脚本函数.经过研究,发现了一些勉强的方法. ...
- win10开始菜单打不开_windows10系统电脑开始菜单无法打开的解决教程
有用户反馈,自从升级Win10系统后,问题也随之而来的多了起来,最近遇到了开始菜单打不开的问题.估计大部分人都不知道该如何解决这个问题吧,下面小编教你windows10系统电脑开始菜单无法打开的解决教 ...
- Windows电脑开始菜单无法打开,没反应的解决方法
Windows电脑开始菜单无法打开,没反应的解决方法 参考文章: (1)Windows电脑开始菜单无法打开,没反应的解决方法 (2)https://www.cnblogs.com/qsj1024/p/ ...
最新文章
- 一个几何不等式的最佳常数
- 关于交换机SVI(转)
- MYSQL中RAND子句的使用_mysql优化--rand()优化
- Linux网络流量监控Iftop安装
- [LeetCode] 9. Palindrome Number
- (计算机组成原理)第七章输入和输出系统-第二节1:外部设备之输入和输出设备(键盘鼠标、显示器和打印机)
- 多媒体计算机的关键技术有哪些,多媒体计算机的定义分类和关键技术
- Mybatis配置信息浅析 MyBatis简介(二)
- 怎样用一个3升的杯子和一个5升的杯子装出4升水来(杯子没有刻度)?
- Windows 对外开放端口号
- 《WinForm开发系列之控件篇》Item65 VScrollBar (暂无)
- HDU 5879 Cure -2016 ICPC 青岛赛区网络赛
- java运用jsp_JSP:JAVA Bean在JSP中的运用
- 用计算机怎么发邮件,怎么用qq邮箱发文件-你必须要学会的电脑操作——邮件收发...
- .net dll反编译出现的问题,以及部分修复的方法
- HR面试常见问题汇总
- linux nic cpu 10%,cpu – NIC中的描述符概念
- unity2018 Image使用Sliced九宫格进行调整
- Java学习 day7 (常用API)Scanner类.Random类.Arraylist类
- java anon,试图找到泄漏!对于pmap来说,anon意味着什么?
热门文章
- Java学习、简单代码编译
- 算法题:输入一个表示整数的字符串,把该字符串转换成整数并输出。例如输入字符串“12345”,则输出整数“12345”
- python怎么读取pdf文件_Python解析并读取PDF文件内容的方法
- SecureCRT在卸载时似乎会同时删除系统自带的Consolas字体
- 《中国文化要略》第八章 古代教育 第九章 科举制度
- いちがつ(2017/1)
- wchar_t 的输出问题
- Eigen(4)矩阵基本运算
- mysql 打包 脚本_windows下mysql自动备份压缩打包时间命名批处理脚本
- startindex 不能大于字符串长度_「12」学习MySQL第二类函数:字符串函数