我希望在側面板中有一個導航選單,可以透過動畫漢堡選單切換到視圖。我想僅使用 CSS 創建它,而不使用任何 JS。
:checked
偽類別似乎是可行的方法,但我無法讓它工作。到目前為止我擁有的程式碼:
.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>
任何幫助和/或建議將不勝感激!
P粉0644484492024-04-07 00:23:59
修復 CSS 中的拼字錯誤,並將 INPUT 元素移到 #menu
之外
為了讓這行 CSS 有意義
#toggle:checked ~ .site-navigation {
還有另一種方法,就是使用 :has()
但我會堅持使用這個更簡單的解決方案。