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

    通过一系列的学习,我们知道尽管计算机可以完成工作,但实质上这些工作都是按照我们事先编好的程序执行的,所以,程序是计算机的灵魂,计算机程序执行的控制流程由三种基本的控制结构控制,即顺序结构,选择结构,循 ...

  2. 算法面试题-leetcode学习之旅（二）

    题目: Given a non-negative integer num, repeatedly add all its digits until the result has only one di ...

  3. Android NDK开发method GetStringUTFChars’could not be resolved

    Android NDK开发method GetStringUTFChars'could not be resolved 图1 最近用到android的ndk,但在eclipse中提示method Ge ...

  4. TCP的核心系列 — 重传队列的更新和时延的采样（一）

    重传队列实际上就是发送队列(sk->sk_write_queue),保存着发送且未确认的数据段. 当有新的数据段被确认时,需要把这些段从重传队列中删除,同时更新一些变量,包括 packets_o ...

  5. OpenCV——PS 滤镜， 浮雕效果

    具体的算法原理可以参考: PS 滤镜, 浮雕效果 // define head function #ifndef PS_ALGORITHM_H_INCLUDED #define PS_ALGORITH ...

  6. LeetCode(41)-Rectangle Area

    题目: Find the total area covered by two rectilinear rectangles in a 2D plane. Each rectangle is defin ...

  7. Java中使用C3P0连接池

    先看官网给的范例: import java.sql.*; import javax.naming.*; import javax.sql.DataSource; import com.mchange. ...

  8. Cookie、sessionStorage、localStorage的区别

    共同点:都是保存在浏览器端,且同源的.区别:cookie数据始终在同源的http请求中携带(即使不需要),即cookie在浏览器和服务器间来回传递.而sessionStorage和localStora ...

  9. html5中新增的属性和删除的属性

    一.表单新增的属性 1.对input(type="text").select.textarea与button元素指定autofocus属性,它以指定属性的方式让元素在画面打开时自动 ...

  10. sqlite 数据类型 <转>

    一般数据采用的固定的静态数据类型,而SQLite采用的是动态数据类型,会根据存入值自动判断.SQLite具有以下五种数据类型: 1.NULL:空值.2.INTEGER:带符号的整型,具体取决有存入数字 ...