การสร้าง active เมนู อย่างง่าย ด้วย css และ php
23 June 2011การสร้าง 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 ของเมนูนั้น เพื่อเป็นค่าเริ่มต้น
บทความในหมวดที่่น่าสนใจ อื่นๆ
อ่าน 1285
บทความคนเข้าอ่านวันนี้
23 Jan 12 แนวทางการประยุกต์ การซ่อน แสดงเนื้อหาสำหรับล็อกอิน อย่างง่าย ด้วย jQuery อ่าน 461 14 Mar 09 สร้าง tooltip กล่องข้อความตัวช่วยเหลือได้ง่ายด้วย jQuery อ่าน 7993 13 Oct 11 แนะนำการใช้งาน การเชื่อมต่อ facebook ด้วย php sdk v.3.1.1 อ่าน 885 01 Dec 10 การใช้งาน polyline และ polygon ใน google map api v3 อ่าน 3766 05 Jul 10 ทบทวน วันที่ date object ใน javascript อ่าน 2831 07 Sep 10 ใช้ ckeditor กับ filemanager ด้วย php รองรับ ฟังก์ชัน javascript อ่าน 3495 08 Feb 12 Google map API v.3 กับ jQuery ลากจุดหา ชื่อตำแหน่ง และ พิกัด ค่า latitude longitude อ่าน 322 04 Oct 08 SQL คืออะไร อ่าน 7631 22 Sep 11 แนวทาง การเลื่อนแล้ว fixed ตำแหน่งเนื้อหาที่ต้องการ ด้วย jQuery อ่าน 1196 13 Oct 08 คำสั่ง SQL ORDER BY อ่าน 7547 09 Dec 09 การรวมไฟล์ javascript หรือไฟล์ css เป็นไฟล์เดียว ด้วย php อย่างง่าย อ่าน 1852 19 Jun 10 สร้าง comment ด้วย social plugins ใน facebook api อย่างง่ายดาย อ่าน 17648 04 Jan 10 ดึงไฟล์ xml (rss) ไฟล์แบบ cross domain มาแสดงด้วย ajax ใน jQuery อย่างง่าย อ่าน 3700 31 Jul 10 javascript เรียกฟังก์ชัน ใน parent จาก iframe อ่าน 2818 02 Dec 10 แทรก emoticon ด้วย javascript ฟังก์ชัน ให้กับ ckeditor อ่าน 2320 13 Oct 08 คำสั่ง SQL LIKE อ่าน 4599 25 Sep 08 แบ่งหน้า ด้วย Code แบบง่าย อ่าน 5747 25 Mar 11 สร้างรูปแบบ วันที่ คล้าย วันที่ใน facebook comment ด้วย php อย่างง่าย อ่าน 2839 23 Jun 11 การสร้าง active เมนู อย่างง่าย ด้วย css และ php อ่าน 1804 04 Oct 10 รู้จัก และใช้งาน php sdk สำหรับ facebook เพิ่มขึ้น อ่าน 2980