Trying to create an interactive hamburger menu
<p>I am trying to create a hamburger menu. This is my progress so far:
<a href="http://codepen.io/Dingerzat/pen/EgAdLN" rel="nofollow">http://codepen.io/Dingerzat/pen/EgAdLN</a></p>

<pre class="lang-html prettyprint-override"><code>&lt;div class="bar"&gt;&lt;/div&gt; 
    &lt;nav&gt;
        &lt;ul role="navigation" class="hidden"&gt;
            &lt;li&gt;&lt;a href="#"&gt;WORK&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;ABOUT&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;RESUME&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;CONTACT&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/nav&gt;
&lt;/div&gt;
</code></pre>

<pre class="lang-js prettyprint-override"><code>( function () {

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

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

    } );

} )();
</code></pre>

<pre class="lang-css prettyprint-override"><code>/* 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;

  &amp;.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;

  &amp;.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;
      &amp;:hover {
        background-color: rgba(0,0,0,0.5);
      }
    }
}
</code></pre>

<p>I have been bolting together a few bits of code I like with mixed success.</p>

<p>I want to create something like: <a href="https://bert.house/en/" rel="nofollow">https://bert.house/en/</a></p>

<p>But what I am having issues with, is that when I click on any of my navigation links it closes the menu. Also I am unsure how to get my menu to appear in the centre of the screen over everything else (like on the bert website). I also am unsure how to create the vanishing MENU word at the right side of the burger menu on the bert site.</p>

<p>I am pretty new to this, my html experience prior to this has been building emails rather than actual websites. So any help would be brilliant.</p>