Maison > Article > interface Web > Faire ouvrir et fermer le menu sans JS

Faire ouvrir et fermer le menu sans JS

php中世界最好的语言original: 2018-05-14 14:20:331083parcourir

Cette fois, je vais vous apporter les 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>

Effet :

Je crois que vous maîtrisez la méthode après avoir lu le cas dans cet article, et plus encore Comme c'est excitant, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Un résumé de la façon d'utiliser le module de journal nodejs winston

Explication détaillée des étapes à mettre en œuvre plug-in de défilement plein écran dans ES6

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Explication détaillée des étapes pratiques pour réutiliser le contenu dans la distribution de machines à sous dans VueArticle suivant：Explication détaillée des étapes pratiques pour réutiliser le contenu dans la distribution de machines à sous dans Vue

Articles Liés

Voir plus