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

เขียนเมื่อ 13 ปีก่อน โดย Ninenik Narkdee
เมนู css php active

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ เมนู css php active

ดูแล้ว 30,796 ครั้ง


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

 
ตัวอย่างโค้ดต่อไปนี้ เป้นหนึ่งในหลายวิธี ในการกำหนด สถานะการ active ของลิ้งค์ปัจจุบัน
โดยอาศัย php ในการเช็ค url ของหน้าปัจจุบัน ไปกำหนด css ของเมนู
 
ตัวอย่างประกอบ
 
โค้ดตัวอย่างทั้งหมด
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<!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 คืออะไร เช่น
 
1
<?=active_menu("/demo/css_menu_active.php?menu=2")?>
 
 
หมายถึง ถ้า ตัวแปร $_SERVER['REQUEST_URI'] เท่ากับ /demo/css_menu_active.php?menu=2
ก็ให้เติมคำว่า _active ต่อเข้าไปใน css class 
 
อักตัวอย่าง
1
<?=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:: เมนู php active css







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












สนับสนุนเว็บไซต์เรา จ่ายด้วย Truemoney Wallet
หรือ
Terms of Service | Privacy Policy
Author
2025 © Copyright ninenik.com. All rights reserved.
เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ