Melanjutkan dari sesi sebelumnya, pada kesempatan kali ini saya akan menjelaskan cara membuat hover active navbar bootstrap dengan jQuery part2. Jika pada sesi sebelumnya teman-teman sudah buat kode jQuery untuk menu navbar tersebut, disini akan saya jelaskan maksud dari kode tersebut. Namun perlu saya ingatkan sebelumnya ke teman-teman, untuk kode $(“ul li”) bisa teman-teman sesuaikan dengan struktur HTML menu navbar yang teman-teman buat. pada contoh kasus disini struktur HTML menu navbar yang saya miliki seperti kode berikut :

Jadi, jika saya memiliki kode $(“ul > li”).hover berarti saya akan menjalankan hover menu pada element LI yang hanya ada di dalam pembungkus element UL. Selanjutnya apabila event dari hover tersebut sudah sesuai dan berjalan maka saya tambahkan class active pada menu LI yang sedang di hover, makanya disini saya lanjutkan dengan kode $(this).addClass(‘active’); dimana kode this adalah untuk mendapatkan suatu element yang sedang berjalan pada event tersebut sedangkan untuk kode addClass(‘active’); adalah untuk menambahkan class selektor css yang bernama active untuk element HTML LI tersebut begitupun sebaliknya, untuk kode $( this ).removeClass(‘active’); adalah kode untuk menghapus class selektor css dari element LI tersebut jika hover dari menu navbar tersebut dilepas.

Sedangkan untuk kode $(this).toggleClass(‘active’); adalah salah satu method jQuery gabungan dari kedua methode addClass dan removeClass tersebut, namun methode tersebut akan berjalan secara teratur dengan nilai True yang kemudian dilanjut dengan nilai False untuk Event selanjutnya, dan akan terus berulang. untuk Nilai True disini adalah kode $(this).addClass(‘active’); sedangkan untuk nilai False adalah kode $( this ).removeClass(‘active’); .Namun yang perlu saya ingatkan kembali, untuk kode $(“ul > li“).hover harus teman-teman sesuaikan dengan struktur HTML menu navbar yang teman-teman buat, karena kode tersebut sangat berpengaruh besar untuk berjalannya kode jQuery tersebut, dan semua kode jQuery yang akan dijalankan mengacu dari event Tersebut. Berikut kode HTML lengkap yang saya buat dibawah ini dan bisa jadi acuan teman-teman.

Sampai disini penjelasan saya mengenai cara membuat hover active navbar bootstrap dengan jQuery, terima kasih.