我在写有菜单栏的网页时，基本都会用响应式设计来适配移动端，例如把不重要的菜单选项隐藏，或者创建一个菜单按钮来控制的菜单的打开和关闭之类的。而我之前一直是使用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-x 游戏开发之有限状态机(FSM) (三)

    cocos2d-x 游戏开发之有限状态机(FSM) (三) 有限状态机简称FSM,现在我们创建一个专门的FSM类,负责管理对象(Monkey)的状态.然后Monkey类就实现了行为与状态分离.Monk ...

  2. C语言生成32位和64位随机数算法

    C语言生成32位和64位随机数算法 /** * randstd.h * * Standard definitions and types, Bob Jenkins * * 2015-01-19: re ...

  3. 图像的基本运算——scale， rotation， translation

    图像是视觉信息的直接反应,图像呈现出各种各样的特效都是通过图像的基本运算来完成的.图像最基本的运算有三种,分别是scale,rotation 和translation,叫做尺度,旋转和平移.很多图像的 ...

  4. linux下将eclipse项目转换为gradle项目

    本文针对于在linux环境下,不使用eclipse而把一个eclipse项目转换为gradle默认结构的项目的情况,脚本可能在mac下也适用,未验证. windows中的转换问题,以及使用eclips ...

  5. HBase快照

    CDH是Cloudera的完全开源分布式Apache Hadoop及相关项目(包括Apache HBase).CDH的当前版本(4.2)引入的一个HBase新特性最近加入到了主干中,允许用户对指定表进 ...

  6. OVS 中的哈希表： shash

    shash出现在OVS的代码中,定义如下:   struct hmap_node {     size_t hash;     struct hmap_node * next; };   struct ...

  7. python3 数据科学基础

    第一章 1.Anaconda(最著名的python数据科学平台) 下面小伙伴们咱们来初初识下Anaconda吧 What is Anaconda???? 回答: (1).科学计算的平台 (2).有很多 ...

  8. Java编程语言下Selenium 鼠标悬停以及右击操作

    // 基于Actions类创建一个对象 Actions action = new Actions(driver); // 鼠标悬停在药渡公司全称字段上 action.moveToElement(Yao ...

  9. 【转载】Linux Cache Mechanism Summary(undone)

    http://www.cnblogs.com/LittleHann/p/3904909.html 目录 1. 缓存机制简介 2. 内核缓存机制 3. 内存缓存机制 4. 文件缓存机制 5. 数据库缓存 ...

  10. Python-Web框架之 - 利用SQLALchemy创建与数据库MySQL的连接, 详解用Flask时会遇到的一些大坑 !

    经过这个小项目算是对Django与Flask这两个web框架有了新的认识 , Django本身的轮子非常齐全 , 套路也很固定 , 新手在接触Django框架时 , 不会陷入到处找轮子的大坑 ; 那么 ...