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 . 


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 !!

33 komentar

wah ini manteb kang Rull..ikutan nyicipin juga

Monggo silahkan kang hehe

wkwkwk. nuhun kang, abdi tos gaduh ah, di tympanus eta nya? :P

Anu si Tympanus te work kang ah .. Hasil di edit saalit !!...
sok we cobian anu di tympanus hehe

widih.. keren uy, disimpan dl ya mas

ashooy kang menunya, apalagi footernya blackcopy heheheee miriiiiing

1 lg kang coba cek responsivenya web ini etchapps.com saya naksir yg bgtu kira2 punya obengnya gak? :-d

Lumayan lah ki hehe daripada gak ada ide postingan

Asal jangan topi miring aja ..

Bagus responsive'y .. nanti tak cari deh obeng'y hehe

Kang punten ah nembe amengan ka dieu :)
Ngantosan update-an kang Ruly di email tina G+ teu aya wae hadeuuhh
Milarian tombol follow blogger teu aya hehehe wios ditambihkeun tina dashboard we :) ameh gampil.

Heehehe tombol follow na nyumput di payun hehehe :)

Sipp Kang Rully coba saya sedot ya..hahhahyyyyy

baik bener dah akang satu ini, saya bersedia menunggu klo bgtu

waw manteb pisan kang... saya sedot ya.... hehehe

hehe, memang kedah di edit heula kang.. nuhun tos di permudah ! :-bd

Kalau waktunya santai coz blkngn lumayan sibuk ... hehe

Naha nya kang make to muncul di G+ kumaha atuh ??
tah eta dipayun kang ...

monggo mas icah ...

Mangga mang mangga hehe

mantap kang...ijin sedot

Monggo silahkan sob ....

itu penulisan kodenya kok sampe keluar begitu ya!!!
read it
http://www.w3schools.com/CSSref/playit.asp?filename=playcss_white-space
tambahkan itu pada tag pre/code anda ;)

Pasti di mozlilla ntuh mah nya kang .. iya sip

Wilujeng enjing Kang hapunten nembe mampir :)
Google Nexus Website Menu keren pisan apalagi kalo pake font awesome :)

benar-benar ajaib nih tutorialnya, berarti bukan kompi aja bisa ajaib ya hihihihih :-d :ngakak:

Enjing deui kang heri kamana wae ath yeuhh hehe
nah itu si awasome pasti lebih mantapzzz ...

Hah bisa aja sis .. ya mumpung lagi ada waktu z sis

keren google nexusnya :) review dulu :D

woke sip mas

Codrops emang OKE untuk di implementasikan di Blog..
Yg ini agak simple dari CD.. :-d

Yupz jeng CD is the best lah hehe

test $(document).ready(function()