Pada kesempatan kali ini saya akan menjelaskan cara membuat hover active navbar bootstrap dengan jQuery. Perlu teman-teman ketahui sebelumnya, di navbra bootstrap sudah terdapat class active yang dapat digunakan di list menu pada navbar tersebut. Namun biasanya class active tersebut digunakan pada menu halaman yang sedang aktif, dan kebanyakan website-website yang menggunakan bootstrap tidak memanfaatkan class active tersebut di hover menu website yang dibuatnya dan kebanyakan dari mereka membuat kode hover css sendiri untuk menu hover yang diinginkan.

Sebenarnya dengan membuat kode css hover sendiri tidak masalah bagi saya, namun alangkah baiknya jika teman-teman memanfaatkan class active yang sudah disediakan di navbar bootstrap baik itu untuk halaman aktif, hover, dll. Karena metode tersebut lebih efisien jika dibandingkan dengan membuat kode css sendiri untuk hover tersebut. Namun untuk dapat memanfaatkan class yang sudah disediakan bootstrap untuk hover pada navbar tersebut saya gunakan dengan library javascript yaitu jQuery. Yang dimana nantinya ketika menu dari navbar tersebut di sorot atau di hover akan menambahkan class active yang sudah disediakan bootstrap dan sebaliknya, jika hover tersebut dilepas maka akan menghapus secara otomatis class active tersebut.

Tentunya tidak ada lagi metode selain menggunakan library JavaScript yaitu jQuery selain harus membuat kode css sendiri untuk hover menu navbar tersebut. Utuk membuatnya teman-teman bisa ikuti tahapan yang saya berikan dibawah ini.

Berikut Tahapannya

  • Disini saya asumsikan teman-teman sudah mendownload paket bootstrap.
  • Selanjutnya teman-teman bisa download dan tambahkan library JavaScript yaitu jQuery yang versi 3.3.1 atau jika teman-teman tidak ingin download file jQuery tersebut bisa gunakan yang CDN , berikut link nya:

  • Selanjutnya teman-teman bisa tambahkan kode berikut tepat diatas sebelum kode penutup </html>. Berikut kodenya :

  • Pada contoh kasus disini saya memiliki struktur navbar menu html bootstrap seperti berikut :

Untuk pembahasan selanjutnya, akan saya jelaskan cara membuat hover active navbar bootstrap dengan jQuery pada sesi berikutnya, semoga bermanfaat.