A Pen by Anthony Mann.

index.html

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Categories</a></li>
    <li><a href="#">Blog</a></li>
  </ul>
</nav>

<div class="content">
  <div id="menu">Menu</div>
</div>

script.js

var $listEls = $('nav li a');
var $draggable = $('.content');
var $menuButton = $('#menu');

var maxX = 200;

var drag = Draggable.create($draggable, {
  type: 'x',
  throwProps: true,
  onClick: buttonClicked,
  trigger: $menuButton,
  bounds:{
    maxX: maxX,
    minX: 0
  },
  edgeResistance:0.8,
  onThrowUpdate: updateMenu,
  onDrag: updateMenu,
  snap: snapTo
});

drag[0].vars.cursor = "pointer";

var menuListTl = new TimelineLite();

menuListTl.staggerFrom($listEls, 3, {
  x: -20,
  transformPerspective:100,
  ease: Sine.easeOut
})

menuListTl.pause();

function updateMenu(val){

  menuListTl.progress(  ((this.x || val || 0) / maxX).toFixed(2) )
  
}

function buttonClicked(){
  // Force update the draggable
  drag[0].update()
  
  TweenLite.to($draggable, 1, {    
    x: drag[0].x === 0 ? maxX : 0,
    onComplete: drag[0].update,
    onUpdate: function(){
      updateMenu(this.target[0]._gsTransform.x || 0);
    },
    ease: Elastic.easeOut.config(1, 1)
  })
};

function snapTo(){
  return this.x < (maxX/2) ? 0 : maxX
}

style.scss

body {
  font-family: Helvetica Neue;
  overflow:hidden;
}
  
ul {
  padding: 0;
  margin: 0;

  li {
    list-style: none;
    padding: 0;
    margin: 0;
  }
}

nav {
    display: block;
    height: 100%;
    width: 100%;
    position: absolute;
    padding: 10px;
  
    background-color: #000;
    
    li {
      padding: .5em 0;
      font-size: 1.5em;
      position: relative;
      height: 1em;
      a {
        color: white;
        position: absolute;
        text-decoration: none;
      }
    }
}
      
.content {
  background: grey;
  border-radius: 2px 2px 0 0;
  width: 100%;
  height: 100%;
  position: absolute;
}

#menu {
  border: none;
  text-indent: -100%;
  margin: 1em 1.5em;
  width: 60px;
  height: 60px;
  position: absolute;
  cursor: pointer;
}

#menu:before {
    font-size: 2.5em;
    content: "";
    top: 0.25em;
    left: 0;
    position: absolute;
    width: 1em;
    height: 0.125em;
    border-top: 0.375em double #000;
    border-bottom: 0.125em solid #000;
}

ymzju.markdown

ymzju

A Pen by Anthony Mann on CodePen.

License.