Cara Membuat Menu Navigasi Drop Down Responsive Keren

Salah satu nilai lebih ketika membuat design template adalah adanya menu navigasi yang mudah digunakan oleh pembaca. Mudah dalam artian tidak membuat bingung pembaca. Namun ketika kita sadari, sebenarnya kalo difikir, masak sih seorang blogger bingung dengan opsi menu navigasi di atas posting? Blogger yang notabene pasti kan tahu apa itu IT dan teknologi, pasti ngerti lah tentang menu navigasi.

Hal ini sebenarnya agak kurang logis, namun itulah faktanya saran dari banyak blogger yang mengatakan bahwa salah satu sebab tidak diterimanya Google Adsense adalah adanya menu navigasi yang menyulitkan pembaca.Gubrak, hehe.

Namun demikian, kita sebagai blogger yang baik tentu akan berusaha menerapkan hal terbaik bagi design sebuah template. Untuk itu, berikut akan coba kita berikan tips cara membuat menu navigasi drop down responsive keren di blog.

1. Buka akun blogger
2. Pilih template > mode HTML
3. Copas kode di bawah ini tepat di atas kode ]]></b:skin> atau </style>

nav { display:block; margin-top:100px; background:#374147; border-bottom:4px solid #07ACEC; }
.menu { display:block; }
.menu li { display:inline-block; position:relative; z-index:100; }
.menu li:first-child { margin-left:0; }
.menu li a { font-weight:600; text-decoration:none; padding:20px 15px; display:block; color:#fff; transition:all 0.2s ease-in-out 0s; }
.menu li a:hover,.menu li:hover>a { color:#fff; background:#07ACEC; }
.menu ul { visibility:hidden; opacity:0; margin:0; padding:0; width:150px; position:absolute; left:0; background:#fff; z-index:99; transform:translate(0,20px); transition:all 0.2s ease-out; }
.menu ul:after { bottom:100%; left:20%; border:solid transparent; content:" "; height:0; width:0; position:absolute; pointer-events:none; border-color:rgba(255,255,255,0); border-bottom-color:#fff; border-width:6px; margin-left:-6px; }
.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:#07ACEC; color:#fff; }
.menu li:hover>ul { visibility:visible; opacity:1; transform:translate(0,0); }
.menu ul ul { left:149px; top:0; visibility:hidden; opacity:0; transform:translate(20px,20px); transition:all 0.2s ease-out; }
.menu ul ul:after { left:-6px; top:10%; border:solid transparent; content:" "; height:0; width:0; position:absolute; pointer-events:none; border-color:rgba(255,255,255,0); border-right-color:#fff; border-width:6px; margin-top:-6px; }
.menu li>ul ul:hover { visibility:visible; opacity:1; transform:translate(0,0); }
.responsive-menu { display:none; width:100%; padding:20px 15px; background:#374147; color:#fff; text-transform:uppercase; font-weight:600; }
.responsive-menu:hover { background:#374147; color:#fff; text-decoration:none; }
a.homer { background:#07ACEC; }
@media (min-width:768px) and (max-width:979px) {
    .mainWrap { width:768px; } .menu ul { top:37px; } .menu li a { font-size:12px; } a.homer { background:#07ACEC; }
}
@media (max-width:767px) {
    .mainWrap { width:auto; padding:50px 20px; } .menu { display:none; } .responsive-menu { display:block; margin-top:100px; } nav { margin:0; background:none; } .menu li { display:block; margin:0; } .menu li a { background:#fff; color:#797979; } .menu li a:hover,.menu li:hover>a { background:#07ACEC; color:#fff; } .menu ul { visibility:hidden; opacity:0; top:0; left:0; width:100%; transform:initial; } .menu li:hover>ul { visibility:visible; opacity:1; position:relative; transform:initial; } .menu ul ul { left:0; transform:initial; } .menu li>ul ul:hover { transform:initial; }
}

4. Copas kode di bawah ini tepat di atas kode </head> atau </body>

<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>
<script type="text/javascript">
$(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 > 767 && menu.is(':hidden')) {
   menu.removeAttr('style');
  }
 });
});
</script>

5. Copas kode di bawah ini untuk mengganti menu navigasi yang lama. Misalkan saja sobat bisa melihat menu navigasi di situs ini, ada Tips Blog, Panduan SEO dll. Stukturnya kurang lebih seperti di bawah ini:

<nav>
<a id="resp-menu" class="responsive-menu" href="#"><i class="fa fa-reorder"></i> Menu</a>
   <ul class="menu">
   <li><a class="homer" href="#"><i class="fa fa-home"></i> 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="#"><i class="fa fa-user"></i> ABOUT</a></li>
  <li><a  href="#"><i class="fa fa-camera"></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="#"><i class="fa fa-bullhorn"></i> BLOG</a></li>
    <li><a  href="#"><i class="fa fa-tags"></i> 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="#"><i class="fa fa-envelope"></i> CONTACT</a></li>
  <li><a  href="#"><i class="fa fa-sitemap"></i> SITEMAP</a></li>
  <li><a  href="#"><i class="fa fa-exclamation-triangle"></i> DISCLAIMER</a></li>
  </ul>
  </nav> 

6. Save template
7. Cek aja hasilnya

Mudah kan? Demikian tips desighn blog kali ini. Semoga bermanfaat. Salam.
(http://www.forumblogindo.com/).*