<div class="menu">
  <div class="line"></div>
  <nav>
    <ul>
      <li><a target="_parent" href="https://codepen.io/luigimannoni/pen/yyzBrM">WebGL Atom</a></li>
      <li><a target="_parent" href="https://codepen.io/luigimannoni/pen/xbLgqB">WebGL Soundcloud Visualizer</a></li>
      <li><a target="_parent" href="https://codepen.io/luigimannoni/pen/NPgGpX">Playing with particles and transparencies</a></li>
      <li><a target="_parent" href="https://codepen.io/luigimannoni/pen/hInlF">Cube Soundcloud Visualizer</a></li>
    </ul>
  </nav>
</div>
<div class="main">
  <p>This is my page content</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur possimus odio, magnam sint aspernatur, nihil eum officia, non at qui esse consequatur porro vero! Sed debitis voluptatum, eligendi laudantium. Placeat!</p>
</div>

@import "compass/css3";

$square: 50px;
* {
  @include box-sizing(border-box);
}
body {
  background: #111;
  font: 300 14px Consolas, system, monospace;
  color: #fff;
}
.menu {
  position: fixed; 
  height: $square;
  width: $square;
  cursor: pointer;
  top: 0;
  left: 0;
  background: #fff;
  @include transition(all 250ms ease-in-out);
  z-index: 100;
  overflow: hidden;
  nav {
    position: fixed;
    left: 50%;
    top: 50%;
    @include transform(translateY(-50%) translateX(-50%));
    opacity: 0;
    @include transition(all 250ms linear 250ms);
    pointer-events: none;
    ul {
      list-style-type: none;
      padding: 0;
      li a {
       
        display: block;
        padding: 10px;
        text-decoration: none;
        color: #000;
        text-align: center;
        &:hover {
          background: #000;
          color: #fff;
        }
      }
    }
  }
  .line {
    height: 5px;
    width: $square - 10;
    background: #000;
    position: absolute;
    top: ($square/2)-(5/2);
    left: ($square - ($square - 10))/2;
    @include transition(all 250ms linear);
    &:after, &:before {
      content: ' ';
      height: 5px;
      width: $square - 10;
      background: #000;
      position: absolute;
      @include transition(all 250ms linear);
    }
    &:before {
      top: -10px;
    }
    &:after {
      bottom: -10px;
    }
  }
  &.active {
    width: 100%;
    height: 100%;
    nav {
      opacity: 1;
      pointer-events: all;
    }
    .line {
      background: transparent;
      &:before {
        background: #000;
        @include transform(rotate(-405deg));
        top: 0px;
      }
      &:after {
        background: #000; 
        @include transform(rotate(405deg));
        bottom: 0px;
      }
    }
  }
}
.main {
  position: absolute;
  left: 50%;
  top: 50%;
  @include transform(translateY(-50%) translateX(-50%));
  width: 460px;
  text-align: center;
}

$('.menu').click(function(){
  $this = $(this);
  if ($this.hasClass('active')) {
    $this.removeClass('active');
  }
  else {
    $this.addClass('active');    
  }

  
});