Simple Menu Navigation Bar Responsive

Membuat Menu Bar, Menu Navigation Responsive

Membuat menu bar navigation responsive simple di blog

Malam sobat, kali ini saya akan share menu navigation bar responsive dengan tombol search di blog. Bagi kalian yang ingin mengganti atau merubah dan memasang menu bar / menu navigation menjadi responsive, silahakn coba menu ini cukup simple. Menu navigation ini tidak drop down jadi hanya tampil seperti biasa.

Nah bagi kalian yang ingin melihat tampilan dari menu ini, silahkan klik link dibawah ini.


Baca Juga tutorial lainnya ya :)

Tutorial Blogger Lainnya :


Cara Membuat Simple Navigation Bar Di Blogger.

  • Login ke Blogger.com
  • Masuk ke tab Template Edit HTML Cari Kode ]]></b:skin> atau </style>
  • Masukan CSS di bawah ini, tepat di atasnya. 


* {
  margin: 0;
  padding: 0;
  font: 15px "Ubuntu";
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

form {
  position: relative;
  width: 60px;
  height: 51px;
  overflow: hidden;
  transition: width 0.5s;
  margin: auto;
  -webkit-backface-visibility: hidden;
  background: rgba(0, 0, 0, 0);
  float: right;
}
form.opened {
  width: 330px;
}
form.opened:before {
  position: fixed;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
}
input[type="search"] {
  position: absolute;
  top: 0;
  right: 28px;
  height: 51px;
  width: 0;
  float: left;
  font-size: 1.5em;
  border-radius: 30px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  outline: none;
  border: none;
  padding-left: 20px;
  color: #28d7d7;
  transition: width 0.5s;
}
form.opened input[type="search"] {
  width: 300px;
  transition: width 0.5s;
}
button {
  position: absolute;
  top: 0;
  right: 0;
  width: 60px;
  height: 100%;
  background: #28d7d7;
  border: none;
  color: #FFF;
  font-size: 1.3em;
  outline: none;
  cursor: pointer;
}
form.opened button {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

nav {
  position: relative;
  width: 90%;
  margin: 45px auto;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -ms-border-radius: 6px;
  -o-border-radius: 6px;
  border-radius: 6px;
  background: -webkit-linear-gradient(#111111, #222222);
  background: -moz-linear-gradient(#111111, #222222);
  background: -o-linear-gradient(#111111, #222222);
  background: -ms-linear-gradient(#111111, #222222);
  background: linear-gradient(#111111, #222222);
  overflow: hidden;
}
@media (max-width: 1110px) {
  nav {
    margin: 0;
    width: 100%;
    height: 45px;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
  }
}
nav > h3 {
  display: none;
}
@media (max-width: 1110px) {
  nav > h3 {
    display: block;
    color: #ffffff;
    font-size: 1.3em;
    background: -webkit-linear-gradient(#606c88, #3f4c6b);
    background: -moz-linear-gradient(#606c88, #3f4c6b);
    background: -o-linear-gradient(#606c88, #3f4c6b);
    background: -ms-linear-gradient(#606c88, #3f4c6b);
    background: linear-gradient(#606c88, #3f4c6b);
    position: absolute;
    right: 0px;
    padding: 10px 13px 11px 13px;
    cursor: pointer;
  }
}
nav > ul > li {
  display: inline-block;
}
@media (max-width: 1110px) {
  nav > ul > li {
    display: block;
  }
}
nav > ul > li > a,
a:visited {
  display: block;
  padding: 15px;
  color: #777777;
  font-weight: 300;
}
nav > ul > li > a:hover {
  color: #ffffff;
}
@media (max-width: 1110px) {
  nav > ul > li > a:hover {
    background: -webkit-linear-gradient(#606c88, #3f4c6b);
    background: -moz-linear-gradient(#606c88, #3f4c6b);
    background: -o-linear-gradient(#606c88, #3f4c6b);
    background: -ms-linear-gradient(#606c88, #3f4c6b);
    background: linear-gradient(#606c88, #3f4c6b);
  }
}
.active,
.active:visited {
  color: #ffffff;
  background: -webkit-linear-gradient(#606c88, #3f4c6b);
  background: -moz-linear-gradient(#606c88, #3f4c6b);
  background: -o-linear-gradient(#606c88, #3f4c6b);
  background: -ms-linear-gradient(#606c88, #3f4c6b);
  background: linear-gradient(#606c88, #3f4c6b);
}
@media (max-width: 1110px) {
  .active,
  .active:visited {
    background: transparent linear-gradient(#606c88, #3f4c6b) repeat scroll 0% 0%;
  }
}
.expand {
  height: 100%;
}
.hide {
  display: none;
}
  • Selanjutnya, cari kode </body> lalu masukan javascript dibawah ini tepat diatasnya. 

<script type='text/javascript'>
$(document).ready(function(){
    $('nav').click(function() {
        $(this).toggleClass('expand');
        $(this).siblings().not(this).toggleClass('hide');
    });
});
// https://dribbble.com/shots/2308755-Search-Transform-Principle-Freebie
$('button').on('click', function(e) {
  e.preventDefault();
  $('form').addClass('opened');
  $('input[type="search"]').focus();
});

$('input[type="search"]').on('focusout', function(e) {
  $('form').removeClass('opened');
});
</script>

  • Langkah terakhir copy HTML dibawah ini lalu masukan kode ini di bawah <body>. Atau terserah kalian mau ditaro dimana. 


<nav>
  <h3>&#9776;</h3>
  <ul>
    <li><a class="active" href="#">MS.Tamvan</a></li>
    <li><a href="#">Desktop</a></li>
    <li><a href="#">Phone</a></li>
    <li><a href="#">Tablet</a></li>
    <li><a href="#">TV</a></li>
    <li><a href="#">Server</a></li>
    <li><a href="#">Cloud</a></li>
    <li><a href="#">Management</a></li>
    <li><a href="#">Download</a></li>
      <form>
  <input type="search" placeholder="Search">
  <button>
    <span class="fontawesome-search"></span>
  </button>
</form>
  </ul>

</nav>

Langkah terakir simpan template dan lihat hasilnya.

Cukup sekian dan terimakasih, smeoga artikel tentang Menu bar navigation responsive ini bermanfaat, jangan lupa komentarnya apabila ada yang tidak dimengerti.
1 komentar: