Membuat Menu “Active” Dinamis Menggunakan Javascript

Assalamu’alaikum Wr. Wb.,

Pada kali ini saya akan memberikan sedikit tips untuk Anda pada saat mengembangkan sebuah website, yaitu membuat active menu yang dinamis.

Sebelumnya disini saya memberi tahu bahwa dalam tutorial ini saya tujukan kepada developer yang menggunakan framework Laravel, akan tetapi tidak menutup kemungkinan bisa digunakan pada framework lain atau bahkan pada web native.

Oke mari kita lanjut, biasanya ketika setup intial project (teruatma saat menggunakan template admin, seperti AdminLTE) sering atau bahkan selalu menggunakan sintaks berikut untuk mencari menu yang sedang dibuka.

<li class=" {{ Route::currentRouteName() == 'web.about' ? 'active' : '' }} ">

Maka tampilan menu apabila menu tersebut sedang diakses akan berbeda dengan menu lainnya seperti berikut:

Namun apabila menu dalam aplikasi Anda masih sedikit memang bukan masalah yang besar, akan tetapi bagaimana jika terdapat banyak menu? Pasti sintaks yang digunakan semakin banyak dan semakin ribet serta membingungkan. Oleh karena itu disini saya akan memberikan sintaks yang akan mempersingkat kode Anda untuk mengatasi permasalahan diatas.

Oke langsung saja, berikut sintaks Javascript yang digunakan untuk membuat active menu secara dinamis:

var url = window.location;

// for sidebar menu entirely but not cover treeview
$('ul.nav-sidebar a').filter(function () {
    if (this.href) {
        return this.href == url || url.href.indexOf(this.href) == 0;
    }
}).addClass('active');

// for the treeview
$('ul.nav-treeview a').filter(function () {
    if (this.href) {
        return this.href == url || url.href.indexOf(this.href) == 0;
    }
}).parentsUntil(".nav-sidebar > .nav-treeview").addClass('menu-open').prev('a').addClass('active');

Oh iya, jangan lupa menambahkan library JQuery sebelum sintaks tersebut ya! Dengan sintaks tersebut maka akan secara otomatis menambahkan class active pada menu yang sedang diakses.

 

Sekian tutorial yang dapat saya sampaikan, terimakasih👋

Wassalamu’alaikum Wr. Wb.