Ouvrir et fermer le menu sans JS-js tutoriel-php.cn

Ouvrir et fermer le menu sans JS

php中世界最好的语言

Libérer： 2018-06-01 13:52:54

original

1660 Les gens l'ont consulté

Cette fois, je vais vous apporter quelques précautions sur la façon d'ouvrir et de fermer le menu sans utiliser JS. Jetons un coup d'œil ci-dessous.

Lorsque j'écris une page Web avec une barre de menu, j'utilise essentiellement un design réactif pour m'adapter au terminal mobile, comme masquer les options de menu sans importance, ou créer un bouton de menu pour contrôler l'ouverture et la fermeture du menu. . Quelque chose comme ça. J'ai toujours utilisé JavaScript pour ouvrir et fermer le menu, mais récemment j'ai vu quelqu'un utiliser CSS et HTML pour implémenter cette fonction sur Internet, ce qui m'a vraiment fait sentir que tant que j'ai un marteau dans mon main, tout peut être transformé en ongles.

Avant l'implémentation, jetons un coup d'œil à la balise HTML et au type d'entrée :

label

label ne présente aucun effet spécial à l'utilisateur. Cependant, cela améliore la convivialité pour les utilisateurs de souris. Ce contrôle est déclenché si vous cliquez sur le texte à l'intérieur de l'élément label. C'est-à-dire que lorsque l'utilisateur sélectionne l'étiquette, le navigateur mettra automatiquement le focus sur le contrôle de formulaire lié à l'étiquette.

L'attribut for de l'étiquette doit être le même que l'attribut id de l'élément associé.

Type d'entrée : case à cocher

<input type="checkbox"> Définissez la case à cocher.

Les cases à cocher permettent à l'utilisateur de sélectionner zéro ou plusieurs options parmi un nombre limité d'options.

Ce qui suit est le code de démonstration :

<!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>

Copier après la connexion

Effet :

Cliquez sur l'icône hamburger ci-dessus, le menu s'affichera et caché.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Comment utiliser vue pour passer de la page de liste à la page de détails via l'identifiant

Comment pour utiliser les emplacements dans le composant parent de la distribution Vue Slot

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!