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

    原文链接(有节选简写) Apple已经释放出Xcode7,给我们带来了Swift2和每个平台的最新版本支持.Cocos2D却还在等待更新去兼容Apple的改变.不幸的是,SpriteBuilder还未 ...

  2. 02_JNI中Java代码调用C代码，Android中使用log库打印日志，javah命令的使用，Android.mk文件的编写，交叉编译

     1  编写以下案例(下面的三个按钮都调用了底层的C语言): 项目案例的代码结构如下: 2 编写DataProvider的代码: package com.example.ndkpassdata; ...

  3. 《java入门第一季》之面向对象（成员方法）

    /* 类的组成:成员变量,成员方法 又加入了一个新的成员:构造方法. 以后再提(类的组成): 成员变量 构造方法 成员方法 根据返回值: void类型 非void类型 形式参数: 空参方法 非空参方法 ...

  4. 基于Oracle ADF的应用程序开发

    ADF简介 ADF(Application Development Framework)是Oracle公司为简化J2EE程序开发的复杂性专门开发的一种解决方案,ADF通过减少实现设计模式和应用程序框架 ...

  5. 【freeradius3】安装和拓展需求

    这次主要来看看 freeradius的安装,以及Python拓展的例子,还有计费字段根据厂家进行拓展. 3.0版本的安装 参考文章 yum install libtalloc-devel wget - ...

  6. 苹果新的编程语言 Swift 语言进阶（七）－－枚举、结构、类

    Swift语言中,具有类特征的类型包括三种,即枚举类型.结构类型(包括基本类型,基本类型实际都是结构类型的特例).类.其中枚举类型.结构类型是属于值类型,类属于引用类型.三种类型都可以添加属性.方法. ...

  7. 利用可变参实现fprintf函数

    #include <stdio.h> #include <stdarg.h> /* 可变参相关接口 typedef char * va_list ; void va_start ...

  8. AndroidUI之绘图机制和原理 最完整的文章

    转载请标明出处:http://blog.csdn.net/sk719887916/article/details/39961171,作者:skay  导读: 熟悉javaGUI的朋友对java绘图必定 ...

  9. obj-c编程10:Foundation库中类的使用(2)[字符串,数组]

    Foundation库的内容不可谓不多,就算很精简的说篇幅也受不了啊!笨猫一向反对博客文章一下子拖拖拉拉写一大坨!KISS哦!so将上一篇文章再分一篇来说,于是有了这篇,可能还会有(3)哦... 我发 ...

  10. RHEL 6.9 udev 将lv绑定raw devices

    环境 RHEL6|RHEL7,LVM2,RAW device 用途 使用LVM的lv逻辑卷绑定裸设备 1. 编辑 /etc/udev/rules.d/60-raw.rules 添加如下: ACTION ...