Menu Navigasi Responsive adalah menu yang menyediakan link halaman yang tampilannya menyesuaikan ukuran dektsop ataupun Handphone. Dengan adanya menu tersebut akan memudahkan pengunjung untuk melihat halaman-halaman yang ada pada blog kita, dan terlihat rapi nan elegant.

Menu ini biasanya diletakkan diatas atau dibawah Header blog. Sebenarnya membuat menu ini sangat bervariasi ada yang menggunakan CSS, Java Script dan pastinya akan selalu disertai dengan HTML. Disini Cacan akan membagikan Tutorial Menu Navigasi Responsive. Untuk lebih jelasnya silahkan lihat tutorial dibawah ini

1. Harap masuk ke editor template terlebih dahulu.

2. Pasang kode css berikut , tepat diatas kode  ]]></b:skin> atau </style>

nav {
    display: block;
    margin:0;
    background:linear-gradient(to bottom,#222,#111);
    font-family:arial;font-size:12px;
    border-bottom:1px solid #555;
    box-shadow:0 1px 5px #000
}

.menu {
    padding:0;
    margin:0 auto;
    display: block;max-width:1024px;
}

.menu li {
    display: inline-block;
    position: relative;font-size:11px;
    z-index: 100;text-shadow:0 -1px 1px #333
}

.menu li:first-child {
    margin-left: 0;
}

.menu li a {
    text-decoration: none;
    padding: 20px 15px;
    display: block;
    color: #aaa;font-weight:bold;
    transition: all 0.2s ease-in-out 0s;
}

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

.menu ul {
    visibility: hidden;
    opacity: 0;
    margin: 0;
    padding: 0;
    width: 150px;
    position: absolute;
    left: 0px;
    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: #222;
    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: #111;
    box-shadow:0 1px 3px #111
}

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

.menu li:hover>ul {
    visibility: visible;
    opacity: 1;
    transform: translate(0,0);
}

.menu ul ul {
    left: 149px;
    top: 0px;
    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: #222;
    border-width: 6px;
    margin-top: -6px;
}

.menu li>ul ul:hover {
    visibility: visible;
    opacity: 1;
    transform: translate(0,0);
}

.responsive-menu {
    display: none;
    padding: 20px 15px;
    background:linear-gradient(to bottom,#222,#111);
    color: #fff;
    border-bottom:1px solid #222;
    box-shadow:0 1px 5px #000;
    text-transform: uppercase;
    text-decoration:none;
    font-weight: 600;
}

a.homer {
color:#fff;
}

@media (min-width: 768px) and (max-width: 979px) {
    .mainWrap {
        width: 768px;
    }
    .menu {background:#111;}
    .menu ul {
        top: 37px;
    }

    .menu li a {
        font-size: 12px;
    }
}

@media (max-width: 767px) {
    .mainWrap {
        width: auto;
        padding: 50px 20px;
    }

    .menu {
        display: none;
    }

    .responsive-menu {
        display: block;
        margin-top: 100px;
    }

    nav {
        margin: 0;
        background: #111;
    }

    .menu li {
        display: block;
        margin: 0;
    }


    .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;
    }
}

@media (max-width: 480px) {
}

@media (max-width: 320px) {
}

3. Jika sudah, silahkan save template-nya

4. Jangan lupa untuk memasang Java Script agar tampilannya rapi ketika dilayar yang lebih kecil, caranya pasang kode dibawah ini tepat diatas kode </head>

<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 > 767 && menu.is(':hidden')) {
   menu.removeAttr('style');
  }
 });
 
});
//]]>
</script>

5. Kemudian Save template-nya

6. Untuk memanggil kode CSS diatas silahkan pasang htmlnya, caranya pasang kode dibawah ini tepat dibawah kode <body>

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

7. Kemudian Save templatenya dan Hasilnya akan seperti dibawah ini.

Itulah tutorial tentang membuat menu navigasi responsive, sebenarnya tutorial tersebut cacan dapatkan di Arlina yang cacan modifikasi sedikit. supaya kelihatannya mirip dengan warna kulitnya cacan. hehehe-red