Home > Article > Web Front-end > Make menu open and close without JS

Make menu open and close without JS

php中世界最好的语言Original: 2018-05-14 14:20:331102browse

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>

Effect:

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!

Make menu open and close without JS

Related articles