Tutorial membuat dynamic class active pada navbar dan sidebar


Oke selamat bertemu kembali di artikel blog saya, sudah lama tidak buat tutorial, hari ini saya akan mencoba membuat sebuah tutorial yang mana berguna saat tertentu untuk membuat web kita lebih bagus.

dari judul artikel blog saya  ya itu membuat dynamic class active pada menu, yaitu maksudnya kita mungkin sudah tidak asing lagi dengan class active pada menu navbar atau sidenav pada template admin. pada tutorial ini saya menggunakan template adminLTE.

jadi fungsinya adalah ketika kita mengklik salah satu menu menuju kehalaman maka menu akan otomatis terbuka dan berubah warna sesuai dengan halaman dan link yang dituju, jadi biar nggak bingung kira gambarnya seperti dibawah ini

pada gambar diatas yg dilingkari sudah memiliki class active sesuai dengan halamannya, jadi langsung saja kita ke tutorialnya

jika menggunakan template diatas maka tentu sudah ada jquery.min.js
 tinggal tambahkan

<script>
    /** tambah class active jika di klik */
    var url = window.location;
// ini untuk menambahkan class active pada menu yg tidak memiliki anak atau single link
$('ul.sidebar-menu a').filter(function() {
 return this.href == url;
}).parent().addClass('active');
// ini untuk menu beranak, jadi otomatis akan terbuka sesuai dengan link tujuan
$('ul.treeview-menu a').filter(function() {
 return this.href == url;
}).parentsUntil(".sidebar-menu > .treeview-menu").addClass('active');
</script>

Demikianlah tutorial singkat saya, jika ada yg kurang paham atau yg ada ditanyakan pada artikel ini mohon tinggalkan komentarnya