PHP Ionic Angularjs Phonegap AJAX Javascript CSS MySQL jQuery Forum

การสร้าง active เมนู อย่างง่าย ด้วย css และ php

23 June 2011 By


 การสร้าง active เมนู อย่างง่าย ด้วย css และ php

 
ตัวอย่างโค้ดต่อไปนี้ เป้นหนึ่งในหลายวิธี ในการกำหนด สถานะการ active ของลิ้งค์ปัจจุบัน
โดยอาศัย php ในการเช็ค url ของหน้าปัจจุบัน ไปกำหนด css ของเมนู
 
ตัวอย่างประกอบ
http://www.ninenik.com/demo/css_menu_active.php
 
โค้ดตัวอย่างทั้งหมด
 
<!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>&nbsp;
<a class="css_menu<?=active_menu("/demo/css_menu_active.php?menu=2")?>" href="css_menu_active.php?menu=2">Menu 2</a>&nbsp;
<a class="css_menu<?=active_menu("/demo/css_menu_active.php?menu=3")?>" href="css_menu_active.php?menu=3">Menu 3</a>&nbsp;
<a class="css_menu<?=active_menu("/demo/css_menu_active.php?menu=4")?>" href="css_menu_active.php?menu=4">Menu 4</a>&nbsp;
</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 ของเมนูนั้น เพื่อเป็นค่าเริ่มต้น

Tags:: css active เมนู php





URL สำหรับอ้างอิง