Membuat Class Menu Active AdminLTE Menjadi Dinamis

AdminLTE merupakan template admin yang menurut saya cukup populer dan banyak sekali digunakan, selain karena mudah digunakan juga template tersebut gratis.

Mungkin sebagian dari kita menyadari bahwa ternyata class – class pada menu sidebardi template tersebut tidaklah dinamis dalam artian misalkan kita lagi aktif pada url dengan ‘menu a’, class menunya ternyata tidak aktif pada ‘menu a’. Nah untuk mengatasi masalah tersebut, kita cukup buat kostumisasi atau file javascript untuk membuat menunya / class ‘active’ pada template menjadi lebih dinamis

Kalian bisa menambahkan kostum berikut pada projek web kalian yang menggunakan template AdminLTE

		<script>
			$(function () {
			    var url = window.location.href; 

			   
			    $('ul.nav-sidebar a').filter(function () {
			        return this.href === url;
			    }).addClass('active');

	
			    $('ul.nav-treeview a').filter(function () {
			        return this.href === url;
			    }).parentsUntil(".nav-sidebar > .nav-treeview")
			        .css({'display': 'block'}) // Tampilkan menu treeview
			        .addClass('menu-open') // Tambahkan kelas menu-open
			        .prev('a') // Ambil elemen sebelumnya (link parent)
			        .addClass('active'); // Tambahkan kelas active pada parent
			});
		</script>

PLEASE SHARE

Share it Share it Tweet Share it Pin it

Ahmad Zaelani

Seorang laki - laki biasa yang senang duduk sendirian di pinggir pantai, pengagum embun pagi dan lembayung senja, suka blogging, coding dan jogging. Moto hidupnya adalah hidup santai dan simple