Saya ingin mempunyai menu navigasi di panel sisi dengan keupayaan untuk beralih kepada paparan melalui menu hamburger animasi. Saya mahu menciptanya hanya menggunakan CSS dan bukan mana-mana JS.
:checked
Kelas pseudo nampaknya adalah cara untuk pergi, tetapi saya tidak dapat melakukannya. Kod yang saya ada setakat ini:
.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>
Sebarang bantuan dan/atau nasihat akan sangat dihargai!
Betulkan kesilapan menaip dalam CSS dan alihkan elemen INPUT ke luar
#menu
Untuk menjadikan baris CSS ini masuk akal
Ada cara lain, iaitu menggunakan
:has()
tetapi saya akan kekal dengan penyelesaian yang lebih mudah ini.