Cara Membuat Menu Aktif dengan Jquery

Masih mengenai desain menu pada tampilan web, jika kemarin saya telah kasih referensi bagaimana cara membuat menu dropdown sederhana dengan jquery, kali ini akan saya kasih juga referensi buat kalian yang ingin membuat menu aktif. Menu aktif merupakan salah satu jenis menu yang sangat banyak digunakan, karena dengan tampilan menu seperti ini, pengguna akan tahu halaman mana yang sedang aktif. Baiklah langsung saja simak tutorial cara membuat menu aktif dengan jquery.

Pertama-tama, untuk membuat menu kita akan buat struktur terlebih dahulu untuk list menu nya dengan kode HTML berikut.

<div class="container">
    <nav class="navecation">
       <ul id="">
        <li><a class="list active" href="#">Home</a></li>
        <li><a class="list" href="#">About</a></li>
        <li><a class="list" href="#">Blog</a></li>
        <li><a class="list" href="#">Product</a></li>
        <li><a class="list" href="#">Services</a></li>
        <li><a class="list" href="#">Contact Us</a></li>          
      </ul>
    </nav>
</div>

Setelah membuat list menu seperti diatas, selanjutnya adalah kita akan berikan sedikit desain tampilan pada menu list diatas agar terlihat lebih bagus, dan menarik untuk kita lihat. Berikut kode CSS3 untuk desain list menu.

body {
    background-color: #34495e;
}
.container{
     max-width:500px;
      margin:0 auto;
      background-color: yellow;
}
nav ul li{
      list-style:none;
  }
nav ul li a{
      text-decoration:none;
      color:#222;
      background-color:#ecf0f1;
      padding:10px;
      float:left;
      font-weight: bold;
      width:
}
.active{
      background-color:#d35400;
      color:#fff;

}

Langkah terakhir adalah, menambahkan fungsi jquery berikut ini untuk membuat menu aktif.

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
          $('ul li a').click(function(){
            $('li a').removeClass("active");
            $(this).addClass("active");
        });
    });
</script>

Pada kode jquery diatas kita bisa lihat, bahwa sebenarnya kita telah membuat fungsi removeClass dan addClass untuk menu aktif nya. Jadi sederhana nya ketika kita klik salah satu menu diatas, class aktif pertama akan dihapus dan akan digantikan dengan addClass baru pada menu berikutnya. Nah, setelah semua telah diketikan, simpan filenya kemudian buka pada browser dan lihat hasilnya. Maka akan terlihat tampilan menu seperti gambar berikut.

Cara Membuat Menu Aktif dengan Jquery

Jika kita klik salah satu menu, maka menu yang kita klik akan aktif dengan tanda background di list menu. Baik cukup sekian tutorial mengenai cara membuat menu aktif dengan jquery, semoga bermanfaat dan selamat mencoba.

2 Oktober 2017

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Kursus Postgre SQL Database Developer Terbaik 2024 di Jakarta
chat