Cara Membuat Responsive Navigation Menu di Blog

Cara Membuat Responsive Navigation Menu di Blog - Navigation menu yang akan saya bagikan ini telah saya coding sedemikian rupa sehingga tampak seperti gambar diatas. Navigation menu ini memiliki beberapa fitur yang sangat berguna bagi blog Anda, yaitu responsive design dan 3 level dropdown menu. Dengan responsive design, navigation menu ini dapat menyesuaikan tampilannya sesuai dengan ukuran device yang digunakan, sedangkan 3 level dropdown menu berarti pada navigation menu ini Anda dapat menambahkan sub menu dan sub sub menu pada menu ini :).

DEMO

Baca juga : Cara Memasang Komentar Disqus Pada Blogger

Untuk membuat Responsive Navigation Menu ini, yang harus Anda lakukan yaitu :

Login ke blogger.com seperti biasa, lalu masuk ke Template > edit HTML.
Tambahkan jQuery berikut pada blog Anda sebelum </head> (abaikan jika sudah ada)

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>

Kemudian tambahkan kode berikut dibawah kode </header> jika ingin menampilkan menu tersebut dibawah header blog Anda.

<nav>
<a id="resp-menu" class="responsive-menu" href="#"><i class="fa fa-reorder"></i> Menu</a>    
   <ul class="menu">
   <li><a href="#">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>
   <li><a href="#">Sub-Menu 4</a></li>
   <li><a href="#">Sub-Menu 5</a></li>   
   </ul>
   </li>
  <li><a  href="#">ABOUT</a></li>
  <li><a  href="#"></i> PORTFOLIO</a>
  <ul class="sub-menu">
   <li><a href="#">Sub-Menu 1</a></li>
   <li><a href="#">Sub-Menu 2</a>
    <ul>
    <li><a href="#">Sub Sub-Menu 1</a></li>
    <li><a href="#">Sub Sub-Menu 2</a></li>
 <li><a href="#">Sub Sub-Menu 3</a></li>
    <li><a href="#">Sub Sub-Menu 4</a></li>
 <li><a href="#">Sub Sub-Menu 5</a></li> 
    </ul>
   </li>
     <li><a href="#">Sub-Menu 3</a>
    <ul>
    <li><a href="#">Sub Sub-Menu 1</a></li>
    <li><a href="#">Sub Sub-Menu 2</a></li>
 <li><a href="#">Sub Sub-Menu 3</a></li>
    <li><a href="#">Sub Sub-Menu 4</a></li>
 <li><a href="#">Sub Sub-Menu 5</a></li> 
    </ul>
   </li>
   </ul>
  </li>
  <li><a  href="#">BLOG</a></li>
    <li><a  href="#">CATEGORIES</a>
  <ul class="sub-menu">
   <li><a href="#">Sub-Menu 1</a></li>
   <li><a href="#">Sub-Menu 2</a>
    <ul>
    <li><a href="#">Sub Sub-Menu 1</a></li>
    <li><a href="#">Sub Sub-Menu 2</a></li>
 <li><a href="#">Sub Sub-Menu 3</a></li>
    <li><a href="#">Sub Sub-Menu 4</a></li>
 <li><a href="#">Sub Sub-Menu 5</a></li> 
    </ul>
   </li>
     <li><a href="#">Sub-Menu 3</a>
    <ul>
    <li><a href="#">Sub Sub-Menu 1</a></li>
    <li><a href="#">Sub Sub-Menu 2</a></li>
 <li><a href="#">Sub Sub-Menu 3</a></li>
    <li><a href="#">Sub Sub-Menu 4</a></li>
 <li><a href="#">Sub Sub-Menu 5</a></li> 
    </ul>
   </li>
   </ul>
  </li>
  <li><a  href="#">CONTACT</a></li>
  <li><a  href="#">SITEMAP</a></li>
  <li><a  href="#">DISCLAIMER</a></li>
  </ul>
  </nav>

Selanjutnya, tambakan kode dibawah ini diatas kode ]]></b:skin> atau </style>.

/* Navigation Menu 1
---------------------------------------------- */
nav {
  display: block;
  margin-top: 0px;
  width:100%;
  padding:0;
  background: #3DA3A2;
}

.menu {
  display: block;
  float:center;
  text-align:center;
  margin:0px;
  padding:0;
}

.menu li {
  display: inline-block;
  position: relative;
  z-index: 100;
  padding:0px;
  margin:0px;
  text-align:left;
  font-size:14px;
}

.menu li a {
  text-decoration: none;
  padding:15px;
  margin:0px;
  display: block;
  color: #fff;
}

.menu li a:hover,.menu li:hover>a {
  color: #fff;
  background:#286C6C;
}

.menu ul {
  visibility: hidden;
  opacity: 0;
  margin: 0;
  padding: 0;
  width: 150px;
  position: absolute;
  left: 0px;
  background: #fff;
  z-index: 99;
}

.menu ul li {
  display: block;
  float: none;
  background: none;
  margin: 0;
  padding: 0;
}

.menu ul li a {
  font-size: 12px;
  font-weight: normal;
  display: block;
  color: #797979;
  background: #fff;
}

.menu ul li a:hover,.menu ul li:hover>a {
  background: #286C6C;
  color: #fff;
}

.menu li:hover>ul {
  visibility: visible;
  opacity: 1;
}

.menu ul ul {
  left: 149px;
  top: 0px;
  visibility: hidden;
  opacity: 0;
}

.menu li>ul ul:hover {
  visibility: visible;
  opacity: 1;
}

.responsive-menu {
  display: none;
  width: 100%;
  padding:15px;
  background: #3DA3A2;
  color: #fff;
}

a.responsive-menu {
color:#fff;
}

Tambahkan lagi kode dibawah ini diatas kode </body>.

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