如何在单击菜单按钮时进行全屏覆盖

Question

我有一个菜单按钮，当我点击它时，我想要触发一个全屏幕的导航覆盖。然后，当再次单击该按钮时，我希望它消失。

正如你所看到的，我已经设置了菜单按钮动画，我只是不知道如何添加和切换覆盖导航。

谢谢

http://codepen.io/anon/pen/PNEBVE

    <header class="container">
  <a id="hamburger-icon" href="#" title="Menu">
      <span class="line line-1"></span>
      <span class="line line-2"></span>
      <span class="line line-3"></span>
  </a>

  <div class="main">
    <h1>Page content</h1>
  </div>
</header>

Answer 1

您可以尝试向nav元素添加一个简单的toggle()。

在这两个示例中，您只需在.hamburger-icon之前添加一个<nav></nav>

你可以在这里看到一个简单的例子，toggle()只是将display从none切换到block，这并不奇怪：

http://codepen.io/sonnyprince/pen/aNEjgv

JS

$( document ).ready(function() {
  var hamburger = $('#hamburger-icon');
  var nav = $('nav');
  hamburger.click(function() {
    nav.toggle();
     hamburger.toggleClass('active');
     return false;
  });
});

和CSS

nav {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  background: red;
  position: fixed;
}

就我个人而言，如果你也喜欢nav上的动画，我会在导航上切换一个类，只要你有一个0的max-height在它的初始状态，你可以给它一点不透明度淡入或给它一点滑动-当它切换到时，带有顶部偏移的效果。

http://codepen.io/sonnyprince/pen/vGpaoZ

JS

$( document ).ready(function() {
  var hamburger = $('#hamburger-icon');
  var nav = $('nav');
  hamburger.click(function() {
    nav.toggleClass('shown');
     hamburger.toggleClass('active');
     return false;
  });
});

和CSS

nav {
  top: -50px;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  background: red;
  position: fixed;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: all 0.2s;
}
nav.shown {
  top: 0;
  opacity: 1;
  max-height: none
}

为了停止正文滚动，我通常会在noScroll的body和html上切换一个类。下面是CSS的一个示例：

html.noScroll, body.noScroll {
    max-height: 100%;
    overflow: hidden;
}

而JS将包含：

$('body, html').toggleClass('noScroll');

显然，您可以使用汉堡图标和导航将$('body, html')添加到您已有的变量中。