Question

基本上，我的移动Web应用程序上有导航栏，我想知道如何在打开导航栏时在后台隐藏/移动所有内容。

我想打开导航栏时必须使用“ display：none”，但不知道如何操作（我是Web开发的新手）。

@media only screen and (max-width: 500px) {
**label** {
    display: block;
    cursor: pointer;
}

**.menu** {
    text-align: center;
    width: 100%;
    display: none;
}

**.menu a** {
    display: block;
    border-bottom: 1px solid #EAEAEB;
    margin: 0;

}

**#toggle:checked + .menu** {
    display: block;
}

在此示例中，我想在打开导航栏或将其移动到我拥有的选项下方时将其隐藏在背景中。

P.S：我正在将复选框技巧与汉堡标志的UTF Unicode一起使用。

Answer 1

我本人对Web开发还很陌生，但是我可以告诉您我是如何在一个网站上做到这一点的。

一旦切换了菜单，我将使用JS向要隐藏的元素添加一个类，并在关闭菜单时再次删除该类。然后可以在CSS中设置此类的样式，例如不透明。

对我来说效果很好，但是如果有更好的方法可以做到这一点，我很想听听其他选择！

Answer 2

我认为您问题的解决方案是简单的JavaScript代码。克里斯苏（Chrissu）说过，您可以在单击“汉堡包”时在导航栏中添加和删除类。

“：checked”伪选择器只能应用于某些类型的元素， https://www.w3schools.com/cssref/sel_checked.asp->（仅适用于单选按钮和复选框）

您可以通过两种方式解决问题：

1）（推荐）将新的导航栏高度设置为100％，这将使页面的其余元素向下滑动。

2）展开时将导航栏的绝对位置设置为导航栏，这样它就会脱离页面中所有元素的流动，并且可以与其他元素重叠。（https://css-tricks.com/almanac/properties/p/position/）

下面是一些有关如何解决此问题的代码。

var el=document.getElementById("hamburger");
el.addEventListener('click',expand);

function expand(){
  if($("nav").hasClass("expanded")){
    $("nav").removeClass("expanded");
  }
    else
  $("nav").addClass("expanded");
}

*{
  margin:0;
  position:relative;
}

.container{
  width:203px;
  height:300px;
  background-color: #000;
}

body{
  height:100%;
  display:flex;
  justify-content:space-around;
  align-items:center;
}

html{
  height:100%;
}

nav{
  background-color: green;
  overflow:auto;
  
}

.c_hamburger{
  color:#FFF;
  background-color: grey;
  cursor:pointer;
  padding:1em;
  display:inline-block;
  float:right;
}

.expanded{
  height:100%;
  
}

*, *:before, *:after {
  box-sizing: border-box;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  
  <nav>    
    <div class="c_hamburger" id="hamburger">
      <h1>H</h1>
    </div>
    
  </nav>
</div>

这里我使用的是JavaScript库Jquery。

在移动设备上打开导航栏时如何隐藏或移动背景？

2 个答案: