Melanjutkan dari sesi sebelumnya, pada kesempatan kali ini saya akan menjelaskan cara membuat menu active berdasarkan halaman yang sedang aktif dengan php dan jquery. Jika pada sesi sebelumnya teman-teman sudah membuat file dengan nama menu.php dimana yang didalamnya terdapat element -element menu yang terkait, namun pada kesempatan kali ini akan saya lanjutkan untuk membuat file index.php nya, dimana didalam file tersebut nantinya tersimpan kode-kode jquery beserta kondisi halaman menu tersebut.
Perlu teman-teman ketahui lagi sebelumnya, pada contoh yang saya jelaskan disini sudah menggunakan halaman dinamis, dimana nantinya teman-teman tidak perlu repot-repot lagi membuat halaman dinamis tersebut di php karena hanya tinggal perlu teman-teman sesuaikan saja. Langsung saja teman-teman bisa langsung ikuti tahapa yang saya berikan dibawah ini :
- Teman-teman buat lagi satu buah file dengan nama index.php didalam folder project teman-teman yang sejajar dengan file menu.php yang sebelumnya sudah dibuat.
- Jika sudah selanjutnya teman-teman ketikan kode seperti berikut
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Cara Membuat Class Menu Active Berdasarkan Halaman Yang Sedang Aktif Dengan PHP Dan Jquery</title> <style> ul{list-style:none; overflow: hidden;} ul li{float:left; padding: 7px;} .active{ font-weight:bold; color: red; } </style> </head> <body> <?php echo "<div class='menu'>"; include "menu.php"; echo "</div>"; ?> <?php if($_GET["halaman"] == "home"){ echo "<div>Ini adalah halaman home</div>"; }elseif($_GET["halaman"] == "product"){ echo "<div>Ini adalah halaman product</div>"; }elseif($_GET["halaman"] == "about"){ echo "<div>Ini adalah halaman about</div>"; }elseif($_GET["halaman"] == "contact"){ echo "<div>Ini adalah halaman contact</div>"; }elseif($_GET["halaman"] == "gallery"){ echo "<div>Ini adalah halaman gallery</div>"; } ?> </body> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script> $(function() { var GetUrl = window.location.href.substr(window.location.href .lastIndexOf("/")+1); $(".menu ul li a ").each(function(){ // alert(GetUrl); if($(this).attr("href") == GetUrl || $(this).attr("href") == '' ) $(this).addClass("active"); }) }); </script> </html> |
- Selanjutnya teman-teman save file index.php tersebut.
Sampai disini penjelasan saya mengenai cara membuat menu active berdasarkan halaman yang sedang aktif dengan php dan jquery, semoga bermanfaat.