Cara Membuat Menu Aktif Sederhana dengan Jquery

Saat ini banyak sekali tampilan atau desain menu pada sebuah website begitupun dalam hal cara pembuatannya ada banyak bahasa program yang bisa kita pakai, mulai dari CSS3 sampai dengan menggunakan jquery sebagai tambahan efek dan animasinya. Nah berikut ini adalah salah satu contoh bagaimana Cara Membuat Menu Aktif Sederhana dengan Jquery. Dimana kita bisa melihat menu yang sedang aktif dijalankan. Simak langkah-langkahnya berikut.

Seperti biasa dalam membuat tampilan menu kita perlu membuat struktur menu terlebih dahulu dengan kode HTML5 berikut ini.

<div class="container">
    <nav class="menu">
      <ul id="navi">
        <li><a class="menu active" href="#">About</a></li>
        <li><a class="menu" href="#">Product</a></li>
        <li><a class="menu" href="#">Services</a></li>
        <li><a class="menu" href="#">Contact Us</a></li>  
        <li><a class="menu" href="#">Blogs</a></li>  
      </ul>
    </nav>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

Untuk daftar menu silahkan bisa menyesuaikan sendiri, setelah membuat struktur HTML5 seperti diatas, selanjutnya kita akan desain terlebih dahulu tampilan menu menjadi sedemikian rupa dengan kode CSS3 berikut ini.

body{
  font-sze:14px;
}

.container{
  width: 800px;
  margin:auto;
}
nav.menu {
  height: 50px;
}
nav ul li{
  list-style:none;
}
nav ul li a{
  text-decoration:none;
  color:#222;
  background-color:#ccc;
  float:left;
  padding: 0 49px;
  line-height: 50px;
  font-weight: bold;
}
.active{
  background-color:#f90;
  color:#fff;

}

Selanjutnya adalah tahap untuk membuat menu menjadi aktif artinya jika kita pilih salah satu dari menu yang ada menu akan ditandai sedang aktif dalam hal ini menu akan ditandai dengan warna backround. Ketikan kode jquery berikut untuk membuat fungsi aktif pada menu.

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

Pada kode jquery diatas kita telah set dengan menambahkan addclass artinya kita telah menambahkan class baru yakni class active sebagai penanda bahwa menu yang berwarna sedang aktif. Setelah semua kode diatas diketikan, simpan file terlebih dahulu kemudian buka pada browser masing-masing dan lihat hasilnya. Maka secara default menu yang aktif terlebih dahulu adalah about dan jika kita klik salah satu menu lain maka menu aktif akan berubah sesuai dengan menu yang kita klik.

Baik cukup sekian tutorial mengenai bagaimana Cara Membuat Menu Aktif Sederhana dengan Jquery. Semoga bermanfaat dan selamat mencoba 🙂

DEMO

Risman Hakim Author

Menjadi seorang Web Designer membuat saya ingin selalu berbagi ilmu. Berbagi tidak mengurangi ilmu, dengan berbagi ilmu akan terus bertambah. Kenal lebih jauh tentang saya di DUMET School :)

Leave a Reply

Your email address will not be published. Required fields are marked *