Google Nexus Menu v2

HTML

<div class="container">
  <ul id="gn-menu" class="gn-menu-main">
    <li class="gn-trigger">
      <a class="gn-icon gn-icon-menu"><span>Menu</span></a>
      <nav class="gn-menu-wrapper">
        <div class="gn-scroller">
          <ul class="gn-menu">
            <li class="gn-search-item">
              <input placeholder="Search" type="search" class="gn-search">
                <a class="gn-icon gn-icon-search"><span>Search</span></a>
                </li>
              <li>
                <a class="gn-icon gn-icon-download">Downloads</a>
                <ul class="gn-submenu">
                  <li><a class="gn-icon gn-icon-illustrator">Vector Illustrations</a></li>
                  <li><a class="gn-icon gn-icon-photoshop">Photoshop files</a></li>
                </ul>
              </li>
              <li><a class="gn-icon gn-icon-cog">Settings</a></li>
              <li><a class="gn-icon gn-icon-help">Help</a></li>
              <li>
                <a class="gn-icon gn-icon-archive">Archives</a>
                <ul class="gn-submenu">
                  <li><a class="gn-icon gn-icon-article">Articles</a></li>
                  <li><a class="gn-icon gn-icon-pictures">Images</a></li>
                  <li><a class="gn-icon gn-icon-videos">Videos</a></li>
                </ul>
              </li>
              </ul>
            </div><!-- /gn-scroller -->
          </nav>
        </li>
      <li><a href="">Header Link</a></li>
      <li><a href=""><span>Previous</span></a></li>
      <li><a href=""><span>Right</span></a></li>
      </ul>
      <header>
        Hi
      </header>
    </div><!-- /container -->

CSS

body { background: grey; }
    
.gn-menu-main,
.gn-menu-main ul {
		margin: 0;
		padding: 0;
		background: white;
		color: #5f6f81;
		list-style: none;
		text-transform: none;
		font-weight: 300;
		font-family: 'Lato', Arial, sans-serif;
		line-height: 60px;
}

.gn-menu-main {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 60px;
		font-size: 13px;
}

.gn-menu-main a {
		display: block;
		height: 100%;
		color: #5f6f81;
		text-decoration: none;
		cursor: pointer;
}

.no-touch .gn-menu-main a:hover,
.no-touch .gn-menu li.gn-search-item:hover,
.no-touch .gn-menu li.gn-search-item:hover a {
		background: #5f6f81;
		color: white;
}

.gn-menu-main > li {
		display: block;
		float: left;
		height: 100%;
		border-right: 1px solid #c6d0da;
		text-align: center;
}

/* icon-only trigger (menu item) */

.gn-menu-main li.gn-trigger {
		position: relative;
		width: 60px;
		-webkit-touch-callout: none;
		-webkit-user-select: none;
		-khtml-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
}

.gn-menu-main > li:last-child {
		float: right;
		border-right: none;
		border-left: 1px solid #c6d0da;
}

.gn-menu-main > li > a {
		padding: 0 30px;
		text-transform: uppercase;
		letter-spacing: 1px;
		font-weight: bold;
}

.gn-menu-main:after {
		display: table;
		clear: both;
		content: "";
}

.gn-menu-wrapper {
		position: fixed;
		top: 60px;
		bottom: 0;
		left: 0;
		overflow: hidden;
		width: 60px;
		border-top: 1px solid #c6d0da;
		background: white;
		-webkit-transform: translateX(-60px);
		-moz-transform: translateX(-60px);
		transform: translateX(-60px);
		-webkit-transition: -webkit-transform 0.3s, width 0.3s;
		-moz-transition: -moz-transform 0.3s, width 0.3s;
		transition: transform 0.3s, width 0.3s;
}

.gn-scroller {
		position: absolute;
		overflow-y: scroll;
		width: 370px;
		height: 100%;
}

.gn-menu {
		border-bottom: 1px solid #c6d0da;
		text-align: left;
		font-size: 18px;
}

.gn-menu...

JavaScript

var BaseMenu = (function(){
  var el, trigger, menu, isMenuOpen;
  var _init,
      _initEvents,
      _openIconMenu,
      _closeIconMenu,
      _openMenu,
      _closeMenu,
      _setMenuElement;
  
  _init = function() {
    trigger = el.querySelector('a.gn-icon-menu');
    menu = el.querySelector('nav.gn-menu-wrapper');
    isMenuOpen = false;
    _initEvents();
  };
  
  _initEvents = function() {
    trigger.addEventListener( 'mouseover', function(ev) { _openIconMenu(); } );
    trigger.addEventListener( 'mouseout', function(ev) { _closeIconMenu(); } );
    menu.addEventListener('mouseover', function(ev) {
      _openMenu();
      console.log("add click to close");
      document.addEventListener('click',BaseMenu.bodyClickFn);
    });
  };
  
  _openIconMenu = function() {
    $(menu).addClass('gn-open-part');
  };
  
  _closeIconMenu = function() {
    $(menu).removeClass('gn-open-part');
  };
  
  _openMenu  = function() {
    if( isMenuOpen ) return;
    $(trigger).addClass('gn-selected');
    isMenuOpen = true;
    $(menu).addClass('gn-open-all');
    _closeIconMenu();
  };
  
  _closeMenu = function() {
    if( !isMenuOpen ) return;
    $(trigger).removeClass('gn-selected');
    isMenuOpen = false;
    $(menu).removeClass('gn-open-all');
    _closeIconMenu();
  };

  _setMenuElement = function(e) {
    el = e;
  };
  
  return {
    gnMenu: function(element) {
      _setMenuElement(element);
      _init();
    },
    bodyClickFn: function() {
      _closeMenu();
      console.log("click to close");
      document.removeEventListener('click',BaseMenu.bodyClickFn);
    }
  };
})();

$(document).ready(function() {
  BaseMenu.gnMenu(document.getElementById('gn-menu'));
});