This time I will bring you how to open and close the menu without JS, and open and close the menu without JS. What are the precautions? The following is a practical case, let's take a look.
When I write a web page with a menu bar, I basically use responsive design to adapt to the mobile terminal, such as hiding unimportant menu options, or creating a menu button to control the opening and closing of the menu. some type of. I have always
used JavaScript to open and close the menu, but recently I saw someone using CSS and HTML to implement this function on the Internet, which made me really feel that as long as I have a hammer in my hand, , anything can be made into nails.
Before implementing, let’s take a look at the
HTML label and input type:
label
The label is input Element definition annotation (tag). The
label element does not present any special effects to the user. However, it improves usability for mouse users. This control is triggered if you click on the text inside the label element. That is to say, when the user selects the label, the browser will automatically turn the focus to the form control related to the label.
The for attribute of the label should be the same as the id attribute of the related element.
Input Type: checkbox
Define the checkbox.
Checkboxes allow the user to select zero or more options from a limited number of options.
The following is the code of the 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>
<p class="demo">
<!-- label绑定checkbox -->
<label for="menu-checkbox"><span class="glyphicon glyphicon-menu-hamburger"></label>
<input id="menu-checkbox" type="checkbox">
<p class="nav">
<ul>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
<li>ddd</li>
</ul>
</p>
</p>
</body>
</html> Copy after login
I believe you have mastered the method after reading the case in this article, more exciting Please pay attention to other related articles on php Chinese website!
Recommended reading:
Summary of how to use nodejs log module winston
Detailed explanation of the steps to implement full-screen scrolling plug-in in ES6
The above is the detailed content of Make menu open and close without JS. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
