Cara Membuat Menu Active Sederhana Pada Website

Halo, ketemu lagi dengan saya 🙂 apa kabar nya ? semoga baik yah, amin.

Pada artikel kali ini saya akan berbagi tutorial mengenai Cara Membuat Menu Active Sederhana Pada Website, langsung saja yuk kita praktikan !

1. Seperti biasa buka dulu teks editornya, kemudian ketikan kode HTML berikut.

  <div class="container">
      <nav class="navecation">
       <ul id="navi">
        <li><a class="menu active"#">Home</a></li>
        <li><a class="menu" href="#">Profile</a></li>
        <li><a class="menu" href="#">Services</a></li>
        <li><a class="menu" href="#">Contact Us</a></li>          
        <li><a class="menu" href="">Our Blog</a></li>
      </ul>
    </nav>
  </div>

2. Kalo sudah lanjutkan untuk kode CSS brikut ini.

body{
  font-sze:14px;
}

.container{
  max-width:960px;
  margin:0 auto;
}
nav ul li{
  list-style:none;
  float:left;
  padding-right:20px;
}
nav ul li a{
  text-decoration:none;
  color:#222;
  background-color:#ccc;
  padding:4px 5px;
  border-radius:3px;
}
.active{
  background-color:#035AAB;
  color:#fff;

}

3. Setelah itu, ketikan lagi kode javascript berikut.

$(document).ready(function(){
  $('ul li a').click(function(){
    $('li a').removeClass("active");
    $(this).addClass("active");
});
});

4. Kalo sudah semua diketikan kode nya, jangan lupa disimpan, kemudian buka di browser nya masing-masing dan lihat hasil nya. Selesai

Cukup mudah yah ? sampai disini pertemuan kali ini, semoga bermanfaat, amin.

Selamat mencoba.