尝试创建一个交互式汉堡包菜单

Question

我正在尝试创建一个汉堡包菜单。这是我目前的进展： http://codepen.io/Dingerzat/pen/EgAdLN

<div class="bar"></div> 
    <nav>
        <ul role="navigation" class="hidden">
            <li><a href="#">WORK</a></li>
            <li><a href="#">ABOUT</a></li>
            <li><a href="#">RESUME</a></li>
            <li><a href="#">CONTACT</a></li>
        </ul>
    </nav>
</div>

( function () {

    $('.hamburger-menu').on('click', function() {

        $( '.bar' ).toggleClass( 'animate' );
        $( '.bar' ).toggleClass( "on" );
        $( "nav ul" ).toggleClass( 'hidden' );

    } );

} )();

/* SCSS */
@import "compass/css3";

$bar-width: 50px;
$bar-height: 4px;
$bar-spacing: 15px;

body {
    background: #000000;
}

.hamburger-menu {
    position: absolute;
  top: 20px;
  left: 25px;
  margin: auto;
  width: $bar-width;
    height: $bar-height + $bar-spacing*2;
    cursor: pointer;
}

.bar,
.bar:after,
.bar:before {
  width: $bar-width;
    height: $bar-height;
}

.bar {
    position: relative;
    transform: translateY($bar-spacing);
    background: rgba(155, 255, 255, 1);
    transition: all 0ms 300ms;

  &.animate {
    background: rgba(255, 255, 255, 0); 
  }
}

.bar:before {
    content: "";
    position: absolute;
    left: 0;
    bottom: $bar-spacing;
    background: rgba(155, 255, 255, 1);
    transition: bottom 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
}

.bar:after {
    content: "";
    position: absolute;
    left: 0;
    top: $bar-spacing;
    background: rgba(155, 255, 255, 1);
    transition: top 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
}

.bar.animate:after {
    top: 0;
    transform: rotate(45deg);
    transition: top 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);;
}

.bar.animate:before {
    bottom: 0;
    transform: rotate(-45deg);
    transition: bottom 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);;
}

nav ul{
  margin: 0;
  padding: 0;
  font-family: Open Sans;
  font-weight: bold;
  font-size: 0.8em;
  list-style: none;
  margin: 4em auto;
  text-align: center;

  &.hidden {
    display: none;
  }

    a {
    @include transition-duration(0.5s);
    text-decoration: none;
    color: white;
    font-size: 3em;
    line-height: 1.5;
    width: 100%;
    display: block;
      &:hover {
        background-color: rgba(0,0,0,0.5);
      }
    }
}

我一直在把我喜欢的一些代码拼凑起来并取得了不同的成功。

我想创建类似：https://bert.house/en/

的内容

但我遇到的问题是，当我点击任何导航链接时，它会关闭菜单。另外，我不确定如何让我的菜单出现在屏幕中央而不是其他所有内容（例如在bert网站上）。我也不确定如何在bert网站的汉堡菜单的右侧创建消失的MENU字。

我对此很陌生，我之前的html体验是构建电子邮件而不是实际网站。所以任何帮助都会很棒。

Answer 1

1）＆＃34;我的导航链接关闭菜单＆＃34;

那是因为您的导航链接位于.hamburger-menu内。附加到.hamburger-menu的点击处理程序将接收嵌套在其中的任何元素的click事件表单，除非取消甚至取消。

要解决此问题，请执行以下操作之一：

1. 将菜单移至.hamburger-menu。
之外
2. 在事件到达.hamburger-menu之前取消该事件。使用event.preventDefault()。
3. 检查click事件的source元素，确保它来自.hamburger-menu，而不是嵌套在其中的元素。使用event.target。

2）＆＃34;如何让我的菜单显示在屏幕中央＆＃34;

您可以使用绝对定位和翻译。首先，从包含的叠加元素的顶部开始告诉它为50％。然后，通过翻译将导航高度调高50％。你这样做是因为top: 50%;将导航的上边缘放在叠加层的中间而不是过度中间的导航中间。

＆＃13;
＆＃13;
.overlay {
  position: absolute;
  margin: 1.5rem;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  color: #333;
  background-color: #ffcc00;
}
ul,
li {
  margin: 0;
  padding: 0;
}
ul {
  position: absolute;
  top: 50%;
  width: 100%;
  transform: translateY(-50%);
  text-align: center;
}
ul li {
  display: inline;
  margin: 0 0.5rem;
}
＆＃13;
<p>
  Something for you to look at.
</p>

<div class="overlay">
  <ul>
    <li><a href="#">One</a>
    </li>
    <li><a href="#">Two</a>
    </li>
    <li><a href="#">Three</a>
    </li>
  </ul>
</div>
＆＃13;
＆＃13;
＆＃13;

3）＆＃34;我也不确定如何创建消失的MENU字＆＃34;

您需要转换元素opacity，将其设置为零。文本也会稍微移到一边，然后沿着它的X轴用translateX()制作动画。

例如：

.text {
    transition: all 350ms ease-in-out;
    transform: translateX( 0 );
}
.show .text {
    opacity: 0;
    transform: translateX( -10px );
}

JS Notes

jQuery是可链接的，所以可以改变：

$( '.bar' ).toggleClass( 'animate' );
$( '.bar' ).toggleClass( "on" );

到

$( '.bar' ).toggleClass( 'animate' ).toggleClass( "on" );

您还可以为toggleClass提供多次课程，以便更改：

$( '.bar' ).toggleClass( 'animate' ).toggleClass( "on" );

到

$( '.bar' ).toggleClass( 'animate on' );

我个人喜欢缓存元素，所以每次发生某个点击事件时我都不必查询DOM，所以我会这样做：

( function () {

    var $bar   = $( '.bar' );
    var $navUL = $( 'nav ul' );

    $( '.hamburger-menu' ).on( 'click', function () {

        $bar.toggleClass( 'animate on' );
        $navUL.toggleClass( 'hidden' );

    } );

} )();

您可能不会注意到您网站上的效果差异，但我认为在您应该/需要缓存对元素的引用时，这是一种很好的做法。