不使用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图标,菜单就会显示和隐藏。

虽然是很简单的一个东西,不过它对于我而言更多的是一种启发。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/369990.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

芝枝.计算机与人文科学,计算机与人文科学

计算机与人文科学(2013-03-13 13:24:17)标签&#xff1a;文化战争名著《静静的顿河》可以说从它诞生起便没有平静过&#xff0c;围绕它的作者所引起的争议&#xff0c;就像它获得诺贝尔文学奖一样&#xff0c;撼动文坛&#xff0c;有人指控肖洛霍夫是个骗子&#xff0c;《静静的…

HTML5 Canvas游戏开发实战 PDF扫描版

HTML5 Canvas游戏开发实战主要讲解使用HTML5 Canvas来开发和设计各类常见游戏的思路和技巧&#xff0c;在介绍HTML5 Canvas相关特性的同时&#xff0c;还通过游戏开发实例深入剖析了其内在原理&#xff0c;让读者不仅知其然&#xff0c;而且知其所以然。在本书中&#xff0c;除…

css3图片垂直居中

图片相对父元素垂直居中, css3属性给父级元素设置 display: -webkit-box; -moz-box-align: center; -webkit-box-align: center; -moz-box-pack: center; -webkit-box-pack: center; 需要注意的是&#xff1a; 父级元素要有确定的高度&#xff01;

网络局域网看不到其它计算机,局域网中看不到其它计算机怎么办

通过网上邻居或查看网络计算机时&#xff0c;看不到局域网中其它计算机&#xff0c;这是怎么回事呢?下面是学习啦小编给大家整理的一些有关看不到局域网中其它计算机的解决方法&#xff0c;希望对大家有帮助!局域网中看不到其它计算机的解决方法打开“控制面板”-“网络和Inte…

计算机二级高级应用考题,2016计算机二级MSOFFICE高级应用考试真题

2016计算机二级MSOFFICE高级应用考试真题离2016上半年的计算机等级考试只有一个多月了&#xff0c;为了帮助大家尽快考试过关&#xff0c;小编整理了计算机二级office考试题&#xff0c;希望能帮助到大家!(1)下列叙述中正确的是A)一个算法的空间复杂度大&#xff0c;则其时间复…

DBMS-数据库设计与E-R模型:E-R模型、约束、E-R图、E-R扩展特性、E-R图转换为关系模式、UML建模...

设计过程概览 1. 设计阶段 最初阶段&#xff1a;刻画未来数据库用户的数据需求&#xff0c;产品为用户需求规格说明&#xff1b; 概念设计阶段&#xff08;conceptual-design phase&#xff09;&#xff1a;&#xff08;关注描述抽象数据及其联系&#xff0c;通常使用实体-联系…

Java虚拟机:如何判定哪些对象可回收?

版权声明&#xff1a;本文为博主原创文章&#xff0c;转载请注明出处&#xff0c;欢迎交流学习&#xff01; 在堆内存中存放着Java程序中几乎所有的对象实例&#xff0c;堆内存的容量是有限的&#xff0c;Java虚拟机会对堆内存进行管理&#xff0c;回收已经“死去”的对象&…

css3中的box-sizing属性的使用

box-sizing属性用来定义元素的width和height所表示的区域,该属性一般有三种值&#xff1a;content-box、border-box、inherit。 其中inherit表示box-sizing的值应该从父元素继承。 content-box和border-box的主要区别就是元素的width和height的值包不包括border、padding这两…

中南大学在线考试答案计算机基础,中南大学《计算机基础》在线考试题库(267题)(有答案).doc...

中南大学《计算机基础》在线考试题库(267题)(有答案).doc 计算机基础01 总共89题共100分 一. 单选题 (共35题,共35分) 1. 域名服务器DNS的主要功能是( )。 (1分) A.通过请求及回答获取主机和网络相关的信息 B.查询主机的MAC地址 C.为主机自动命名 D.合理分配IP地址 ★标准答案&…

CSS制作简单loading动画

曾经以为&#xff0c;loading的制作需要一些比较高深的web动画技术&#xff0c;后来发现大多数loading都可以用“障眼法”做出来。比如一个旋转的圆圈&#xff0c;并不都是将gif图放进去&#xff0c;有些就是画个静止图像&#xff0c;然后让它旋转就完了。gif图也可以&#xff…

机器学习:多变量线性回归

************************************** 注&#xff1a;本系列博客是博主学习Stanford大学 Andrew Ng 教授的《机器学习》课程笔记。博主深感学过课程后&#xff0c;不进行总结非常easy遗忘&#xff0c;依据课程加上自己对不明确问题的补充遂有此系列博客。本系列博客包含线性…

经过路由无法找到计算机,电脑无法启动服务提示系统找不到指定的路径(图)

原标题&#xff1a;"电脑无法启动服务提示系统找不到指定的路径"相关电脑问题教程分享。 - 来源:191路由网。众所周知&#xff0c;使用电脑的时候需要启动一些服务才能使用相关的功能&#xff0c;但是如果出现无法启动服务项&#xff0c;并且提示“错误3&#xff1a;…

详细解读css中的浮动以及清除浮动的方法

对于前端初学者来说&#xff0c;css浮动部分的知识是一块比较难以理解的部分&#xff0c;下面我将把我学习过程中的心得分享给大家。 导读&#xff1a; 1.css块级元素讲解 2.css中浮动是如何产生的 3.出现浮动后&#xff0c;如何清除浮动&#xff08;本文将涉及到多种清除浮动…

CSS多列布局(实例)

前言 一列布局二列布局三列布局 1 一列布局 一列布局&#xff1a; HTML部分 <!DOCTYPE html> <html> <head> <meta charset"utf-8" /> <title>一列布局</title> </head> <body> <div class"head">…

大头贴计算机教程,推荐!自家电脑也能拍大头贴的秘密

您可能感兴趣的话题&#xff1a;美图拍拍核心提示&#xff1a;一直都超爱拍大头贴&#xff0c;喜欢每张都能换不同的框框&#xff1b;喜欢可以直接看到效果&#xff0c;做出满意的动作&#xff1b;喜欢将大头贴和朋友们分享……不过夏日炎炎的&#xff0c;出门太麻烦&#xff0…

css选择器的综合使用

代码实现&#xff1a; 1 <!DOCTYPE html>2 <html lang"en">3 <head>4 <meta charset"utf-8">5 <title>css的综合使用</title>6 <style>7 div {8 colo…

启动tomcat时 一闪而过解决方法

【前文】 在实际开发中一般都是eclipsetomcat(也许还会用到tomcat的插件)&#xff0c;我们只需要在eclipse中单击servers上的按钮就可以成功启动tomcat了&#xff0c; 但是如果想在tomcat的安装目录下 双击startup.bat启动时却一闪而过了。这是为什么呢&#xff08;tomcat启动失…

复习HTML CSS(5)

n <meta>标记 <meta>的主要作用&#xff0c;是提供网页的源信息。比如&#xff1a;指定网页的搜索关键字 <meta>标记有两个属性&#xff1a;http-equiv和name。 1、 http-equiv属性 功能&#xff1a;模拟http协议文件头信息&#xff0c;当信息从服务器端传…

『cs231n』卷积神经网络工程实践技巧_下

概述 计算加速 方法一&#xff1a; 由于计算机计算矩阵乘法速度非常快&#xff0c;所以这是一个虽然提高内存消耗但是计算速度显著上升的方法&#xff0c;把feature map中的感受野&#xff08;包含重叠的部分&#xff0c;所以会加大内存消耗&#xff09;和卷积核全部拉伸成为向…

计算机扬天m400c联想,【联想扬天M参数】联想扬天M系列台式电脑参数-ZOL中关村在线...

CPU型号内存容量硬盘容量屏幕尺寸显卡类型 价格详细对比Intel 奔腾双核 E52002GB DDRII 667MHz250GB SATAII 7200转高速防震硬盘集成显卡对比Intel 奔腾4 631512MBGB 512MB DDRII53380GB 7200转集成显卡对比Intel Atom 2301GBGB DDRII160GB 7200转高速防震硬盘集成显卡对比Inte…