不使用JavaScript实现菜单的打开和关闭效果demo


Posted in Javascript onMay 01, 2018

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

效果:

不使用JavaScript实现菜单的打开和关闭效果demo

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

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

以上所述是小编给大家介绍的不使用JavaScript实现菜单的打开和关闭效果,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
jQuery 学习 几种常用方法
Jun 11 Javascript
基于mootools 1.3框架下的图片滑动效果代码
Apr 22 Javascript
获得Javascript对象属性个数的示例代码
Nov 21 Javascript
不提示直接关闭网页窗口的JS示例代码
Dec 17 Javascript
JS实现仿腾讯微博无刷新删除微博效果代码
Oct 16 Javascript
jQuery的Cookie封装,与PHP交互的简单实现
Oct 05 Javascript
javascript的document中的动态添加标签实现方法
Oct 24 Javascript
vue-router:嵌套路由的使用方法
Feb 21 Javascript
javaScript 逻辑运算符使用技巧整理
May 03 Javascript
JavaScript实现form表单的多文件上传
Mar 27 Javascript
js使用xml数据载体实现城市省份二级联动效果
Nov 08 Javascript
在vue项目中使用md5加密的方法
Sep 14 Javascript
如何获取TypeScript的声明文件.d.ts
May 01 #Javascript
Vue项目中使用Vux的安装过程
May 01 #Javascript
在Vue项目中使用d3.js的实例代码
May 01 #Javascript
详解ajax的data参数错误导致页面崩溃
Apr 30 #Javascript
妙用缓存调用链实现JS方法的重载
Apr 30 #Javascript
JS实现的缓冲运动效果示例
Apr 30 #Javascript
Vue波纹按钮组件制作
Apr 30 #Javascript
You might like
分享一个PHP数据流应用的简单例子
2012/06/01 PHP
php获取本地图片文件并生成xml文件输出具体思路
2013/04/27 PHP
php var_export与var_dump 输出的不同
2013/08/09 PHP
解决CodeIgniter伪静态失效
2014/06/09 PHP
实现在同一方法中获取当前方法中新赋值的session值解决方法
2014/06/26 PHP
SESSION存放在数据库用法实例
2015/08/08 PHP
php图片添加文字水印实现代码
2016/03/15 PHP
js内置对象 学习笔记
2011/08/01 Javascript
JS获取后台Cookies值的小例子
2013/03/04 Javascript
20行代码实现的一个CSS覆盖率测试脚本
2013/07/07 Javascript
JS冒泡事件的快速解决方法
2013/12/16 Javascript
JavaScript搜索字符串并将搜索结果返回到字符串的方法
2015/04/06 Javascript
JavaScript学习笔记之数组的增、删、改、查
2016/03/23 Javascript
浅谈jQuery为哪般去掉了浏览器检测
2016/08/29 Javascript
微信小程序 生成携带参数的二维码
2019/10/23 Javascript
vue 解决路由只变化参数页面组件不更新问题
2019/11/05 Javascript
微信小程序全选多选效果实现代码解析
2020/01/21 Javascript
JavaScript计算出两个数的差值
2020/03/19 Javascript
uni-app微信小程序登录授权的实现
2020/05/22 Javascript
JS继承实现方法及优缺点详解
2020/09/02 Javascript
js闭包的9个使用场景
2020/12/29 Javascript
Python多进程分块读取超大文件的方法
2016/04/13 Python
Python的for和break循环结构中使用else语句的技巧
2016/05/24 Python
python多线程并发让两个LED同时亮的方法
2019/02/18 Python
Python实现连接MySql数据库及增删改查操作详解
2019/04/16 Python
jupyter notebook 中输出pyecharts图实例
2020/04/23 Python
python列表切片和嵌套列表取值操作详解
2020/02/27 Python
html5绘制时钟动画
2014/12/15 HTML / CSS
iHerb俄罗斯:维生素、补品和天然产品
2020/07/09 全球购物
Linux上比较文件的命令都有哪些
2013/09/28 面试题
Linux内核产生并发的原因
2016/11/08 面试题
工作室成员个人发展规划范文
2014/01/24 职场文书
元旦主持词开场白
2015/05/29 职场文书
在Java中Collection的一些常用方法总结
2021/06/13 Java/Android
解决SpringBoot跨域的三种方式
2021/06/26 Java/Android
实战 快速定位MySQL的慢SQL
2022/03/22 MySQL