Hallo sahabat Dumenity berjumpa lagi dalam tutorial kursuswebprogramming, pada tutorial kali ini kita akan belajar tentang Cara Membuat Menu Class Active di PHP. Menu class active ini biasa sering kita gunakan dalam membuat sebuah website yang statis. seperti halnya ketika kita masuk dalam sebuah website terus kita klik salah satu menu website tersebut maka dia akan ada efek sesuatu entah itu background atau yang lainnya. Menu class active ini bertujuan untuk memberi tahu kita bahwa kita sedang berada dalam halaman menu tersebut.
Untuk pembahasan saya pada kali ini kita akan membuat menu class active dalam web dinamis, untuk membuat menu class active di web dinamis dan statis tentu cara sangat berbeda dan tentunya juga lebih mudah di web statis dibanding membuat didalam webdinamis. Oke untuk lebih jelasnya saya memberikan contohnya langsung.
Oke langsung saja buat file bernama link.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!Doctype html> <html> <head> <title>Artikel 1</title> </head> <body> <menu> <ul> <li ><a href="link.php?home">Home</a></li> <li ><a href="link.php?blog">Blog</a></li> <li ><a href="link.php?about">About Us</a></li> <li ><a href="link.php?portofolio">Portofolio</a></li> <li ><a href="link.php?contact">Contact US</a></li> </ul> <menu> </body> </html> |
dan buat css dari file di atas
|
1 2 3 4 5 6 7 |
<style type="text/css"> *{margin:0; padding:0;} menu {width:900px; background:green; height:50px; margin:auto;} li { list-style:none; float:left; width:20%; line-height:50px; text-align:center; } a { color:white; text-decoration:none; } .active {background:red;} </style> |
oke kalau sudah kita akan masuk dalam Cara Membuat Menu Class Active di PHP, caranya cukup mudah kita juga menginclude css dari class active kedalam sebuah tag li seperti di bawah ini:
|
1 2 3 4 5 6 7 8 9 |
<menu> <ul> <li <?php if (isset($_GET["home"])){echo 'class="active"'; }?>><a href="link.php?home">Home</a></li> <li <?php if (isset($_GET["blog"])){echo 'class="active"'; }?> ><a href="link.php?blog">Blog</a></li> <li <?php if (isset($_GET["about"])){echo 'class="active"'; }?> ><a href="link.php?about">About Us</a></li> <li <?php if (isset($_GET["portofolio"])){echo 'class="active"'; }?> ><a href="link.php?portofolio">Portofolio</a></li> <li <?php if (isset($_GET["contact"])){echo 'class="active"'; }?> ><a href="link.php?contact">Contact US</a></li> </ul> <menu> |
Oke kalau sudah kita akan membuat halaman dinamis dari menu di atas supaya kita bisa jalankan hasilnya cara seperti di bawah ini:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<?php if (isset($_GET["blog"])){ echo "<h1 style='text-align:center'; >ini halaman blog </h1>"; }elseif(isset($_GET["about"])){ echo "<h1 style='text-align:center'; >ini halaman about </h1>"; }elseif(isset($_GET["portofolio"])){ echo "<h1 style='text-align:center'; >ini halaman portofolio </h1>"; }elseif(isset($_GET["contact"])){ echo "<h1 style='text-align:center'; >ini halaman contact</h1>"; }else { echo "<h1 style='text-align:center'; >ini halaman Home </h1>"; } ?> |
Oke untuk melihat hasilnya silahkan teman – teman coba sendiri dan jalan pada browsernya. Oke itulah tadi Cara Membuat Menu Class Active di PHP semoga bermanfaat.