Cara Membuat Menu Aktif dengan Jquery

02/10/2017    Risman Hakim    6614     Website

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.

Artikel, jQuery, Web Design, Javascript, HTML CSS, website

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More