关闭屏幕导航 - 右侧和左侧 - 只有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>