html - 滑动菜单 : when check box is checked it moves to the right but the menu does not follow

Question

下面的代码用于滑动菜单，当复选框被选中时，它会向右移动，但菜单不会跟随。

肯定是一个愚蠢的错误，但找不到它。我已经在互联网上寻找了好几天的解决方案，而且我尝试了很多方法但没有任何帮助。

向右移动的复选框在<div class="menu_trigger">中

菜单是<nav class="nav"> - 这不是不动，而是应该。

HTML:

    <div class="menu_trigger">
    <input type="checkbox" id="nav-trigger" class="nav-trigger" />
    <label for="nav-trigger"></label>
</div>
<nav class="nav">
    <ul>
        <li class="block">
            <input type="checkbox" name="item" id="item1" />   
            <label for="item1"><i aria-hidden="true"></i>Home</label>
            <ul class="options">
                <li><a href="Text/Home.html"><i aria-hidden="true"></i>Home</a></li>
            </ul>
        </li>
        <li class="block">
            <input type="checkbox" name="item" id="item2" />   
            <label for="item2"><i aria-hidden="true"></i>French Tutoring</label>
            <ul class="options">
                <li><a href="Text/ChildrenKto12.html"><i aria-hidden="true"></i>Children K to 12</a></li>
                <li><a href="Text/Homeschool.html"><i aria-hidden="true"></i>Homeschool</a></li>
                <li><a href="Text/APFrenchSATtraining.html"><i aria-hidden="true"></i>AP French & SAT training</a></li>
            </ul>
        </li>
        <li class="block">
            <input type="checkbox" name="item" id="item3" />   
            <label for="item3"><i aria-hidden="true"></i>French Conversation</label>
            <ul class="options">
                <li><a href="Text/HighSchoolUniversity.html"><i aria-hidden="true"></i>High School & University</a></li>
                <li><a href="Text/BasicFrenchForTravellers.html"><i aria-hidden="true"></i>Basic French for Travelers</a></li>
                <li><a href="Text/RefreshYourFrench.html"><i aria-hidden="true"></i>Refresh your French</a></li>
            </ul>
        </li>
        <li class="block">
            <input type="checkbox" name="item" id="item4" />   
            <label for="item4"><i aria-hidden="true"></i>French Immersion</label>
            <ul class="options">
              <li><a href="Text/Workschops.html"><i aria-hidden="true"></i>Workschops</a></li>
              <li><a href="Text/SummerCamp.html"><i aria-hidden="true"></i>Summer Camp</a></li>
            </ul>
        </li>
        <li class="block">
            <input type="checkbox" name="item" id="item5" />   
            <label for="item5"><i aria-hidden="true"></i>About Us</label>
            <ul class="options">
                <li><a href="Text/ContactUs.html"><i aria-hidden="true"></i>Contact Us</a></li>
                <li><a href="Text/PageUnderConstruction.html"><i aria-hidden="true"></i>Testimonies</a></li>
                <li><a href="Text/PageUnderConstruction.html"><i aria-hidden="true"></i>Curriculum Vitae</a></li>
                <li><a href="Text/PageUnderConstruction.html"><i aria-hidden="true"></i>Reference letter</a></li>
                <li><a href="Text/PageUnderConstruction.html"><i aria-hidden="true"></i>Photos</a></li>
                <li><a href="Text/PageUnderConstruction.html"><i aria-hidden="true"></i>Links</a></li> 
            </ul>
        </li>
    </ul>
</nav>

这应该将菜单移动到屏幕中，但它没有。

.nav-trigger:checked ~ .nav {
position: absolute;
left: 0px;
}

CSS:

body {
font-family: 'Architects Daughter', cursive;
font-weight:normal;
font-size:12px;
padding-left:0;
padding-right:0;
}
.nav-trigger {
position: absolute;
clip: rect(0, 0, 0, 0);
}
label[for="nav-trigger"] {
position: fixed;
left: 15px;
top: 15px;
z-index: 2;
height: 30px;
width: 30px;
cursor: pointer;
background-color:orange;
}
.nav-trigger + label, .nav {
transition: left 0.2s;
}
.nav-trigger:checked + label {
left: 215px;
}
.nav-trigger:checked ~ .nav {
position: absolute;
left: 0px;
}
.nav {
position: absolute;
left: -280px;
}
ul {
list-style:none;
margin:0; 
padding:0;
width:250px;
margin:0 auto;
-moz-box-shadow: 0 0 5px #111;
-webkit-box-shadow: 0 0 5px #111;
box-shadow: 0 0 5px #111;
}
ul li label {
background: #3e3e3e;
border-top:1px solid:#ffffff;
border-bottom: 1px solid #ffffff;
color: #ffffff;
text-shadow: 0 1px 1px #000;
letter-spacing: 0.09em;
}
ul li input[type='checkbox'] {
display: none;
}
ul li label {
display:block;
padding:12px;
width:250px;
}
ul li i {
font-size:18px;
width:20px;
display:inline-block;
}
ul li span {
display:inline;
float:right;
background:#48515c;
border:1px solid #3c434c;
border-bottom:1px solid #707781;
padding:4px 6px;
font-size:10px;
-moz-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: inset 0 0 10px #111;
-webkit-box-shadow: inset 0 0 10px #111;
box-shadow: inner 0 0 10px #111;
position:relative;
}
ul li label:hover {
background: #3e3e3e;
}
ul li label:hover span {
background:#3e3e3e;
}
ul li input[type='checkbox']:checked ~ label {
background: #3e3e3e;
border-top:1px solid #878e98;
border-bottom:1px solid #878e98;
}
ul li input[type='checkbox']:checked ~ label span {
background: #3e3e3e;
border-top:1px solid #1b5f85;
border-bottom:1px solid #4cb1e4;
-moz-box-shadow: inset 0 0 5px #111;
-webkit-box-shadow: inset 0 0 5px #111;
box-shadow: inner 0 0 5px #111;
}
ul li input[type='checkbox']:checked ~ .options {
height: auto;
display:block;
min-height:40px;
max-height:400px;
}
ul ul {
background:#ffffff; margin:0; padding:0;
-moz-box-shadow: inset 0 2px 2px #b3b3b3;
-webkit-box-shadow: inset 0 2px 2px #b3b3b3;
box-shadow: inner 0 2px 2px #b3b3b3;
}
ul ul li a {
display:block;
padding:6px 12px;
color:#3e3e3e;
text-decoration:none;
}
ul ul li a:hover {
color: #05409A;
}
ul ul li a span {
color:#3e3e3e;
background:none;
border:1px solid #ccc; 
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
ul ul li {
border-bottom:1px solid #ccc;
}
ul ul li:first-child {
padding-top:6px;
}
ul ul li:last-child {
padding-bottom:6px; border:0;
}
.options {
    height: 0;
display: block;
overflow: hidden;
}

Answer 1

有趣的问题。通过以下更改，我想我已经找到了您正在寻找的答案:

替换:

.nav {
position: absolute;
left: -280px;
}

与:

.nav-trigger ~ .nav {
position: absolute;
left: -280px;
}

将 nav 元素移动到 menu_trigger div 中:

<div class="menu_trigger">
    <input type="checkbox" id="nav-trigger" class="nav-trigger" />
    <label for="nav-trigger"></label>
    <nav class="nav">
        ...
    </nav>
</div>

这将在检查触发器时激活 .nav-trigger:checked ~ .nav css。我相信 ~ 只适用于 sibling 。当 nav 位于 div 外部时，它不是 nav-trigger 元素的同级元素。

查看结果here .