Menu Navigasi Responsive

Asaalamualaikum ...kayaknya sudah terlalu lama gak update , ..terus terang hari hari belakangan ini Admin Full blog design tengah disibukkan dengan membuat sebuah template .....(Maklum Masih Tahap Belajar )tapi Alhamdulillah sudah ada beberapa template yang sudah siap di publikasikan (Insya Allah).
Akan tetapi untuk Postingan kali ini Kang Mahfid akan berbagi tutorial cara membuat Menu Navigasi Responsive .Menu ini sangat keren karena secara otomatis akan berubah menjadi Menu vertikal pada tampilan mobile berikut tampilan screenshotnya :

Kelebihan yang lain dari menu ini adalah menu akan menjadi bentuk vertikal secara otomatis dengan menu buka tutup pada layar dengan lebar 240,320 dan 480 .
berikut cara pasang menunya :

1. Letakkan kode berikut tepat di atas kode </head> berikut kodenya :

   <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
   <script type='text/javascript'>
   //<![CDATA[
           $(function() {
               var pull         = $('#pull');
                   menu         = $('nav ul');
                   menuHeight    = menu.height();
   
               $(pull).on('click', function(e) {
                   e.preventDefault();
                   menu.slideToggle();
               });
   
               $(window).resize(function(){
                   var w = $(window).width();
                   if(w > 320 && menu.is(':hidden')) {
                       menu.removeAttr('style');
                   }
               });
           });
       //]]>
   </script>

2. kode yang berwarna pink di atas adalah kode jquery kalau pada template sobat sudah ada kode jquery yang serupa hapus aja kode yang lama atau kalau punya sobat ada versi terbaru ganti aja dan tempat kan seperti contoh di atas (jquery harus di atas script)
3. Kemudian cari kode ]]></b:skin> atau </style>letakkan kode css berikut tepat di atasnya :

   .clearfix{width:100%}
   .clearfix a{color:#fff !important;}
   .clearfix a:hover{color:orange;background:#000;border-top:1px solid red}
   nav {
       height: 40px;
       width: 100%;
       background:#2E8B57;
       font-size: 11pt;
       font-family: 'PT Sans', Arial, sans-serif;
       font-weight: bold;
       position: relative;
       border-bottom: 2px solid #283744;
   }
   nav ul {
       padding: 0;
       margin: 0 auto;
       width: 600px;
       height: 40px;
   }
   nav li {
       display: inline;
       float: left;
   }
   nav a {
       color: #fff;
       display: inline-block;
       width: 100px;
       text-align: center;
       text-decoration: none;
       line-height: 40px;
       text-shadow: 1px 1px 0px #283744;
   }
   nav li a {
       border-right: 1px solid #576979;
       box-sizing:border-box;
   }
   nav li:last-child a {
       border-right: 0;
   }
   nav a:hover, nav a:active {
       background-color: #8c99a4;
   }
   nav a#pull {
       display: none;
   }
   
   /*Styles for screen 600px and lower*/
   @media screen and (max-width: 600px) {
       nav {
             height: auto;
         }
         nav ul {
             width: 100%;
             display: block;
             height: auto;
         }
         nav li {
             width: 50%;
             float: left;
             position: relative;
         }
         nav li a {
           border-bottom: 1px solid #576979;
           border-right: 1px solid #576979;
       }
         nav a {
             text-align: left;
             width: 100%;
             text-indent: 25px;
         }
   }
   
   /*Styles for screen 515px and lower*/
   @media only screen and (max-width : 480px) {
       nav {
           border-bottom: 0;
       }
       nav ul {
           display:block;
           height: auto;
       }
       nav a#pull {
           display: block;
           background-color: #283744;
           width: 100%;
           position: relative;
       }
       nav a#pull:after {
           content:"";
           background: url('http://2.bp.blogspot.com/-Sa6Jhx2vHz4/UhT2WJjuMLI/AAAAAAAAAF8/2HCOZscw2vY/s1600/nav-icon.png') no-repeat;
           width: 30px;
           height: 30px;
           display: inline-block;
           position: absolute;
           right: 15px;
           top: 10px;
       }
   }
   
   /*Smartphone*/
   @media only screen and (max-width : 320px) {
       nav li {
           display: block;
           float: none;
           width: 100%;
       }
       nav li a {
           border-bottom: 1px solid #576979;
       }
   }

4. Dan Yang terakhir silahkan taruh kode HTML berikut tepat di bawah kode tag penutup header seperti contoh di bawah ini :

   <div id='header-wrapper'>
          -----------------------
   --------------------------------
          </b:section>
       </div>
   Letakkan kodenya disini

5. Berikut kodenya :.....

           <nav><ul class='clearfix'>
             <li><a href='/' title='Home'> Home</a></li>
               <li><a href='#' title='A bout us'> A bout us</a></li>
               <li><a href='#' title='Tip Trik'> Tip Trik</a></li>
               <li><a href='#' title='download'> Template</a></li>
           <li><a href='#' title='daftar-isi'> sitemap</a></li>
               <li><a class='icon-tool' href='#' title='Feed Rss'>Fedd Rss</a></li>  
           </ul>
           <a href='#' id='pull' title='Menu'> Menu</a>
       </nav>
    
   
   

Source Code: http://www.hongkiat.com

Judul Artikel :Menu Navigasi Responsive

Terima Kasih Sobat sudah membaca Artikel saya Tentang Menu Navigasi Responsive Silahkan tinggalkan jejak lewat form komentar untuk mempermudah Admin berkunjung balik ke blog sobat. Mau share ulang Article saya ini..? silahkan ..!! tentunya dengan Judul dan narasi yang berbeda dan jangan lupa untuk mencantumkan link sumber..Terima Kasih