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 demo code:
<!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> Effect:
Click the hamburger icon above, the menu will be displayed and hidden.
I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!
Recommended reading:
How to operate vue to jump from the list page to the details page through the id
How to use slots in Vue Slot distribution parent component
The above is the detailed content of Open and close menu without JS. For more information, please follow other related articles on the PHP Chinese website!
Statement： The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
