Google Nexus Website Menu

Setelah sekian lama tidak update artikel seputar tutorial blogger karena kesibukan yang cukup menjubel akhirnya punya sedikit waktu untuk membuat sebuah menu yang lumayan mirip seperti Google Nexus yang saya fikir cukup keren untuk kalian cicipi hehhe ..

Update : Google Nexus Website Menu terinpirasi dari codrops silahkan kunjungi halaman aslinya disini cuma saya fikir bagi kamu yang belum terlalu paham akan kode CSS dsb akan sedikit kesulitan dalam menerapkannya jadi saya mencoba sedikit membuatnya lebih sederhana . 

Demosion

Kustomisasi Lengkap

CSS

.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 li:not(:first-child),.gn-menu li li{box-shadow:inset 0 1px #c6d0da}
.gn-submenu li{overflow:hidden;height:0;-webkit-transition:height 0.3s;-moz-transition:height 0.3s;transition:height 0.3s}
.gn-submenu li 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 */
.gn-search::-webkit-input-placeholder{color:#5f6f81}
.gn-search:-moz-placeholder{color:#5f6f81}
.gn-search::-moz-placeholder{color:#5f6f81}
.gn-search:-ms-input-placeholder{color:#5f6f81}
/* hide placeholder when active in Chrome */
.gn-search:focus::-webkit-input-placeholder,.no-touch .gn-menu li.gn-search-item:hover .gn-search:focus::-webkit-input-placeholder{color:transparent}
input.gn-search:focus{cursor:text}
.no-touch .gn-menu li.gn-search-item:hover input.gn-search{color:white}
/* placeholder */
.no-touch .gn-menu li.gn-search-item:hover .gn-search::-webkit-input-placeholder{color:white}
.no-touch .gn-menu li.gn-search-item:hover .gn-search:-moz-placeholder{color:white}
.no-touch .gn-menu li.gn-search-item:hover .gn-search::-moz-placeholder{color:white}
.no-touch .gn-menu li.gn-search-item:hover .gn-search:-ms-input-placeholder{color:white}
.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:'ecoicons';line-height:1;speak:none;-webkit-font-smoothing:antialiased}
.gn-icon-help::before{content:"A"}
.gn-icon-earth::before{content:"B"}
.gn-icon-cog::before{content:"C"}
.gn-icon-search::before{content:"D"}
.gn-icon-download::before{content:"K"}
.gn-icon-photoshop::before{content:"E"}
.gn-icon-illustrator::before{content:"F"}
.gn-icon-archive::before{content:"G"}
.gn-icon-article::before{content:"H"}
.gn-icon-pictures::before{content:"I"}
.gn-icon-videos::before{content:"J"}
/* if an icon anchor has a span,hide the span */
.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:''}
.no-touch .gn-icon-menu:hover::before,.no-touch .gn-icon-menu.gn-selected:hover::before{background:white;box-shadow:0 3px #5f6f81,0 -6px white,0 -9px #5f6f81,0 -12px white}
.gn-icon-menu.gn-selected::before{background:#5993cd;box-shadow:0 3px white,0 -6px #5993cd,0 -9px white,0 -12px #5993cd}
/* styles for opening menu */
.gn-menu-wrapper.gn-open-all,.gn-menu-wrapper.gn-open-part{-webkit-transform:translateX(0px);-moz-transform:translateX(0px);transform:translateX(0px)}
.gn-menu-wrapper.gn-open-all{width:340px}
.gn-menu-wrapper.gn-open-all .gn-submenu li{height:60px}

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>
</div><!-- /container -->

J-Query

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'));
});
  

Selamat kamu berhasil mencicipinya hehehe ... Selebihnya bisa kita diskusikan pada kolom komentar !!