Question

单击该复选框后，margin:left的{{1}}应该会增加并进入屏幕。再次单击时，它应该减少并离开屏幕。它没有这样的工作。我的代码有什么问题？

Html

nav

风格

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

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>

Answer 2

这样的事情是否适合您的需求？正如你所看到的，我没有使用保证金，而是使用了仓位，如果你想能够滚动你的导航标签，我想你总是可以在嵌套的div中使用溢出？

我将min-height设置为该高度，因为vh在旧浏览器中不起作用，因此它是一个足够简单的备份解决方案。您也可以使用一些JS来计算您希望它到精确像素的高度，但是不使用任何JS，我认为这是一个足够好的解决方案？

body {
  background: white;
}

body label {
    position: fixed;
    display: block;
    margin-left:-100px; 
    margin-top: -115px; 
    z-index:99;
}

#res-nav {
  position: fixed;
  height: 20px;
  width: 40px;
  top: 0;
  left: calc(50% - 20px);
}

nav{
    position: fixed;
    left: -9999px;
    z-index: 999999;
    top: 20px;
    background: rgba(0, 0, 0, 0.75);
    transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
    -webkit-transition: all 0.5s;
    width: 100%;
    height: 100vh;
    min-height: 9999px;
    max-height: 100vh;
}

nav * {
  color: white;
}

#res-nav:checked ~ nav {
  left: 0;
}

<div>
  <input type="checkbox" id="res-nav">
  <label for="res-nav"><i class="fa fa-reorder" style="font-size:36px"></i></label>
  <nav>
    <ul>
      <li><a href="#">hello world</a></li>
    </ul>
  </nav>
</div>

Answer 3

这是你在找什么？

.nav{
    margin-left:-120px;
    transition: all 0.5s;
}

#res-nav:checked ~ .nav {
    margin-left: 10px;
}

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

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

3 个答案: