關閉屏幕導航 - 右側和左側 - 只有css

Question

我試圖創建一個只有css的左右屏幕導航抽屜，而且我遇到了各方正常工作的問題。

我使用複選框作爲我的按鈕是這樣的：

<input type="checkbox" id="toggle-right"> 
<input type="checkbox" id="toggle-left"> 

如果我有頂部撥動合適的地方再右邊的抽屜打開，但不是左側。

如果我扭轉這樣的順序：

<input type="checkbox" id="toggle-left"> 
<input type="checkbox" id="toggle-right"> 

切換留下的工作，但沒有切換正確的。

我做了一個JSFiddle向你展示我的意思。

如果有人有時間看一看，並幫助我弄清楚這一點，我將不勝感激。

在查看JSFiddle時，將該複選框的順序顛倒以查看我在說什麼。

Answer 1

問題在於使用+ - 鄰接兄弟選擇器。由於它僅適用於複選框的下一個元素，因此它只適用於其中一個元素。解決方案是使用~ - 一般兄弟選擇器。

header { 
 
    width: 100%; 
 
    height: 90px; 
 
    background-color:#f1f1f1;} 
 

 
.menu-toggle { 
 
    text-decoration: none; 
 
    text-align: center; 
 
    width: 44px; 
 
    height: 44px; 
 
    font-size: 30px; 
 
    color: rgba(0, 0, 0, 0.5); 
 
    -webkit-transition: all 0.15s ease-out 0s; 
 
    -moz-transition: all 0.15s ease-out 0s; 
 
    transition: all 0.15s ease-out 0s; 
 
    position: absolute; 
 
    top: 0px; 
 
    right: auto; 
 
    bottom: 0; 
 
    left: 20px; 
 
    z-index: 2; } 
 

 
.menu-toggle:hover { 
 
    color: #000000; } 
 

 
#toggle-left { 
 
    display: none; } 
 
#toggle-left:checked ~ .page-wrap nav.menu { 
 
    left: 0px; } 
 
#toggle-left:checked ~ .page-wrap .menu-toggle { 
 
    left: 220px; } 
 

 
.profile-toggle { 
 
    text-decoration: none; 
 
    text-align: center; 
 
    width: 44px; 
 
    height: 44px; 
 
    font-size: 30px; 
 
    color: rgba(0, 0, 0, 0.5); 
 
    -webkit-transition: all 0.15s ease-out 0s; 
 
    -moz-transition: all 0.15s ease-out 0s; 
 
    transition: all 0.15s ease-out 0s; 
 
    position: absolute; 
 
    top: 0px; 
 
    right: 40px; 
 
    bottom: 0; 
 
    left: auto; 
 
    z-index: 2; } 
 

 
.profile-toggle:hover { 
 
    color: #000000; } 
 

 
#toggle-right { 
 
    display: none; } 
 
#toggle-right:checked + .page-wrap nav.profile { 
 
    right: 0px; } 
 
#toggle-right:checked + .page-wrap .profile-toggle { 
 
    right: 220px; } 
 

 
nav.menu { 
 
    position: fixed; 
 
    top: 0px; 
 
    right: auto; 
 
    bottom: 0px; 
 
    left: -270px; 
 
    -webkit-transition: all 0.15s ease-out 0s; 
 
    -moz-transition: all 0.15s ease-out 0s; 
 
    transition: all 0.15s ease-out 0s; 
 
    height: auto; 
 
    width: 200px; 
 
    background: #111111; 
 
    z-index: 2000; } 
 

 

 
nav.profile { 
 
    position: fixed; 
 
    top: 0px; 
 
    right: -270px; 
 
    bottom: 0px; 
 
    left: auto; 
 
    -webkit-transition: all 0.15s ease-out 0s; 
 
    -moz-transition: all 0.15s ease-out 0s; 
 
    transition: all 0.15s ease-out 0s; 
 
    height: auto; 
 
    width: 200px; 
 
    background: #990000; 
 
    z-index: 2000; }

<input type="checkbox" id="toggle-left"> 
 
<input type="checkbox" id="toggle-right"> 
 

 
<div class="page-wrap"> 
 
    <header> 
 
    <div class="top-bar"> 
 
     <label for="toggle-left" class="menu-toggle">☰</label> 
 
     <label for="toggle-right" class="profile-toggle"><b>+</b></label> 
 
    </div> 
 
    <div class="middle-line"></div> 
 
    <div class="bottom-bar"></div> 
 
    </header> 
 

 
    <nav class="menu"> 
 
    </nav> 
 

 
    <nav class="profile"> 
 

 
    </nav>