Membuat Menu Navigation Bar Responsive

membuat_menu_Navigation_bar_Responsive

Cara Membuat Menu Navigation Bar Responsive Di Blog

Cara Membuat Menu Bar Responsive Di Blog Kali ini saya akan berbagi Tutorial Cara Memasang Menubar yang mobile friendly / responsive....

Menu Bar ini cocok buat kalian yang ingin mendesain templatenya menjadi suport mobile friendly yang akan memudahkan pengunjung untuk mengontrol isi dari menu yang ditampilkan..

Sebelumnya saya juga sudah pernah sahre tentang beberapa menu bar yang simple dan responsive... bagi kalian yang ingin melihatnya bisa kunjungi artikel berikut ini...

Tutorial Blogger Lainnya :


Untuk Melihat yang lainnya bisa kunjungi link berikut.. Search Post Menu Navigation

Nah sekarang kita lanjut ke tutorial cara membuat menubar di blognya...

Cara Membuat Menu Bar Responsive Di Blog


  • Login ke Blogger.com
  • Masuk ke Tab Template-> Klik Edit HTML, Cari Code </head> 
  • Lalu masukan CSS dibawah ini tepat diatas kode had tadi
    • 
<style type='text/css'>
/* CSS HTML5 */
menu,nav{display:block;}*{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}input,button,select,textarea{font-size:100%;line-height:normal;vertical-align:baseline;}
/* CSS Main Menu */
a.menu-slide{display:none;background:#374760;padding:0 15px;height:46px;line-height:46px;color:#fff;text-transform:uppercase}
a.menu-slide:hover {color:#fff;}
#nav {font-size:14px;font-weight:700;background:#374760;height:56px;line-height:56px;margin:0 auto;}
.kang-teja {background:#374760;list-style:none;margin:0;float:left;}
.kang-teja:before,.kang-teja:after {content: " ";display:table;}
.kang-teja:after {clear:both;}
.kang-teja ul {list-style:none;margin:0;width:11em;}
.kang-teja a {display:block;padding:0 15px;}
.kang-teja li {position:relative;margin:0;}
.kang-teja > li {float:left;}
.kang-teja > li > a {display:block;height:56px;line-height:56px;color:#fff;overflow:hidden;transition:initial}
.kang-teja > li > a.active {background:#3cc091;color:#fff;}
.kang-teja > li:hover > a {background:#3cc091;color:#fff;}
.kang-teja > li:hover > a.active {background:#37b185;}
.kang-teja li ul {background:#fafafa;display:block;position:absolute;top:50%;left:0;z-index:10;visibility:hidden;opacity:0;transition:all .3s}
.kang-teja li li ul {left:100%;top:-1px;}
.kang-teja > li.hover > ul {visibility:visible;opacity:1;top:100%;}
.kang-teja li li.hover ul {visibility:visible;opacity:10;}
.kang-teja li li a {display:block;color:#768187;position:relative;z-index:100;height:42px;line-height:42px;font-weight:400;transition:initial}
.kang-teja li li a:hover {background:#3cc091;color:#fff;}
.kang-teja li li li a {background:#fff;z-index:20;color:#333;}
.kang-teja li .parent:after {content: "\f0d7";font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;padding-left:6px;color:#858d8f;}
.kang-teja li:hover .parent:after{color:#fff;}
.kang-teja li ul li .parent:after {content: "\f0da";font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;padding-left:6px;color:#768187;float:right;}
.kang-teja li ul li .parent:hover:after {color:#fff;}
#search-form {background:#374760;float:right;margin:0;width:210px;}
#search-form table {width:100%;margin:0;}
#search-form input#search-box[type="text"] {background:#fff;height:36px;line-height:36px;margin:5px 0 5px 10px;padding:0 10px;width:99%;border:none;}
#search-form input#search-button[type="submit"] {font-family:FontAwesome;background:#3cc091;color:#fff;height:36px;line-height:36px;margin:5px 10px 5px -2px;padding:0 15px;border:none;outline:none;transition:all 0.25s;}
#search-form input#search-button[type="submit"]:hover{background:#37b185;cursor:pointer;}
#search-form input#search-box[type="text"]:focus {background:#fdfdfd;outline:none;}
/* CSS Menu Responsive */
@media screen and (max-width:960px){
  #search-form{width:100%;background:#263142;padding:5px 0;}
  #search-form td.search-box{padding-right:0;width:100%;}
  #search-form input#search-box[type="text"]{background:#fff;}
  #search-form input#search-box[type="text"]:focus{background:#fefefe;outline:none;}
;}
@media only screen and (max-width:768px){
  .nav li ul:before{display:none;height:auto;overflow:hidden;border-bottom:1px solid rgba(0,0,0,0.1);}
  #nav{background:#374760}
  .nav{float:none;width:100%;max-width:100%;}
  .active{display:block;}
  .kang-teja > li > a.active{background:#263142;}
  .kang-teja > li > a.active:hover{background:#263142;}
  #search-form{margin:0;}
  .nav > li{float:none;overflow:hidden;}
  .nav ul{display:block;width:100%;float:none;}
  .kang-teja li ul{background:#f6f6f6;box-shadow:none;}
  .kang-teja li ul li a{background:#f0f0f0;}
  .kang-teja > li > a{background:#263142;height:40px;line-height:40px;}
  .kang-teja li li a:hover{background:#263142;color:#fff;}
  .nav > li.hover > ul,.nav li li.hover ul{position:static;}
  .kang-teja li .parent:after,.kang-teja li ul li .parent:after{content:"\f0d7";font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;padding-right:5px;float:right;color:#949ea0;}
  .kang-teja li:active .parent:after,.kang-teja li ul li:active .parent:after{color:#c5cbd0;}
  #search-form td.search-box{padding:0 0 0 10px;}
  #search-form td.search-button{width:1%;}
  #search-form input#search-box[type="text"]{margin:0;background:#fff;}
  #search-form input#search-box[type="text"]:focus{background:#fdfdfd;outline:none;}
;}
@media only screen and (max-width:640px){
  #nav{background:#374760;margin:0;height:46px;line-height:46px;}
;}
</style>
  • Langkah selanjutnya, cari kode </body> Dan Masukan Javascript dibawah ini tepat di atasnya.. 
    • 
<script type='text/javascript'>
//<![CDATA[
// Main Menu
var ww=document.body.clientWidth;$(document).ready(function(){$(".nav li a").each(function(){if($(this).next().length>0){$(this).addClass("parent")}});$(".menu-slide").click(function(e){e.preventDefault();$(this).toggleClass("active");$(".nav").toggle()});adjustMenu()});$(window).bind("resize orientationchange",function(){ww=document.body.clientWidth;adjustMenu()});var adjustMenu=function(){if(ww<768){$(".menu-slide").css("display","inline-block");if(!$(".menu-slide").hasClass("active")){$(".nav").hide()}else{$(".nav").show()}$(".nav li").unbind("mouseenter mouseleave");$(".nav li a.parent").unbind("click").bind("click",function(e){e.preventDefault();$(this).parent("li").toggleClass("hover")})}else if(ww>=768){$(".menu-slide").css("display","none");$(".nav").show();$(".nav li").removeClass("hover");$(".nav li a").unbind("click");$(".nav li").unbind("mouseenter mouseleave").bind("mouseenter mouseleave",function(){$(this).toggleClass("hover")})}}
//]]>
</script>
  • Selanjutnya cari Kode 'outer-wrapper lalu masukan html dibawah ini tepat dibawah kode tadi, contoh kode <div class='outer-wrapper'> Setiap Template Kodenya Bisa Berbeda-beda.. 
    • 
<nav id="nav" itemscope="itemscope" itemtype="http://schema.org/SiteNavigationElement" role="navigation">
  <a style="display: none;" class="menu-slide" href="#"><i class="fa fa-list"></i> Menu</a>
  <ul class="nav kang-teja">
    <li class=""><a class="active" href="/"><span itemprop="name"><i class="fa fa-home"></i> Home</span></a></li>
    <li class=""><a class="parent" href="#" itemprop="url"><span itemprop="name">Web Tools</span></a>
      <ul>
        <li class=""><a href="#" itemprop="url"><span itemprop="name">Ad Converter</span></a></li>
        <li class=""><a href="#" itemprop="url"><span itemprop="name">Color Picker</span></a></li>
        <li class=""><a href="#" itemprop="url"><span itemprop="name">CSS Filter</span></a></li>
        <li class=""><a href="#" itemprop="url"><span itemprop="name">CSS Minifier</span></a></li>
        <li class=""><a href="#" itemprop="url"><span itemprop="name">CSS Triangle</span></a></li>
        <li class=""><a href="#" itemprop="url"><span itemprop="name">Fontawesome</span></a></li>
        <li class=""><a href="#" itemprop="url"><span itemprop="name">Kamus HTML</span></a></li>
      </ul>
    </li>
    <li class=""><a href="https://mastamvan.blogspot.com/search/label/CSS?&amp;max-results=6" itemprop="url"><span itemprop="name">CSS</span></a></li>
    <li class=""><a href="https://mastamvan.blogspot.com/search/label/HTML?&amp;max-results=6" itemprop="url"><span itemprop="name">HTML</span></a></li>
    <li><a href="https://mastamvan.blogspot.com/search/label/Seo?&amp;max-results=6" itemprop="url"><span itemprop="name">SEO</span></a></li>
    <li><a href="https://mastamvan.blogspot.com/search/label/Templates?&amp;max-results=6" itemprop="url"><span itemprop="name">Template</span></a></li>
    <li><a href="#" itemprop="url"><span itemprop="name">Tips Blogger</span></a></li>
    <li><a href="#" itemprop="url"><span itemprop="name">Widget</span></a></li>
  </ul>
  <form action="https://mastamvan.blogspot.com/p/search-post-mas-tamvan.html" id="search-form">
    <input name="cx" value="partner-pub-016346400151212832090:egwuycyircu" type="hidden"/>
    <input name="cof" value="FORID:10" type="hidden"/>
    <input name="ie" value="ISO-8859-1" type="hidden"/>
    <table>
      <tbody>
        <tr>
          <td class="search-box">
            <input id="search-box" name="q" onblur="if(this.value=='')this.value=this.defaultValue;" onfocus="if(this.value==this.defaultValue)this.value='';" value="Search..." type="text"/>
          </td>
          <td class="search-button">
            <input id="search-button" value="" type="submit"/>
          </td>
        </tr>
      </tbody>
    </table>
  </form>
</nav>
    Silahkan ganti tanda # [pagar] dengan link tujuan kalian. Dan ganti juga Nama Menu Sesuai Keinginan kalian
  • Sekarang Save Template, Dan Lihat Hasilnya....

Kalo cara di atas membuat kalian ribet, kalian bisa coba cara simple dibawah ini...

Cara Simple Memasang Menu Navigation Bar Responsive


  • Masuk ke Tata Letak, Tambahkan Gadget, Terus cari HTML/Javascript. Contoh Lihat Gambar...
    • Membuat Menu Navigation Bar Responsive
  • Setelah diklik / dibuka HTML/Javascriptnya, Masukan ScriptMenu Navigation Bar Responsive dibawah ini kedalam kolom HTML/Javascript. 
    • 

<nav id="nav" itemscope="itemscope" itemtype="http://schema.org/SiteNavigationElement" role="navigation">
  <a style="display: none;" class="menu-slide" href="#"><i class="fa fa-list"></i> Menu</a>
  <ul class="nav kang-teja">
    <li class=""><a class="active" href="/"><span itemprop="name"><i class="fa fa-home"></i> Home</span></a></li>
    <li class=""><a class="parent" href="#" itemprop="url"><span itemprop="name">Web Tools</span></a>
      <ul>
        <li class=""><a href="#" itemprop="url"><span itemprop="name">Ad Converter</span></a></li>
        <li class=""><a href="#" itemprop="url"><span itemprop="name">Color Picker</span></a></li>
        <li class=""><a href="#" itemprop="url"><span itemprop="name">CSS Filter</span></a></li>
        <li class=""><a href="#" itemprop="url"><span itemprop="name">CSS Minifier</span></a></li>
        <li class=""><a href="#" itemprop="url"><span itemprop="name">CSS Triangle</span></a></li>
        <li class=""><a href="#" itemprop="url"><span itemprop="name">Fontawesome</span></a></li>
        <li class=""><a href="#" itemprop="url"><span itemprop="name">Kamus HTML</span></a></li>
      </ul>
    </li>
    <li class=""><a href="https://mastamvan.blogspot.com/search/label/CSS?&amp;max-results=6" itemprop="url"><span itemprop="name">CSS</span></a></li>
    <li class=""><a href="https://mastamvan.blogspot.com/search/label/HTML?&amp;max-results=6" itemprop="url"><span itemprop="name">HTML</span></a></li>
    <li><a href="https://mastamvan.blogspot.com/search/label/Seo?&amp;max-results=6" itemprop="url"><span itemprop="name">SEO</span></a></li>
    <li><a href="https://mastamvan.blogspot.com/search/label/Templates?&amp;max-results=6" itemprop="url"><span itemprop="name">Template</span></a></li>
    <li><a href="#" itemprop="url"><span itemprop="name">Tips Blogger</span></a></li>
    <li><a href="#" itemprop="url"><span itemprop="name">Widget</span></a></li>
  </ul>
  <form action="https://mastamvan.blogspot.com/p/search-post-mas-tamvan.html" id="search-form">
    <input name="cx" value="partner-pub-016346400151212832090:egwuycyircu" type="hidden"/>
    <input name="cof" value="FORID:10" type="hidden"/>
    <input name="ie" value="ISO-8859-1" type="hidden"/>
    <table>
      <tbody>
        <tr>
          <td class="search-box">
            <input id="search-box" name="q" onblur="if(this.value=='')this.value=this.defaultValue;" onfocus="if(this.value==this.defaultValue)this.value='';" value="Search..." type="text"/>
          </td>
          <td class="search-button">
            <input id="search-button" value="" type="submit"/>
          </td>
        </tr>
      </tbody>
    </table>
  </form>
</nav>

<style type='text/css'>
/* CSS HTML5 */
menu,nav{display:block;}*{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}input,button,select,textarea{font-size:100%;line-height:normal;vertical-align:baseline;}
/* CSS Main Menu */
a.menu-slide{display:none;background:#374760;padding:0 15px;height:46px;line-height:46px;color:#fff;text-transform:uppercase}
a.menu-slide:hover {color:#fff;}
#nav {font-size:14px;font-weight:700;background:#374760;height:56px;line-height:56px;margin:0 auto;}
.kang-teja {background:#374760;list-style:none;margin:0;float:left;}
.kang-teja:before,.kang-teja:after {content: " ";display:table;}
.kang-teja:after {clear:both;}
.kang-teja ul {list-style:none;margin:0;width:11em;}
.kang-teja a {display:block;padding:0 15px;}
.kang-teja li {position:relative;margin:0;}
.kang-teja > li {float:left;}
.kang-teja > li > a {display:block;height:56px;line-height:56px;color:#fff;overflow:hidden;transition:initial}
.kang-teja > li > a.active {background:#3cc091;color:#fff;}
.kang-teja > li:hover > a {background:#3cc091;color:#fff;}
.kang-teja > li:hover > a.active {background:#37b185;}
.kang-teja li ul {background:#fafafa;display:block;position:absolute;top:50%;left:0;z-index:10;visibility:hidden;opacity:0;transition:all .3s}
.kang-teja li li ul {left:100%;top:-1px;}
.kang-teja > li.hover > ul {visibility:visible;opacity:1;top:100%;}
.kang-teja li li.hover ul {visibility:visible;opacity:10;}
.kang-teja li li a {display:block;color:#768187;position:relative;z-index:100;height:42px;line-height:42px;font-weight:400;transition:initial}
.kang-teja li li a:hover {background:#3cc091;color:#fff;}
.kang-teja li li li a {background:#fff;z-index:20;color:#333;}
.kang-teja li .parent:after {content: "\f0d7";font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;padding-left:6px;color:#858d8f;}
.kang-teja li:hover .parent:after{color:#fff;}
.kang-teja li ul li .parent:after {content: "\f0da";font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;padding-left:6px;color:#768187;float:right;}
.kang-teja li ul li .parent:hover:after {color:#fff;}
#search-form {background:#374760;float:right;margin:0;width:210px;}
#search-form table {width:100%;margin:0;}
#search-form input#search-box[type="text"] {background:#fff;height:36px;line-height:36px;margin:5px 0 5px 10px;padding:0 10px;width:99%;border:none;}
#search-form input#search-button[type="submit"] {font-family:FontAwesome;background:#3cc091;color:#fff;height:36px;line-height:36px;margin:5px 10px 5px -2px;padding:0 15px;border:none;outline:none;transition:all 0.25s;}
#search-form input#search-button[type="submit"]:hover{background:#37b185;cursor:pointer;}
#search-form input#search-box[type="text"]:focus {background:#fdfdfd;outline:none;}
/* CSS Menu Responsive */
@media screen and (max-width:960px){
  #search-form{width:100%;background:#263142;padding:5px 0;}
  #search-form td.search-box{padding-right:0;width:100%;}
  #search-form input#search-box[type="text"]{background:#fff;}
  #search-form input#search-box[type="text"]:focus{background:#fefefe;outline:none;}
;}
@media only screen and (max-width:768px){
  .nav li ul:before{display:none;height:auto;overflow:hidden;border-bottom:1px solid rgba(0,0,0,0.1);}
  #nav{background:#374760}
  .nav{float:none;width:100%;max-width:100%;}
  .active{display:block;}
  .kang-teja > li > a.active{background:#263142;}
  .kang-teja > li > a.active:hover{background:#263142;}
  #search-form{margin:0;}
  .nav > li{float:none;overflow:hidden;}
  .nav ul{display:block;width:100%;float:none;}
  .kang-teja li ul{background:#f6f6f6;box-shadow:none;}
  .kang-teja li ul li a{background:#f0f0f0;}
  .kang-teja > li > a{background:#263142;height:40px;line-height:40px;}
  .kang-teja li li a:hover{background:#263142;color:#fff;}
  .nav > li.hover > ul,.nav li li.hover ul{position:static;}
  .kang-teja li .parent:after,.kang-teja li ul li .parent:after{content:"\f0d7";font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;padding-right:5px;float:right;color:#949ea0;}
  .kang-teja li:active .parent:after,.kang-teja li ul li:active .parent:after{color:#c5cbd0;}
  #search-form td.search-box{padding:0 0 0 10px;}
  #search-form td.search-button{width:1%;}
  #search-form input#search-box[type="text"]{margin:0;background:#fff;}
  #search-form input#search-box[type="text"]:focus{background:#fdfdfd;outline:none;}
;}
@media only screen and (max-width:640px){
  #nav{background:#374760;margin:0;height:46px;line-height:46px;}
;}
</style>

<script type='text/javascript'>
//<![CDATA[
// Main Menu
var ww=document.body.clientWidth;$(document).ready(function(){$(".nav li a").each(function(){if($(this).next().length>0){$(this).addClass("parent")}});$(".menu-slide").click(function(e){e.preventDefault();$(this).toggleClass("active");$(".nav").toggle()});adjustMenu()});$(window).bind("resize orientationchange",function(){ww=document.body.clientWidth;adjustMenu()});var adjustMenu=function(){if(ww<768){$(".menu-slide").css("display","inline-block");if(!$(".menu-slide").hasClass("active")){$(".nav").hide()}else{$(".nav").show()}$(".nav li").unbind("mouseenter mouseleave");$(".nav li a.parent").unbind("click").bind("click",function(e){e.preventDefault();$(this).parent("li").toggleClass("hover")})}else if(ww>=768){$(".menu-slide").css("display","none");$(".nav").show();$(".nav li").removeClass("hover");$(".nav li a").unbind("click");$(".nav li").unbind("mouseenter mouseleave").bind("mouseenter mouseleave",function(){$(this).toggleClass("hover")})}}
//]]>
</script>
    Buat kalian yang menu drop downnya tidak muncul, silahkan tambahkan script berikut di atas </head> 
    
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js'></script>
    Atau Icon Font Awesomenya tidak tampil.. silahkan masukan script ini di atas kode </head> juga. 
    
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css">

    Kalo sudah tinggal ganti tanda pagar dengan link kalian dan judul menunya juga ganti.
  • Save widget n done............
Cukup sekian dan erimakasih, semoga artikel tentang Cara Memasang Menu Navigation Bar Responsive di blog ini bermanfaat..
Apabila ada yang mau ditanyakan, silahkan bertanya di kolom komentar..
13 komentar
  1. C2 LABSOctober 19, 2016 at 12:50 PM

    thankss banget,, menunya keren

    ReplyDelete
  2. sigit sugiartoFebruary 16, 2017 at 7:40 AM

    ko menu toggle nya kalau i clik malah nutup ke atas ya mas? bukan mbuka ke bawah jai bila paa versi seluler menunya ke halang toggle apa ada solusi kang

    ReplyDelete
    Replies
    1. Mas TamvanFebruary 16, 2017 at 7:49 AM

      Saya cek scriptnya normal gan..
      Coba saya liat hasil pemasangan agan.

      Delete
  3. UnknownMay 11, 2017 at 10:56 PM

    KOK MENU NYA KGK BISA KE BAWAH SIH

    ReplyDelete
  4. Qi.Sha.RaJune 4, 2017 at 10:31 PM

    salam dari malaysia....tuto nie berguna sangat... <3 <3

    ReplyDelete
  5. UnknownJune 6, 2017 at 12:02 AM

    gan script biar jadi sticky yg mana?

    ReplyDelete
    Replies
    1. Mas TamvanJune 6, 2017 at 12:13 AM

      Tambahkan Script sticky ini ↓

      <script type='text/javascript'>
      //<![CDATA[
      $(document).ready(function() {
      // Menentukan elemen yang akan dijadikan sticky yaitu .menunav
      var navSticky = $('#nav').offset().top;
      var menuFixed = function(){
      var scrollTop = $(window).scrollTop();
      // Ketika discroll maka menu akan selalu diatas, dan sebaliknya
      if (scrollTop > navSticky) {
      $('#nav').css({ 'position': 'fixed', 'top':0, 'z-index':9999 });
      } else {
      $('#nav').css({ 'position': 'relative' });
      }
      };
      // Jalankan fungsi
      menuFixed();
      $(window).scroll(function() {
      menuFixed();
      });
      });
      //]]>
      </script>


      di atas kode ↓
      </body>

      Delete
  6. tutorial androidJune 7, 2017 at 2:57 AM

    thak mas, berhasil di terapkan

    ReplyDelete
  7. Zona InternetkuFebruary 2, 2018 at 11:28 PM

    wah menunya keren banget mas, makasih tutornya mas

    kira kira disini ada tutorialnya gak untuk merancang script yang bagian jquery kayak menu di atas?

    ReplyDelete
    Replies
    1. Mas TamvanFebruary 3, 2018 at 12:31 AM

      Ya sama-sama.
      Coba cari di menu navigation / kunjungi
      https://mastamvan.blogspot.com/p/kumpulan-menu-navigation-bar-responsive.html

      Delete
  8. Hendra GunawanSeptember 18, 2018 at 9:40 AM

    wah cocok nih, mantap. Ijin sedot gan... makasih

    ReplyDelete