不使用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 相关文章推荐
表单填写时用回车代替TAB的实现方法
Oct 09 Javascript
Javascript与jQuery方法的隐藏与显示
Jan 19 Javascript
javascript bom是什么及bom和dom的区别
Nov 26 Javascript
Bootstrap所支持的表单控件实例详解
May 16 Javascript
js仿百度切换皮肤功能(html+css)
Jul 10 Javascript
简单的js计算器实现
Oct 26 Javascript
jQuery中get方法用法分析
Dec 07 Javascript
TypeScript入门-接口
Mar 30 Javascript
JS实现评价的星星功能
Aug 20 Javascript
使用Angular CLI从蓝本生成代码详解
Mar 24 Javascript
分享5个好用的javascript文件上传插件
Sep 16 Javascript
vue动态渲染svg、添加点击事件的实现
Mar 13 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中时间轴开发(刚刚、5分钟前、昨天10:23等)
2011/10/03 PHP
解析PHP 使用curl提交json格式数据
2013/06/29 PHP
ThinkPHP自动填充实现无限级分类的方法
2014/08/22 PHP
php生成图片验证码
2015/06/09 PHP
Symfony2学习笔记之系统路由详解
2016/03/17 PHP
php的debug相关函数用法示例
2016/07/11 PHP
说说掌握JavaScript语言的思想前提想学习js的朋友可以看看
2009/04/01 Javascript
JavaScript高级程序设计阅读笔记(六) ECMAScript中的运算符(二)
2012/02/27 Javascript
jQuery+CSS实现菜单滑动伸展收缩(仿淘宝)
2013/03/22 Javascript
js变换显示图片的实例
2013/04/16 Javascript
js拼接html注意问题示例探讨
2014/07/14 Javascript
JS使用正则表达式除去字符串中重复字符的方法
2015/11/05 Javascript
vue中用H5实现文件上传的方法实例代码
2017/05/27 Javascript
基于Datatables跳转到指定页的简单实例
2017/11/09 Javascript
JS的函数调用栈stack size的计算方法
2018/06/24 Javascript
JavaScript偏函数与柯里化实例详解
2019/03/27 Javascript
生产制造追溯系统之在线打印功能
2019/06/03 Javascript
vue 使用插槽分发内容操作示例【单个插槽、具名插槽、作用域插槽】
2020/03/06 Javascript
react实现复选框全选和反选组件效果
2020/08/25 Javascript
node.js文件的复制、创建文件夹等相关操作
2021/02/05 Javascript
Python 两个列表的差集、并集和交集实现代码
2016/09/21 Python
详解django中url路由配置及渲染方式
2019/02/25 Python
Python 复平面绘图实例
2019/11/21 Python
python日志通过不同的等级打印不同的颜色(示例代码)
2021/01/13 Python
美国求婚钻戒网站:Super Jeweler
2016/08/27 全球购物
编写类String的构造函数、析构函数和赋值函数
2012/05/29 面试题
秋季运动会活动方案
2014/02/05 职场文书
运输服务质量承诺书
2014/03/27 职场文书
四议两公开实施方案
2014/03/28 职场文书
五年级学生评语
2014/04/22 职场文书
民族团结先进个人事迹材料
2014/06/02 职场文书
药剂专业求职信
2014/06/20 职场文书
信息管理与信息系统专业求职信
2014/06/21 职场文书
家具商场的活动方案
2014/08/16 职场文书
四风问题对照检查材料整改措施
2014/09/27 职场文书
vue使用echarts实现折线图
2022/03/21 Vue.js