我在写有菜单栏的网页时，基本都会用响应式设计来适配移动端，例如把不重要的菜单选项隐藏，或者创建一个菜单按钮来控制的菜单的打开和关闭之类的。而我之前一直是使用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. C语言所有作业练习题

    2015.08.11 1.计算十进制 42 转换为二进制.八进制.十六进制分别对应的值 2.计算二进制 11010110 对应的十进制值 3.计算八进制 075 对应的十进制值 4.计算十六进制 0x ...

  2. Android APP新的“优雅”退出方式--EventBus大显身手

    最近在研究eventBus..很多小伙伴不知道他有什么用.. 前篇介绍了EventBus的基本使用 这里简单举一个例子,就是退出APP 转载请注明出处:http://blog.csdn.net/win ...

  3. Java-Iterator总结

    纸上得来终觉浅,绝知此事要躬行  --陆游    问渠那得清如许,为有源头活水来  --朱熹 迭 代器是一种设计模式,它是一个对象,它可以遍历并选择序列中的对象,而开发人员不需要了解该序列的底层结构. ...

  4. R.java文件介绍

    HelloWorld工程中的R.java文件 package com.android.hellworld; public final class R {     public static final ...

  5. how tomcat works 读书笔记(二)----------一个简单的servlet容器

    app1 (建议读者在看本章之前,先看how tomcat works 读书笔记(一)----------一个简单的web服务器 http://blog.csdn.net/dlf123321/arti ...

  6. Android ORM 框架之 greenDAO

    前言 我相信,在平时的开发过程中,大家一定会或多或少地接触到 SQLite.然而在使用它时,我们往往需要做许多额外的工作,像编写 SQL 语句与解析查询结果等.所以,适用于 Android 的ORM  ...

  7. androd输入管理系统机制解析

     android的输入管理系统主要完成按键.触摸板.鼠标等输入设备的事件输入,功能包括,输入设备的事件输入及向焦点窗口和焦点视图的事件派发,事件的插入,事件的过滤,事件的拦截等功能. 整个输入系统 ...

  8. SharePoint 2007 列表页定制--4个默认页定制

    以"简单的领导简介"为例,欢迎大家指正 背景:项目中需要有领导简介的模块,就开始制作领导简介,本来很简单,有一个列表就可以,然后在前台展示出来,但是客户看到我们的效果,尤其输入领导 ...

  9. Java 去掉字符串中的换行符回车符等

    去掉一个字符串中的换行符.回车符等,将连续多个空格替换成一个空格 String string = "this just a test" Pattern p = Pattern.co ...

  10. LeetCode(50)-Word Pattern

    题目: Given a pattern and a string str, find if str follows the same pattern. Here follow means a full ...