logo blog

Simple Menu Navigation Bar Responsive

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



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.

Share this:

Berlangganan via email

Agan Sedang Membaca Artikel : Simple Menu Navigation Bar Responsive. Silahkan masukan email anda dibawah ini! dan nanti akan otomatis mendapatkan kiriman artikel terbaru dari Blog Mas Tamvan. Terimakasih.

Kumpulan Tips Trik Blogger

Blog Mas Tamvan

Terima Kasih Sudah Membaca Artikel Tentang : Simple Menu Navigation Bar Responsive. Jika Ada Yang Mau Request Tutorial Silahkan Beri Tahu Saya Di Kolom Komentar :)

Comment Loading