<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">

<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="https://tympanus.net/codrops">Codrops</a>
        </li>
        <li><a class="codrops-icon codrops-icon-prev" href="https://tympanus.net/Development/HeaderEffects/"><span>Previous Demo</span></a>
        </li>
        <li><a class="codrops-icon codrops-icon-drop" href="https://tympanus.net/codrops/?p=16030"><span>Back to the Codrops Article</span></a>
        </li>
    </ul>
    <header>
        	<h1>Google Nexus Website Menu <span>A sidebar menu as seen on the <a href="https://www.google.com/nexus/index.html">Google Nexus 7</a> page</span></h1>	
    </header>
</div>
<!-- /container -->

@import "compass/css3";

$f-c: #5f6f81;

*, *:after, *:before{
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.gn-menu-main{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  height: 60px;
  font-size: 13px;
  a {
    display: block;
    height: 100%;
    color: $f-c;
    text-decoration: none;
    cursor: pointer;
    &:hover{
      background-color: $f-c;
      color: #fff;
    }
  }
  > li{
    display: block;
    float: left;
    height: 100%;
    border-right: 1px solid #c6d0da;
    text-align: center;
    >a{
      padding: 0 30px;
      text-transform: uppercase;
      letter-spacing: 1px;
      font-weight: bold;
    }
    :after{
      display: table;
      clear:both;
      content: '';
    }
  }
  li.gn-trigger{
    position: relative;
    width: 60px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
  >li:last-child{
    float: right;
    border-right: none;
    border-left: 1px solid #c6d0da;
  }
}
  
.gn-menu-main, .gn-menu-main ul{
    margin: 0;
    padding: 0;
    background-color: #fff;
    color: $f-c;
    list-style: none;
    text-transform: none;
    font-weight: 300;
    font-family: Arial, sans-serif;
    line-height: 60px;
  }

.gn-menu-wrapper{
  position: fixed;
  top: 60px;
  bottom: 0;
  left: 0;
  overflow: hidden;
  width: 60px;
  border-top: 1px solid #c6d0da;
  background-color: #fff;
  transform: translateX(-60px);
  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;
  li:not(:first-child), li li{
    box-shadow: inset 0 1px #c6d0da;
  }
}

.gn-submenu li{
  overflow: hidden;
  height: 0;
  transition: height 0.3s;
  a{ color: #c1c9d1;}
}

input.gn-search{
  position: relative;
  z-index: 10;
  padding-left: 60px;
  outline: none;
  border:none;
  background: transparent;
  color: #5f6f81;
  font-weight: 300;
  font-family: 'Lato', Arial, sans-serif;
  cursor: pointer;
  &::placeholder{
    color: $f-c;
  }
}

.gn-menu-main a.gn-icon-search{
  position: absolute;
  top: 0;
  left: 0;
  height: 60px;
}

.gn-icon::before {
    display: inline-block;
    width: 60px;
    text-align: center;
    text-transform: none;
    font-weight: normal;
    font-style: normal;
    font-variant: normal;
    font-family: 'FontAwesome';
    line-height: 1;
    speak: none;
    -webkit-font-smoothing: antialiased;
}
.gn-icon-help::before {
    content: "\f059"
}
 
.gn-icon-cog::before {
    content: "\f085"
}
 
.gn-icon-search::before {
    content: "\f002"
}
 
.gn-icon-download::before {
    content: "\f01a"
}
 
.gn-icon-photoshop::before {
    content: "\f0ad"
}
 
.gn-icon-illustrator::before {
    content: "\f040"
}
 
.gn-icon-archive::before {
    content: "\f187"
}
 
.gn-icon-article::before {
    content: "\f11c"
}
 
.gn-icon-pictures::before {
    content: "\f03e"
}
 
.gn-icon-videos::before {
    content: "\f03d"
}


.gn-icon span {
    width: 0;
    height: 0;
    display: block;
    overflow: hidden;
}

.gn-icon-menu::before {
    /*margin-left: -15px;
    vertical-align: -2px;
    width: 30px;
    height: 3px;
    background: #5f6f81;
    box-shadow: 0 3px white, 0 -6px #5f6f81, 0 -9px white, 0 -12px #5f6f81;
    content: '';*/
  margin-left: -30px;
  content: '\f03a';
}

.gn-icon-menu:hover::before,
.gn-icon-menu.gn-selected:hover::before {
    /*background: white;
    box-shadow: 0 3px #5f6f81, 0 -6px white, 0 -9px #5f6f81, 0 -12px white;*/
  margin-left: -30px;
  content: '\f03a';
}

.gn-icon-menu.gn-selected::before {
    background: #5993cd;
    box-shadow: 0 3px white, 0 -6px #5993cd, 0 -9px white, 0 -12px #5993cd;
}

.gn-menu-wrapper.gn-open-all,
.gn-menu-wrapper.gn-open-part {
    transform: translateX(0px);
}

.gn-menu-wrapper.gn-open-all {
    width: 340px;
}
.gn-menu-wrapper.gn-open-all .gn-submenu li {
    height: 60px;
}

.container > header,
.codrops-top {
	color: #fff;
	font-family: 'Lato', Arial, sans-serif;
}

.container > header {
	margin: 0 auto;
	padding: 12em 2em;
	padding-left: 370px;
	background: rgba(0,0,0,0.05);
}

.container > header a {
	color: #566473;
	text-decoration: none;
	outline: none;
}

.container > header a:hover {
	color: #4f7bab;
}

.container > header h1 {
	font-size: 3.2em;
	line-height: 1.3;
	margin: 0;
	font-weight: 300;
}

.container > header span {
	display: block;
	font-size: 55%;
	color: #74818e;
	padding: 0 0 0.6em 0.1em;
}
body {
	background: #34495e;
}

$('.gn-icon-menu').hover(function(){
  $('.gn-menu-wrapper').toggleClass('gn-open-part');
});

$('.gn-menu-wrapper').hover(function(){
  $(this).toggleClass('gn-open-all');
})