Question

我有一个菜单按钮，我想在点击时触发全屏导航覆盖。然后我想让它在再次点击按钮时消失。

如您所见，我已经设置了菜单按钮动画，我无法弄清楚如何添加和切换叠加导航。

由于

    <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

您可以尝试将简单的toggle()添加到导航元素。

使用这两个示例，您只需在<nav></nav>

之前添加.hamburger-icon即可

你可以在这里看到一个简单的例子，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上的动画，我会在导航上切换一个类，只要你的初始状态为max-height 0当它切换时，可以给它一点不透明度淡化或给它一点滑入效果，顶部偏移。

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
}

并停止正文滚动我通常会在body的{{1}}和html上切换一个班级。这是CSS的一个例子：

noScroll

并且JS将包含：

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

显然，您可以将$('body, html').toggleClass('noScroll');添加到汉堡包图标和导航中的变种中。

单击菜单按钮时如何进行全屏叠加

1 个答案: