html - 如何使用带有输入复选框的 html+css 制作响应式菜单？

Question

单击复选框时，nav 的margin:left 应该增加并进入屏幕。再次单击时，它应该会减小并离开屏幕。它不是那样工作的。我的代码有什么问题？

HTML

<input type="checkbox" id="res-nav">
<label for="res-nav"><i class="fa fa-reorder" style="font-size:36px"></i></label>

风格

 body label {
    position: fixed;
    display: block;
    margin-left:-100px; 
    margin-top: -115px; 
    z-index:99;
}

nav{
    margin-left:-130px;
    transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
    -webkit-transition: all 0.5s;
}

#res-nav:checked ~ nav {
    margin-left:50px;
}

Answer 1

label {
    position: fixed;
    display: block;
    margin-left:-100px; 
    margin-top: -115px; 
    z-index:99;
}

nav{
    margin-left:-9999px;
    transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
    -webkit-transition: all 0.5s;
    background:tomato;
    max-width:100vw;
}

#res-nav:checked ~ nav {
    margin-left:0;
}

<input type="checkbox" id="res-nav">
<label for="res-nav"><i class="fa fa-reorder" style="font-size:36px"></i>s</label>
<nav>Navbar</nav>