Memasang Menu Navigation Bar Responsive

material menu navigation bar

Material Menu Navigation Bar Responsive

Membuat Menu Navigation Bar Responsive, kali ini saya akan berbagi Menu Bar /atau navigation bar yang responsive dan simple. Bagi kalian yang blognya belum terpasang menu navigation bar, bisa mencoba menu yang satu ini.

Juga buat yang ingin mengganti menunya menjadi suport mobile agar mudah untuk melihat isi dari daftar menu tersebut.

Sebelumnya saya juga sudah berbagi menu bar yang responsive dengan efek scroll....Membuat Responsive Menu Navigation Bar Scrolling

Tampilan Menu Navigation bar ini seperti berikut ketika di buka dengan device atau resolusi monitor /atau layar yang lebih kecil.

material menu bar navigation

Nah buat yang ingin mencoba menu yang satu ini, silahkan ikuti tutorial cara pemasangannya.
  • Login ke Blogger.com
  • Masuk ke tab Template Edit HTML Cari Kode ]]></b:skin> atau </style>
  • Masukan CSS di bawah ini, tepat di atasnya. 
    • 
.mainNav {background: #efefef;color: #1a1b18;max-height: 70px;position: relative;margin: 33px;font: 14px/1.5em "Open Sans";}
.mainNav a {text-decoration: none;}
.mainNav .logo {display: inline-block;color: #fff;font-size: 1.7em;height: 40px;line-height: 1.55em;letter-spacing: -2px;text-transform: uppercase;padding: 0 10px;z-index: 0;/*POSITION*/position: relative;}
.mainNav .logo:hover:before {background: #292938;}
.mainNav .logo:before {content: "";background: #3C91E6;z-index: -1;/*POSITION*/position: absolute;top: 0;right: 0;bottom: 0;left: 0;}
.mainNav .logo a {color: #efefef;}
.mainNav .menu {background: #efefef;box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.1);border-top: 1px solid #d9d9d9;display: none;list-style: none;margin: 0;padding: 0;text-align: center;/*POSITION*/position: absolute;top: 60px;right: 0;left: 0;}
.mainNav .menu a {color: #292938;border-bottom: 1px solid #d9d9d9;font-weight: bold;display: block;padding: 15px;}
.mainNav .menu a:hover {background: #292938;color: #efefef;}
.mainNav .navBars {cursor: pointer;display: inline-block;font-size: 1.7em;line-height: 1.5em;float: right;/*USER SELECTION*/-moz-user-select: none;-ms-user-select: none;user-select: none;-webkit-user-select: none;}
#xBxHack {visibility: hidden;opacity: 0;position: absolute;top: -99999px;}
#xBxHack:checked ~ nav .menu {display: block;}
.bungkus {max-width: 960px;margin: 0 auto;padding: 10px;}
@media screen and (min-width: 600px) {
.mainNav {overflow: hidden;}
.mainNav .navBars {display: none;}
.mainNav .bungkus {padding-top: 0;padding-bottom: 0;}
.mainNav .logo {margin: 10px 0;}
.mainNav .menu {display: block;box-shadow: none;border: none;float: right;/*POSITION*/position: static;}
.mainNav .menu li {display: inline-block;}
.mainNav .menu a {border: none;padding: 20px 10px;}}
  • Selanjutnya, cari kode </body> lalu masukan javascript dibawah ini tepat diatasnya. 
    • 
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
 "use strict";
 var myNav = {
  init: function () {
   this.cacheDOM();
   this.browserWidth();
   this.bindEvents();
  },
  cacheDOM: function () {
   this.navBars = $(".navBars");
   this.xBxHack = $("#xBxHack");
   this.navMenu = $("#menu");
  },
  browserWidth: function () {
   $(window).resize(this.bindEvents.bind(this));
  },
  bindEvents: function () {
   var width = window.innerWidth;

   if (width < 600) {
    this.navBars.click(this.animate.bind(this));
    this.navMenu.hide();
    this.xBxHack[0].checked = false;
   } else {
    this.resetNav();
   }
  },
  animate: function (e) {
   var checkbox = this.xBxHack[0];

   if (!checkbox.checked) {
    this.navMenu.slideDown();
   } else {
    this.navMenu.slideUp();
   }

  },
  resetNav: function () {
   this.navMenu.show();
  }
 };
 myNav.init();
});
//]]>
</script>
  • Langkah terakhir copy HTML dibawah ini lalu masukan kode ini di bawah </header> atau <body>. Atau terserah kalian mau ditaro dimana. 
    • 
<!--Responsive Nav-->
<input type="checkbox" id="xBxHack" />
<nav id="mainNav" class="mainNav">
 <div class="bungkus">
  <div class="logo"><a href="#">Mas <strong>Tamvan</strong></a></div>
  <label class="navBars" for="xBxHack">
   <i class="fa fa-bars"></i>
  </label>
  <ul id="menu" class="menu">
   <li><a href="#">Home</a></li>
   <li><a href="#">About</a></li>
   <li><a href="#">Profolio</a></li>
   <li><a href="#">Contact</a></li>
  </ul>
 </div>
</nav>
<!--END Responsive Nav-->
    Untuk letak penyimpanan Menu navigation ini, kalian bisa taro dimana saja, ntah itu di atas header, dibawah, d dalam body, d atas postingan.
    Sesuaikan saja dengan template kalian.

    Menu Navigation Bar Responsive ini memerlukan ajaq jquery lubis di template kalian, jika belum ada... masukan script berikut di atas </head> 
    
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'></script>
  • Save Template n Done

Cukup sekian dan terimakasih, semoga artikel tentang Memasang Menu Navigation Bar Responsive ini bermanfaat.

Jangan Lupa tinggalkan jejak kalian di kolom komentar, supaya nanti saya juga bisa mengunjungi blog kalian dengan mudah :)
Tinggalkan Komentar