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>

如何将汉堡菜单移到叠加菜单的前面

1 个答案: