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

23 June 2011 By Ninenik Narkdee

active เมนู css php

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ 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 ของเมนูนั้น เพื่อเป็นค่าเริ่มต้น

อย่าลืมกด Like กด Share เป็นกำลังใจ ในการสร้างบทความใหม่ๆ น่ะครับ

Tags:: เมนู active php css

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