不使用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 相关文章推荐
javascript实现回车键提交表单方法总结
Jan 10 Javascript
JS中处理时间之setUTCMinutes()方法的使用
Jun 12 Javascript
javascript框架设计之种子模块
Jun 23 Javascript
js实现按钮颜色渐变动画效果
Aug 20 Javascript
jquery点击缩略图切换视频播放特效代码分享
Sep 15 Javascript
JS基于面向对象实现的多个倒计时器功能示例
Feb 28 Javascript
解决微信二次分享不显示摘要和图片的问题
Aug 18 Javascript
详谈DOM简介及节点、属性、查找节点的方法
Nov 16 Javascript
使用百度地图实现地图网格的示例
Feb 06 Javascript
基于JS开发微信网页录音功能的实例代码
Apr 30 Javascript
微信小程序实现弹框效果
May 26 Javascript
JS模拟实现京东快递单号查询
Nov 30 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
超神学院:天使彦公认最美的三个视角,网友:我的天使快下凡吧!
2020/03/02 国漫
mysql,mysqli,PDO的各自不同介绍
2012/09/19 PHP
PHP.ini安全配置检测工具pcc简单介绍
2015/07/02 PHP
Symfony2使用Doctrine进行数据库查询方法实例总结
2016/03/18 PHP
php代码调试利器firephp安装与使用方法分析
2018/08/21 PHP
Laravel多域名下字段验证的方法
2019/04/04 PHP
PHP实现的抓取小说网站内容功能示例
2019/06/27 PHP
PHP 命名空间和自动加载原理与用法实例分析
2020/04/29 PHP
javascript 密码强度验证规则、打分、验证(给出前端代码,后端代码可根据强度规则翻译)
2010/05/18 Javascript
javascript实现div的拖动并调整大小类似qq空间个性编辑模块
2012/12/12 Javascript
js兼容的placeholder属性详解
2013/08/18 Javascript
JS+CSS设置img在DIV中只显示Img垂直居中的部分
2013/10/24 Javascript
解决node-webkit 不支持html5播放mp4视频的方法
2015/03/11 Javascript
实例详解JSON取值(key是中文或者数字)方式
2017/08/24 Javascript
强大的JavaScript响应式图表Chartist.js的使用
2017/09/13 Javascript
Vuejs实现购物车功能
2017/11/05 Javascript
手把手教你用Node.js爬虫爬取网站数据的方法
2018/07/05 Javascript
Vue Object 的变化侦测实现代码
2020/04/15 Javascript
浅谈Ant Design Pro 菜单自定义 icon
2020/11/17 Javascript
[01:03:03]VP vs Mineski 2018国际邀请赛淘汰赛BO3 第一场 8.22
2018/08/23 DOTA
python获取文件扩展名的方法
2015/07/06 Python
详解Python的hasattr() getattr() setattr() 函数使用方法
2018/07/09 Python
python中将zip压缩包转为gz.tar的方法
2018/10/18 Python
python如何实现视频转代码视频
2019/06/17 Python
Python使用sklearn库实现的各种分类算法简单应用小结
2019/07/04 Python
python爬取盘搜的有效链接实现代码
2019/07/20 Python
Windows下PyCharm2018.3.2 安装教程(图文详解)
2019/10/24 Python
html5 canvas fillRect坐标和大小的问题解决方法
2014/03/26 HTML / CSS
印度低票价航空公司:GoAir
2017/10/11 全球购物
英国著名药妆店:Superdrug
2021/02/13 全球购物
如何处理简单的PHP错误
2015/10/14 面试题
撤诉状格式范本
2015/05/19 职场文书
交通安全教育主题班会
2015/08/12 职场文书
体育教师研修感悟
2015/11/18 职场文书
PyQt5爬取12306车票信息程序的实现
2021/05/14 Python
MySQL的索引你了解吗
2022/03/13 MySQL