Membuat Menu Dinamis Class Active dengan PHP

Halo teman-teman kita berjumpa kembali di Blog YELLOWWEB.ID ini. Untuk tutorial kali ini kita akan mencoba bagaimana membuat menu dinamis, biasanya menggunakan Class active CSS. Menu yang akan kita buat nanti akan kita kombinasikan dengan file sintaks PHP. Yang bertujuan agar kita tidak melakukan prubahan perhalaman, saat adanya penambahan pada pilihan menu. Penjelasan detailnya sebagai berikut

Mungkin bagi teman-teman yang baru memulai belajar membangun sebuah web, merasa cukup kesulitan disaat membuat menu atau navigasi yang diberikan class active yang ingin digabungkan kedalam halaman web yang dinamis (PHP). Misalnya seperti ini kita memiliki beberapa halaman web, diantaranya home.php, about.php, gallery.php dan contact.php.

Kita bisa amati jika halaman web pada umumnya yang berganti hanya bagian isi(Content) saja. Untuk bagian header, menu(navigasi) sidebar dan footer akan selalu tetap.

Masalah disini muncul bagaimana caranya membuat menu tersebut dinamis, karena menu yang ada ada class khusus yaitu class active, yang menandakan bahwa halaman tersebut sedang dibuka.

Jika kita bisa rubah saja satu persatu, namun tentunya akan tidak efisien, bagaimana kalau kita memiliki halaman yang cukup banyak, kita harus merubah satu persatu disetiap halaman.

Teknik yang akan kita gunakan yaitu kita berikan tanda pada tiap-tiap halaman, disini kita memerlukan sedikit pengetahuan tentang PHP.

DEMO:http://www.yellowweb.id/demo/menu-dinamis-raw/index.php

Jika diperhatikan pada demo diatas, class active dapat berjalan seperti biasa. Langkah-langkahnya sebagai berikut:

buatlah beberapa file: index.php(home), about.php, gallery.php, contact.php, navigasi.php.

disini ada beberapa yang perlu kita perhatikan, setiap page akan kita berikan kode

pada bagian paling atas doctype HTML.

Kode lengkapnya sebagai berikut:

<?php
	$page = "Home";
?>
<!DOCTYPE html>
<html>
<head>
	<title><?php echo $page; ?></title>
	<style type="text/css">
		*{
			padding: 0;
			margin: 0;
		}

		#wrapper{
			width: 960px;
			margin: auto;
		}

		#header{
			background-color: red;
			height: 100px;
			padding: 5px;
			color: #ffffff;
		}

		#menu{
			background: blue;
			height: 50px;
		}

		#menu ul .active{
			text-decoration: underline;
		}

		#menu ul .active a{
			color: #ffff00;
		}

		#menu ul li{
			list-style: none;
			text-decoration: none;
			display: inline;
			margin: 0 85px;
			line-height: 50px;
		}

		#menu ul li a{
			color: #000000;
			text-decoration: none;
			text-transform: uppercase;
			color: #ffffff;
			font-weight: bold;
		}

		#content{
			padding: 5px;
			line-height: 20px;
			height: 300px;
		}

		#footer{
			background-color: green;
			height: 50px;
			text-align: center;
			color: #ffffff;
			line-height: 50px;
		}
	</style>
</head>
<body>
	<div id="wrapper">
		<div id="header">
			<h1>Simple Website</h1>
		</div> <!-- end of header -->

		<!-- Include Navigasi -->
		<?php
			include "navigasi.php";	
		?>
		
		<div id="content">
			<h2>Ini Halaman <?php echo $page; ?> (home.php)</h2>
		</div><!-- end of content -->
		<div id="footer">
			<p>Hak Cipta YELLOWWEB.ID | &copy; <?php echo date("Y");?></p>
		</div><!-- end fo footer -->  
	</div><!-- end of wrapper -->

</body>
</html>

berikut kode dari file navigasi.php

<div id="menu">
	<ul>
		<li <?php if($page == "Home") echo "class='active'";?>> <a href="index.php">home</a></li>
		<li <?php if($page == "About") echo "class='active'";?>><a href="about.php">about</a></li>
		<li <?php if($page == "Gallery") echo "class='active'";?>><a href="gallery.php">gallery</a></li>
		<li <?php if($page == "Contact") echo "class='active'";?>><a href="contact.php">contact</a></li>
	</ul>
</div><!-- end of menu -->

Teman-teman dapat potong kode pada bagian menu (navigasi), kemudian sisipkan pada tiap halaman dengan menggunakan fungsi PHP include.

Dengan cara seperti ini ketika terjadi perubahan pada bagian menu, teman-teman tidak perlu merubah satu persatu pada tiap-tiap halaman, cukup dirubah pada file navigasi.php tadi yang sebelumnya sudah kita buat.

Tentunya dengan cara seperti ini kita dapat menghemat waktu, karena lebih efektif dan efisien.