不使用JavaScript实现菜单的打开和关闭效果demo
更新时间：2018年05月01日 09:46:23 作者：郭佬
本文通过实例代码给大家分享在不使用JavaScript实现菜单的打开和关闭效果，非常不错，具有参考借鉴价值，需要的朋友参考下吧
我在写有菜单栏的网页时，基本都会用响应式设计来适配移动端，例如把不重要的菜单选项隐藏，或者创建一个菜单按钮来控制的菜单的打开和关闭之类的。而我之前一直是使用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>
效果：
点击上面的hamburger图标，菜单就会显示和隐藏。
虽然是很简单的一个东西，不过它对于我而言更多的是一种启发。
以上所述是小编给大家介绍的不使用JavaScript实现菜单的打开和关闭效果，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！
相关文章
在前端开发中,HTTP 请求是与后端交互的重要方式,为了提高代码的可维护性、复用性以及用户体验,使用 Axios 拦截器是非常常见的做法,本文将详细介绍如何使用 Axios 的请求拦截器和响应拦截器,需要的朋友可以参考下2024-11-11
近期项目需要实现将 html 页面转换成 pdf 报告的需求,经过一番调研以及结合过往经验,发现了三种技术方案,下面我们就来看看它们的具体实现步骤吧2024-02-02
Bootstrap datepicker日期选择器插件使用详解
这篇文章主要为大家详细介绍了Bootstrap datepicker日期选择器插件的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-07-07
声明一个数值类型的变量我看到三种;我嘴角微微一笑：少年你还嫩了点，哪止三种，我知道的至少有五种,好奇的你可以参考下哈，希望本文可以帮助到你2013-02-02
今天读John Resig的Pro Javascript Techniques时候看到他书上给的一个关于drag and drop的例子，我做的第二件事就是js模拟用鼠标拖出矩形框，代码很简单2009-04-04
下面小编就为大家带来一篇js实现点击切换checkbox背景图片的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-05-05
今天在编码时，遇到一个问题，特记录下。希望对朋友有所帮助。2010-12-12
使用frame页面嵌套，重启了服务器的时候会出现登录页面在frame页面中出现，解决方法是在登录页面里面用js判断下当前的地址信息2014-07-07
最近做项目的时候碰到一个问题： 在js里面使用window.close()，IE下工作正常，但是FireFox下有时可以，有时不行。2008-12-12
下面小编就为大家带来一篇网页中的图片查看器viewjs使用方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-07-07
最新评论