MEMBUAT MENU CLASS ACTIVE DENGAN PHP

ASSALAMU'ALAIKUM WAROHMATULLOHI WABAROKATUH...

Selamat pagi para Pembaca,

Hari ini di pagi yang udaranya masih sejuk ini saya akan berbagi postingan untuk membuat sebuah MENU CLASS ACTIVE MENGGUNAKAN PHP, bahasa pemrograman yang sangat populer di kalangan Programmer  karna sedikit unik.

Baiklah, langsung saja kita mulai dengan membuat sebuah daftar menu biasa terlebih dahulu.

<div id="menu">
<ul>
<li><a href="menu-active.php?page=home">HOME</a></li>
<li><a href="menu-active.php?page=about">About</a></li>
<li><a href="menu-active.php?page=contact">Contact</a></li>
</ul>
</div>

Sekarang kita buat sebuah cssnya agar terlihat sedikit lebih cantik, walaupun saya tidak begitu mahir dalam menggunakan CSS setidaknya ini dapat memberikan sedikit hiasan.

#menu {
width: 100%;
overflow: auto;
margin: 0px;
padding: 0px;
background: #0079a1;
}
#menu ul {
margin: 0px;
padding: 0px;
}
#menu ul li {
display: block;
padding: 5px 10px;
list-style: none;
float: left;
}
#menu ul li a {
text-decoration: none;
color: #fff;
}

Nah sekarang coba kita jalankan inilah hasilnya.

Sekarang untuk membuat class active tentunya kita buat terlebih dahulu css class active nya.

.active {
background: #1f3c52;
}

Nah, sekarang kita masuk ke dalam bahasa pemrograman PHP nya.

Buat sebuah variabel permintaan halaman dan variabel class active seperti berikut;

<?php error_reporting(0); $page=$_REQUEST['page']; $active='class="active"'; ?>

Pada code tersebut saya menambahkan error_reporting untuk menghilangan error akibat versi PHP yang terbaru.

Kemudian kita ubah sedikit pada code daftar menu di awal dengan menambahkan sedikit kondisi dimana jika permintaan link dengan menu sama maka akan kita berikan CLASS ACTIVE menjadi seperti berikut:

<div id="menu">
<ul>
<li <?php if($page=='home') { echo $active;} ?>><a href="menu-active.php?page=home">HOME</a></li>
<li <?php if($page=='about') { echo $active;} ?>><a href="menu-active.php?page=about">About</a></li>
<li <?php if($page=='contact') { echo $active;} ?>><a href="menu-active.php?page=contact">Contact</a></li>
</ul>
</div>

Nah jika halaman nya masih kosong atau pagenya belum ada gimana?

hehehe... bagi para master tentunya sudah paham dan mungkin tidak akan mencari postingan ini, jadi untuk para newbie seperti saya. Tambahkan condisi atau menggunakan (" || ") menjadi seperti berikut :

<div id="menu">
<ul>
<?php error_reporting(0); $page=$_REQUEST['page']; $active='class="active"'; ?>
<li <?php if($page=='home' || $page=='') { echo $active;} ?>><a href="menu-active.php?page=home">HOME</a></li>
<li <?php if($page=='about') { echo $active;} ?>><a href="menu-active.php?page=about">About</a></li>
<li <?php if($page=='contact') { echo $active;} ?>><a href="menu-active.php?page=contact">Contact</a></li>
</ul>
</div>

Jadi SCRIPT lengkap dan hasil akhirnya seperti berikut :

<style type="text/css">
#menu {
width: 100%;
overflow: auto;
margin: 0px;
padding: 0px;
background: #0079a1;
}
#menu ul {
margin: 0px;
padding: 0px;
}
#menu ul li {
display: block;
padding: 5px 10px;
list-style: none;
float: left;
}
#menu ul li a {
text-decoration: none;
color: #fff;
}
.active {
background: #1f3c52;
}
</style>

<div id="menu">
<ul>
<?php error_reporting(0); $page=$_REQUEST['page']; $active='class="active"'; ?>
<li <?php if($page=='home' || $page=='') { echo $active;} ?>><a href="menu-active.php?page=home">HOME</a></li>
<li <?php if($page=='about') { echo $active;} ?>><a href="menu-active.php?page=about">About</a></li>
<li <?php if($page=='contact') { echo $active;} ?>><a href="menu-active.php?page=contact">Contact</a></li>
</ul>
</div>


Gambar hasilnya :

Saat halaman kosong.

Saat halaman contact di klik

Teriiima Kasih :
#ADMIN FITTRA FERDIANSYAH