Maison > Questions et réponses > le corps du texte
J'aimerais avoir un menu de navigation dans le panneau latéral avec la possibilité de passer aux vues via un menu hamburger animé. Je veux le créer en utilisant uniquement CSS et non n'importe quel JS.
:checked
Les pseudo-cours semblent être la voie à suivre, mais je n'arrive pas à les faire fonctionner. Code que j'ai jusqu'à présent :
.site-navigation { z-index: 99; background-color: rgba(0, 0, 0, 0.8); position: fixed; top: 0; left: 0; width: 40%; height: 100%; opacity: 0; visibility: hidden; transition: all 0.3s ease-in-out; } .toggle-btn { display: block; position: fixed; z-index: 10; right: 10px; top: 10px; cursor: pointer; } .toggle-btn .bar { width: 30px; height: 2px; margin: 7px auto; background-color: #fff; transition: all 0.3s ease-in-out; box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.3); } .toggle-btn .bar:nth-child(2) { width: 28px; } #toggle { display: none; } #toggle:checked~.site-navigation { display: block; opacity: 1; visibility: visible; } #toggle:checked~nav ul { top: 70px; } #toggle:checked~nav ul li { transform: translateY(0px); opacity: 1; } #toggle:checked+label.toggle-btn .bar { background-color: #efefef; } #toggle:checked+label.toggle-btn .bar:nth-child(2) { opacity: 0; } #toggle:checked+label.toggle-btn .bar:nth-child(1) { transform: translateY(10px) rotate(45deg); } #toggle:checked+label.toggle-btn .bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
<header id="masthead" class="site-header" role="banner"> <div class="container"> <div id="brand"> <h1 class="site-title"><a href="#">Nice site</a></h1> </div> <div id="menu"> <input type="checkbox" id="toggle"> <label class="toggle-btn toggle-btn__cross" for="toggle"> <div class="bar"></div> <div class="bar"></div> <div class="bar"></div> </label> </div> <div class="clear"></div> </div> <!--/container --> <!-- .site-navigation .main-navigation --> <nav role="navigation" id="navigation" class="site-navigation main-navigation"> <span class="menuLabel">menu</span> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">News</a></li> <li><a href="#">Contact</a></li> </ul> </nav>
Toute aide et/ou conseil serait grandement apprécié !
P粉0644484492024-04-07 00:23:59
Corrigez une faute de frappe dans CSS et déplacez l'élément INPUT à l'extérieur #menu
Pour donner du sens à cette ligne de CSS
#toggle:checked ~ .site-navigation {
Il existe une autre façon, c'est d'utiliser :has()
mais je m'en tiendrai à cette solution plus simple.