Mengatur aktif menu bootstrap

Mengatur aktif menu bootstrap

2598
4
SHARE

Halo sahabat, kita bahas masalah bootstrap yuk.. seru juga kayaknya. Bagi anda yang pernah menggunkan menu bootstrap tentu anda akan akrab dengan class=”active” yang menjadikan tampilan menu aktif berbeda dengan menu yang tidak aktif.

Berikut ini adalah screenshotnya

aktif menu bootstrap
Pada gambar di atas, menu Home sedang dalam keadaan aktif. Background warnanya terlihat berbeda dengan menu lain yang tidak aktif.

Pertanyaannya adalah bagaimana mengatur aktif menu pada bootstrap secara dinamis, sehingga menu aktif akan sesuai dengan menu yang dipilih.

Mengatur aktif menu bootstrap

Bila anda penasaran, berikut ini ada cara yang lebih singkat untuk membuat menu dan mengatur aktif menu bootstrap. Kita akan menggunakan fungsi foreach.

Step 1 : Kita siapkan dulu bahan-bahannya ya hehe yaitu bootstrap.min.css, bootstrap.min dan jquery-1.11.0.

Step 2 : Buatlah index.php dengan kode sebagai berikut

Jalankan index.php melalui browser anda. Anda akan mendapatkan hasil sesuai scrrenshot berikut ini :

class active bootstrap

Penjelasan
Baris 9 : Kita tentukan base url yang akan kita pakai. Dalam hal ini kita menggunakan query string route. Bila anda mengubah base url ini anda harus menyesuaikan kode di bawahnya.

Baris 10 s/d 33 : kita membuat menu dalam bentuk array. Untuk submenu kita menggunakan array dalam array.

Baris 36 s/d 76 : Kita menampilkan menu sesuai aturan bootstrap.

Baris 50 s/d 71 : Kita melakukan looping pada array menu. Bila value dari array menu tersebut merupakan array (artinya memiliki submenu) kita lakukkan looping lagi pada baris 64 s/d 67.

Baris 55 dan 60 : Kita melakukan pengecekan route, jika sesuai dengan $value atau terdapat dalam array $value kita tambahkan class active pada element li, sehingga akan menjadi menu aktif

Dengan cara ini kita lebih mudah dalam menampilkan menu menggunakan bootstrap karena kita hanya mengatur pada array menu dan tidak mengatur div element menu lagi.

Cobalah untuk menambahkan array menu sesuai keinginan anda, maka secara otomatis menu tersebut akan muncul lengkap dengan pengaturan aktif menunya.

Seru kan.. hehe.. selamat mencoba, semoga bermanfaat. Oia… pada bagian bawah menu anda akan mendapatkan pesan error

Warning: include() [function.include]: Failed opening ‘home.php’ bla bla bla…

Hal ini tidak menjadi masalah karena dalam hal ini kita memang belum membuat file untuk masing-masing tujuan menu tersebut. Kita hanya fokus pada menu dan aktif class. Anda dapat menambahkan sendiri nantinya.

Bila ada pertanyaan, kritik ataupun saran silahkan ditulis di bagian komentar ya. Terima kasih.

Bagikan artikel ini ya.. terima kasih

4 COMMENTS

LEAVE A REPLY