Maison > Article > interface Web > Ouvrir et fermer le menu sans JS
Ouvrir et fermer le menu sans JS
- php中世界最好的语言original
- 2018-06-01 13:52:541606parcourir
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. Type d'entrée : 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 : 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!<input type="checkbox"> Définissez la case à cocher. <!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>
