我在写有菜单栏的网页时，基本都会用响应式设计来适配移动端，例如把不重要的菜单选项隐藏，或者创建一个菜单按钮来控制的菜单的打开和关闭之类的。而我之前一直是使用JavaScript来实现菜单的打开和关闭的，但最近在网上看到有人使用CSS和HTML来实现这一功能，让我真正的感受到手里只要有一把锤，什么都可以做钉子。

实现之前先来看一下HTML标签和输入类型：

label

<label> 标签为 input 元素定义标注（标记）。

label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。

<label> 标签的 for 属性应当与相关元素的 id 属性相同。

Input Type: checkbox

<input type="checkbox"> 定义复选框。

复选框允许用户在有限数量的选项中选择零个或多个选项。

下面是demo的代码：

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>menu demo</title>
     <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
     <style>
         .demo {
             text-align: center;
         }
         /* 点击checkbox时，菜单打开或显示 */
         #menu-checkbox:checked ~ .nav {
             display: none;
         }
         /* 隐藏checkbox的复选框 */
         #menu-checkbox  {
             display: none;
         }
         .nav ul{
             list-style: none;
             margin: 0;
             padding: 0;
             font-size: 20px;
         }
         .glyphicon-menu-hamburger {
             font-size: 30px;
             margin-top: 50px;
         }
     </style>
 </head>
 <body>
     <div class="demo">
         <!-- label绑定checkbox -->
         <label for="menu-checkbox"><span class="glyphicon glyphicon-menu-hamburger"></label>
         <input id="menu-checkbox" type="checkbox">
         <div class="nav">
             <ul>
                 <li>aaa</li>
                 <li>bbb</li>
                 <li>ccc</li>
                 <li>ddd</li>
             </ul>
         </div>
     </div>
 </body>
 </html>

效果：

点击上面的hamburger图标，菜单就会显示和隐藏。

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

不使用JavaScript实现菜单的打开和关闭的更多相关文章

  1. JavaScript目录菜单滚动反显组件的实现

    JavaScript目录菜单滚动反显组件,有以下两个特点 每个导航菜单项(nav)对应页面一个内容区域(content) 滚动页面到特定内容区域(content)时,对应的菜单会自动切换,一般会添加一 ...

  2. [Flex] PopUpButton系列 —— 打开和关闭弹出菜单

    <?xml version="1.0" encoding="utf-8"?><!--响应打开和关闭弹出菜单的例子 PopUpButtonOpe ...

  3. 微信公众号菜单openid 点击菜单即可打开并登录微站

    现在大部分微站都通过用户的微信openid来实现自动登录.在我之前的开发中,用户通过点击一个菜单,公众号返回一个图文,用户点击这个图文才可以自动登录微站.但是如果你拥有高级接口,就可以实现点击菜单,打 ...

  4. JavaScript窗口打开与关闭及如何使用opener使子窗口对父窗口进行操作

    一.打开与关闭窗口 1.打开窗口:可以使用window对象中的Open()方法. newWindow = window.open(url,windowname,location); 参数说明: url ...

  5. 第一百四十八节，封装库--JavaScript，菜单切换

    第一百四十八节,封装库--JavaScript,菜单切换 首先在封装库封装点击切换方法 /** dian_ji_qie_huan()方法,设置点击切换,将元素设置成点击切换,也就是点击目标元素后,循环 ...

  6. win10正式版开始菜单无法打开，右边的网络连接、操作中心也打不开

    问题描述: 开机后电脑键盘的win键无响应,鼠标点击菜单栏中的这几个按键也都无响应,但是点击自己固定的应用程序却没有问题,在网上查找尝试了许多资料,终于找到了一个合适的解决方案.现记录如下 解决方案: ...

  7. Layer组件多个iframe弹出层打开与关闭及参数传递

    一.Layer简介 Layer是一款近年来备受青睐的web弹层组件,基于jquery,易用.实用,兼容包括IE6在内的所有主流浏览器,拥有丰富强大的可自定义的功能. Layer官网地址:http:// ...

  8. windows默认共享的打开和关闭？

    windows默认共享的打开和关闭?   Windows启动时都会默认打开admin$ ipc$ 和每个盘符的共享,对于不必要的默认共享,一般都会把它取消掉,可当又需要打开此默认共享时,又该从哪里设置 ...

  9. Android系统移植与调试之------->增加一个双击物理按键打开和关闭闪光灯并将闪光灯状态同步到下拉菜单中

    最近有一个客户有这样的需求: 1.在[设置]--->[无障碍]中添加一个开关按钮. 如果打开开关的话,双击某个物理按键的时候,打开闪光灯,再双击该物理按键的时候,关闭闪光灯. 如果关闭开关的话, ...

随机推荐

  1. Altium Designer设计PCB板之“精神”

    通过一小段时间的练习,感觉先领悟设计PCB板的“精神”更加重要.在这里,我指的“精神”是指PCB板中涉及的元器件原理图及其封装设计.当然,设计PCB板还有其他方面重要的精神需要掌握.本文所提到的“精神 ...

  2. iOS和Android开发异同点（一）

    说到移动开发,目前主流平台有谷歌的android os 系统,苹果iOS系统,和微软主打的windows Phone OS 系统,至于目前为啥移动开发中,安卓和iOS比较受欢迎,者要看三家产品的历史由 ...

  3. LeetCode之旅（16）-Climbing Stairs

    题目描述: You are climbing a stair case. It takes n steps to reach to the top. Each time you can either ...

  4. JVM学习--(五)垃圾回收器

    上一篇我们介绍了常见的垃圾回收算法,不同的算法各有各的优缺点,在JVM中并不是单纯的使用某一种算法进行垃圾回收,而是将不同的垃圾回收算法包装在不同的垃圾回收器当中,用户可以根据自身的需求,使用不同的垃 ...

  5. svn 不能添加.a文件

    1.打开终端输入    open ~/.subversion/ 2.双击打开config文件 3.修改如下两行 # global-ignores = *.o *.lo *.la *.al .libs ...

  6. java 深入理解内部类以及之间的调用关系

    什么是内部类 内部类是指在一个外部类的内部再定义一个类.内部类作为外部类的一个成员,并且依附于外部类而存在的.内部类可为静态,可用protected和private修饰(而外部类只能使用public和 ...

  7. Java错误和异常

    Java 异常结构图 在 Java 中,所有的异常都有一个共同的祖先 Throwable(可抛出).Throwable 指定代码中可用异常传播机制通过 Java 应用程序传输的任何问题的共性.  Th ...

  8. Future与Promise

    https://code.csdn.NET/DOC_Scala/chinese_scala_offical_document/file/Futures-and-Promises-cn.md#ancho ...

  9. ajax接收php返回得到一堆html代码

    ajax接收php返回得到一堆html代码 一.      错误代码: <font size='1'><table class='xdebug-error xe-notice' di ...

  10. Go语言开发区块链只需180行代码

    区块链开发用什么语言?通过本文你将使用Go语言开发自己的区块链(或者说用go语言搭建区块链).理解哈希函数是如何保持区块链的完整性.掌握如何用Go语言编程创造并添加新的块.实现多个节点通过竞争生成块. ...