Mas Uya

Selamat sore blogger,Di post kali ini saya akan membahas tutorial tentang Cara Membuat Menu Responsive Di Bawah Header.
Tutorial ini requestsan dari temen saya di facebook,Ya untuk itu saya akan menjawabnya sekarang.
Gak usah omong-omong lagi langsung saja kita mulai

Tutorial:
1.Login Ke Blogger
2.Masuk ke template-Edit HTML
3.Taruh CSS berikut Tepat di bawah <head>

<link href='https://googledrive.com/host/0BwbwSIoW-tx1ZTVSYlQ5X1R0UTA' rel='stylesheet' type='text/css'/>

4.Jika sudah cari code </head>,Dan taruh jquery ini tepat di atasnya (Jika sudah ada,Tidak usah)

<script async='async' src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'></script>

5.Klik simpan,Masih Di EDIT HTML,Cari code ]]></b:skin>,Dan Letakkan CSS Berikut tepat di atasnya

.mobile-menu{display:none; padding:11px; background:#3E4156; color:#fff; text-transform:uppercase; font-weight:600}
nav{background-color:#333}
.menu{display:block}
.menu li{ display:inline-block;  position:relative;  z-index:100}
.menu li a{ font-weight:600;  text-decoration:none;  padding:12px;  display:block;  color:#fff;  transition:all 0.2s ease-in-out 0s}
.menu li a:hover, 
.menu li:hover >a{ color:#fff;  background:#bbb}
.menu ul{ display:none;  margin:0;  padding:0;  width:150px;  position:absolute;  top:43px;  left:0px;  background:#333}
.menu li:hover >ul{ display:block}
.menu ul li{ display:block;  background:none;  margin:0;  padding:0}
.menu ul li a{ font-size:12px;  display:block;  border-left:3px solid #fff}
.menu ul li a:hover, 
.menu ul li:hover >a{ background-color:#bbb;color:#fff;}
.menu ul ul{left:149px; top:0px}

6.Klik simpan,Masih di Edit HTML,Cari code </header>,Dan taruh HTML ini tepat di dibawahnya (Setiap Template Beda-Beda Strukturnya)

<a class='mobile-menu' href='#' id='touch-menu'><i class='icon-reorder'/>Menu</a>
<nav>  
<ul class='menu'>
<li><a href='#'><i class='icon-home'/>HOME</a>
<ul class='sub-menu'>
<li><a href='#'>Sub-Menu 1</a></li>
<li><a href='#'>Sub-Menu 2</a></li>
<li><a href='#'>Sub-Menu 3</a></li>
</ul>
</li>
<li><a href='#'><i class='icon-user'/>ABOUT</a></li>
<li><a href='#'><i class='icon-camera'/>PORTFOLIO</a>
<ul class='sub-menu'>
<li><a href='#'>Sub-Menu 1</a></li>
<li><a href='#'>Level 3 Menu</a>
<ul>
<li><a href='#'>Sub-Menu 4</a></li>
<li><a href='#'>Sub-Menu 5</a></li>
<li><a href='#'>Sub-Menu 6</a></li>
</ul>
</li>
</ul>
</li>
<li><a href='#'><i class='icon-bullhorn'/>BLOG</a></li>
<li><a href='#'><i class='icon-envelope-alt'/>CONTACT</a></li>
</ul>
</nav>

7.Klik simpan,Masih di Edit HTML,Cari code </body>,Dan taruh JS ini tepat di atasnya

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){ 
 var touch  = $('#touch-menu');
 var menu  = $('.menu');
 
 $(touch).on('click', function(e) {
  e.preventDefault();
  menu.slideToggle();
 });
 
 $(window).resize(function(){
  var w = $(window).width();
  if(w > 767 && menu.is(':hidden')) {
   menu.removeAttr('style');
  }
 });
 
});
//]]>
</script>

8.Klik simpan,Jangan Keluar dahulu.Karna belum kita buat responsive
9.Cari code ]]></b:skin>,Dan Copy CSS Media Quires ini tepat di atasnya

@media (max-width:767px){  .menu{display:none}
.mobile-menu{display:block;  margin-top:100px} 
nav{margin:0; padding:0;  background:none}
ul{margin:0; padding:0}
.menu li{display:block;  margin:0} 
.menu li a{background:#fff;  color:#797979;  border-top:1px solid #e0e0e0;  border-left:3px solid #fff}
.menu li a:hover, .menu li:hover >a{ background:#9CA3DA;  color:#fff;  border-left:3px solid #fff}
.menu ul{ display:block;  position:relative;  top:0;  left:0;  width:100%}
.menu ul ul{left:0} 
}

10.Klik Simpan,dan selesai tutorial dari saya

Untuk Demonya Silahkan Klik Button Di Bawah Ini

Demo