如何将汉堡菜单移动到覆盖菜单的前面

Question

如何将汉堡菜单移动到覆盖菜单前面，同时保持其位置从移动设备到桌面？这是codepen上的示例

下面是我的代码

HTML

<nav>            
      <button class="hamburger hamburger--squeeze" type="button">
        <span class="hamburger-box"> 
         <span class="hamburger-inner"></span>
        </span>
      </button>

     <div class="overlay">
        some list elements go here
     </div>
</nav>

CSS

.overlay{
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: transparentize($darkest-grey,0.01);
  overflow: auto;
  z-index: 99;
  text-align: center;
  padding-top: 100px;

li{
    list-style: none;
  }
}

.is-active{
    display: block;
}

JavaScript

 <script>
      var hamburger = document.querySelector(".hamburger");
      var overlayMenu = document.querySelector(".overlay");
      hamburger.addEventListener("click", function() {
        hamburger.classList.toggle("is-active");
        overlayMenu.classList.toggle("is-active");
      });
 </script>

我也在使用Bourbon neat 和Hamburgers。如果有更优雅的方法，请告诉我:) 谢谢！

Answer 1

你需要一个更高的z-index 来做火腿。

请记住 z-index 仅适用于定位元素，您需要更改按钮的默认静态位置。

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: rgba(0,0,0,.3);
  overflow: auto;
  z-index: 99;
  text-align: center;
  padding-top: 100px;
}

.is-active {
  display: block;
  position:relative;
  z-index:100;
}

<nav>
  <button class="hamburger hamburger--squeeze is-active" type="button">
    <span class="hamburger-box"> 
         <span class="hamburger-inner">button</span>
    </span>
  </button>

  <div class="overlay">
    some list elements go here
  </div>
</nav>