Pada kesempatan kali ini saya akan menjelaskan cara membuat menu active berdasarkan halaman yang sedang aktif dengan php dan jquery. Perlu teman-teman ketahui sebelumnya, untuk menambahkan class active pada menu html dengan php bisa dikolaborasikan dengan kode jquery. Jika pada artikel yang sebelumnya sudah pernah saya bahas cara membuat menu active otomatis dengan php, hampir sama dengan penjelasan yang saya buat disini, hanya saja pada penjelasan disini dikolaborasikan dengan jquery.
Yang nantinya dari kode jquery tersebut bisa secara otomatis menambahkan class active disetiap menu yang di klik atau menu halaman yang sedang aktif. Pada kode javascript tersebut saya menggunakan event jquery each() dimana event each() tersebut adalah untuk mencari element yang sama. Dan setelah event tersebut saya buat kondisi dimana ketika ada nilai attribute href yang sama maka akan menambahkan class active. Dari nilai attribute href tersebut sebelumnya didapatkan dari suatu variable dengan nama GetUrl dengan fungsi lastindexOf() dimana untuk kode lastindexOf tersebut adalah untuk mencari posisi index yang paling akhir dan untuk metode pencariannya yaitu dari kanan ke kiri namun untuk nilai dari index tersebut dihitung dari kiri ke kanan atau mencari url segment ke dua dari url tersebut.
Langsung saja untuk membuatnya teman-teman bisa ikuti tahapan yang saya berikan dibawah ini. Namun perlu diingat sebelumnya, nantinya teman-teman membutuhkan library dari javascript yaitu jquery. Namun tidak perlu teman-teman download file jquery tersebut, karena nanti bisa menggunakan file jquery CDN.
Berikut Tahapannya :
- Teman-teman buat terlebih dahulu satu buah file dengan nama menu.php didalam folder project teman-teman
- Jika sudah ketikan kode seperti berikut :
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<?php echo "<div class='menu'> <ul> <li><a href='index.php?halaman=home'>Home</a> <li><a href='index.php?halaman=product'>Product</a> <li><a href='index.php?halaman=about'>About</a> <li><a href='index.php?halaman=contact'>Contact Us</a> <li><a href='index.php?halaman=gallery'>Gallery</a> </ul> </div>"; ?> |
- Jika sudah, selanjutnya teman-teman save terlebih dahulu file menu.php tersebut.
Untuk pembahasan selanjutnya, akan saya jelaskan cara membuat menu active berdasarkan halaman yang sedang aktif dengan php dan jquery pada sesi berikutnya, semoga bermanfaat.