การสร้าง active เมนู อย่างง่าย ด้วย css และ php
ตัวอย่างโค้ดต่อไปนี้ เป้นหนึ่งในหลายวิธี ในการกำหนด สถานะการ active ของลิ้งค์ปัจจุบัน
โดยอาศัย php ในการเช็ค url ของหน้าปัจจุบัน ไปกำหนด css ของเมนู
ตัวอย่างประกอบ
โค้ดตัวอย่างทั้งหมด
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css_menu_active</title>
<style type="text/css">
/* เมนูปกติ */
.css_menu{
position:relative;
display:block;
float:left;
width:100px;
height:25px;
background-color:#333;
color:#FFF;
text-align:center;
text-decoration:none;
line-height:25px;
margin-right:2px;
}
/* เมนูเมื่อเมาส์ over*/
.css_menu:hover{
position:relative;
display:block;
float:left;
width:100px;
height:25px;
background-color:#CCC;
color:#000;
}
/* เมนูเมื่อ active*/
.css_menu_active{
position:relative;
display:block;
float:left;
width:100px;
height:25px;
background-color:#CCC;
color:#000;
text-align:center;
text-decoration:none;
line-height:25px;
margin-right:2px;
}
</style>
</head>
<body>
<?php
// ฟังก์ชั่นอย่างง่ายใช้ทดสอบ หน้าปัจจุบัน
function active_menu($link_chk,$default_active=0){
if($default_active==1){
return ($_SERVER['REQUEST_URI']==$link_chk || $_SERVER['QUERY_STRING']=="")?"_active":"";
}else{
return ($_SERVER['REQUEST_URI']==$link_chk)?"_active":"";
}
}
?>
<a class="css_menu<?=active_menu("/demo/css_menu_active.php?menu=1",1)?>" href="css_menu_active.php?menu=1">Menu 1</a>
<a class="css_menu<?=active_menu("/demo/css_menu_active.php?menu=2")?>" href="css_menu_active.php?menu=2">Menu 2</a>
<a class="css_menu<?=active_menu("/demo/css_menu_active.php?menu=3")?>" href="css_menu_active.php?menu=3">Menu 3</a>
<a class="css_menu<?=active_menu("/demo/css_menu_active.php?menu=4")?>" href="css_menu_active.php?menu=4">Menu 4</a>
</body>
</html>
การใช้งาน
หลักการอย่างง่าย คือการส่งค่าว่า หน้าปัจจุบัน url คืออะไร เช่น
<?=active_menu("/demo/css_menu_active.php?menu=2")?>
หมายถึง ถ้า ตัวแปร $_SERVER['REQUEST_URI'] เท่ากับ /demo/css_menu_active.php?menu=2
ก็ให้เติมคำว่า _active ต่อเข้าไปใน css class
อักตัวอย่าง
<?=active_menu("/demo/css_menu_active.php?menu=1",1)?>
หมายถึง ถ้า ตัวแปร $_SERVER['REQUEST_URI'] เท่ากับ /demo/css_menu_active.php?menu=1
หรือ ไม่มีเงื่อนไขใดๆ ถูกต้อง ก็ให้เติมคำว่า _active ต่อเข้าไปใน css class ของเมนูนั้น เพื่อเป็นค่าเริ่มต้น
