Forgot Password ??

PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone

	Registered : 109,038

HOME > PHP > PHP Forum > สอบถามการทำ Menu Active หน่อยค่ะ พอดีทำแล้วติดปัญหา menu ไม่ Active ให้ค่ะ

สอบถามการทำ Menu Active หน่อยค่ะ พอดีทำแล้วติดปัญหา menu ไม่ Active ให้ค่ะ

เริ่มหัวข้อใหม่

Angeleye

โพสกระทู้ ( 100 )
บทความ ( 0 )

สอบถามหน่อยค่ะ พอดีต้องการทำ Menu active อยากให้แสดงปุ่มลิ้งค้าง หากอยู่ในหน้านั้น งง มากค่ะ ลองเขียนแล้ว แต่ค่า Menu ไม่ active ค่ะ รบกวนขอคำแนะนำหน่อยนะค่ะ งง มา 2 วันแล้วค่ะ T___T ขอบคุณล่วงหน้านะค่ะ

(โคดที่เขียนมา ได้แบบที่ 1 อยากให้ปุ่มค้างเหมือนแบบที่ 2 ต้องทำยังไงค่ะ งง ค่ะ)
menu_active

CSS

.css_menu{   
    float:left;  
    width:100%;  
    height:25px;  
    background-color:#333;  
    color:#FFF; 
    text-decoration:none;  
    line-height:25px;  
    margin-right:2px;  
}  
/*  เมนูเมื่อเมาส์ over*/  
.css_menu:hover{  
    float:left;  
    width:100%;  
    height:25px;  
    background-color:#CCC;  
    color:#000;   
}  
/*  เมนูเมื่อ active*/  
.css_menu:active{
    float:left;  
    width:100%;  
    height:25px;  
    background-color:#CCC;  
    color:#000;   
    text-decoration:none;  
    line-height:25px;  
    margin-right:2px;  
}

Javascript ดึงลิ้งมาแสดง

<!-- Check ห้ามเลือกเกิน 2 -->
<script>
var checkbox_count=<?=count($chk_arr)?>; // ตัวนับ check
var check_list ='<?=(count($chk_arr)? '['.implode('][', $chk_arr).']' : '')?>';

function sum_check( chk ){
	if(chk.checked){
		if(checkbox_count==3){ alert('เลือกได้ไม่เกิน 3'); chk.checked=false;
		}else{ checkbox_count++; check_list +='['+chk.value+']'; }
	}else { checkbox_count--; check_list = eval('check_list.replace(/\\['+chk.value+'\\]/, "")'); }
}
function chk_text(){
	var a = check_list>''? ( check_list.replace(/\]\[/g, ',').replace(/\[|\]/g, '').split(',')) : Array();
	return (a.length? '&chkbox='+a : '');
}
function change_page( page ){ location.href="<?=$_SERVER['PHP_SELF'];?>?bid=<?=$_GET['bid']?>&Page="+page+chk_text(); }
function change_cate( cate_id ){ location.href='allproduct.php?cid='+cate_id+chk_text(); }
function change_brand( brand_id ){ location.href='allproduct.php?bid='+brand_id+chk_text(); }
function check() {
	if(checkbox_count) return true; alert('กรุณาเลือกอย่างน้อย 1 รายการ'); return false;
}
</script>
<!-- End Check ห้ามเลือกเกิน 2 -->

php ตรงแสดงปุ่ม ดึงมาจาก Database

<div style="float:left; width:200px;">
                <ul>
                    <?php if(!empty($rs_brand)): ?>
                         <?php while ($r_brand = mysql_fetch_assoc($rs_brand)): ?>
                            <?php $page = basename($_SERVER['SCRIPT_NAME']); ?>
                            <li <?php if ($page == 'allproduct.php?bid=$r_brand["bid"]') { ?>class="css_menu"<?php } ?>><a href="javascript: change_brand(<?php echo $r_brand["bid"];?>)"><?php echo $r_brand["name_brand"];?></a></li>
                            <div><img src="images/Suksawad-line-menuleft.jpg" /></div>
                        <?php endwhile ?>
                    <?php endif ?>
                </ul>
            </div>

Tag : PHP

ประวัติการแก้ไข
2014-11-28 11:14:51

Date : 2014-11-28 10:53:54

By : angeleye

View : 4015

Reply : 5

No. 1

Chaidhanan

โพสกระทู้ ( 9,590 )
บทความ ( 2 )

:active แสดงตอนคลิกค้างครับ ปล่อยคลิกก็หาย

ถ้าเป็น <a> ก็เพิ่ม :visited
ถ้าเป็น tag อื่น ต้องเปลี่ยนชื่อ คลาสเป็นอย่างอื่น

เช่น class="forclick"

พอคลิกแล้ว ก็เปลี่ยนเป็น class="clicked"

แล้วก็กำหนด CSS เอาว่าจะแสดงอยา่งไร

Date : 2014-11-28 11:24:20

By : Chaidhanan

No. 2

Angeleye

โพสกระทู้ ( 100 )
บทความ ( 0 )

เพิ่มตรง css แบบนี้หรือค่ะ

.css_menu:visited{
float:left;
width:100%;
height:25px;
background-color:#CCC;
color:#000;
text-decoration:none;
line-height:25px;
margin-right:2px;
}

อันนี้ไม่ได้เป็นแบบคลิกค้างค่ะ แต่อยากให้แบบว่า เปิดหน้าใหน ปุ่มจะให้ขึ้น css สีทึบๆ เพื่อให้รู้ว่า ปุ่มของหน้านี้เปิดอยู่ค่ะ ไม่แน่ใจเรียกว่า menu active หรือเปล่าอะค่ะ ใช้คำไม่ถูกอะค่ะ >_< อย่างเช่นถ้ากดปุ่มที่สอง ไปหน้าที่สอง ก็ปุ่มจะแสดง css ทึบๆ เมนูที่สอง แบบนี้อะค่ะ

ลองเพิ่ม css ไปแล้ว ยังคงเหมือนเดิมค่ะ รบกวนขอคำแนะนำด้วยนะค่ะ

Date : 2014-11-28 11:36:01

By : angeleye

No. 3

zinlucifer

โพสกระทู้ ( 140 )
บทความ ( 0 )

ไม่ทราบว่ามีวิธีที่ดีกว่านี้หรือเปล่านะครับ

แต่โดยส่วนตัวผมใช้วิธี สร้างตัวแปร session ขึ้นมา 1 ตัวเช่น $_session['active'] = 'honda';

แล้วเวลาที่ผม วน loop แสดงผล ตัว menu ผมจะเพิ่มเงื่อนไข

Code (PHP)

if($_session['active'] == $r_brand['name_brand'])
{
   echo 'class="css_menu active"';
} else {
   echo 'class="css_menu"';
}

ประมานนี้ครับ

Date : 2014-11-28 11:51:28

By : zinlucifer

No. 4

Chaidhanan

โพสกระทู้ ( 9,590 )
บทความ ( 2 )

ตอบความคิดเห็นที่ : 3 เขียนโดย : zinlucifer เมื่อวันที่ 2014-11-28 11:51:28

รายละเอียดของการตอบ ::

หลักการเดียวกันครับ

Code (PHP)

<div style="position: absolute; left: 15px; top: 133px;" id="account_menu">
	<ul>
		<li nm="ledger" class="left_menu<?=($activate_menu=='ledger'? ' current' : '')?>" >สมุดบัญชีแยกประเภท</li>
		<li nm="journal" class="left_menu<?=($activate_menu=='journal'? ' current' : '')?>" >สมุดบัญชีรายวัน
			<div class="sub_menu" style="width: 100%; margin-left: 6px; display: none" >
			<ul>
				<li nm="jr_input"  class="<?=($act_sub_menu=='journal_input'? 'sub_current' : '')?>" >นำเข้ารายการบัญชี</li>
				<li nm="jr_add" class="<?=($act_sub_menu=='journal_add'? 'sub_current' : '')?>" >เพิ่มชื่อ</li>
			</ul>
			</div>
		</li>
		<li nm="inventory" class="left_menu<?=($activate_menu=='inventory'? ' current' : '')?>" >สต๊อคสินค้า</li>
		<li nm="shop_store" class="left_menu<?=($activate_menu=='shop_store'? ' current' : '')?>" >สินค้าหน้าร้าน</li>
	</ul>
	<div style="height: 120px"><img src="new_img/block.png" height="120" /></div>
</div>
<div id="description">

นี่เป็นตัวอย่างการกำหนดคลาส
Code (JavaScript)

#account_menu ul{ list-style-type: none;  margin: 0px; padding: 0px; font-family: 'Open Sans', sans-serif; font-size: 0.85em; width: 220px;  color: rgba(51,51,51,1); }
#account_menu .left_menu { padding-left: 4px; padding-right: 14px; width: 200px; background-color:#0FF; color: black; font-size: 12pt; min-height:24px}
#account_menu .left_menu:hover { padding-left: 14px; padding-right: 4px; opacity: 1; background-color: #03F; color:#CF8; }
#account_menu .left_menu.current { padding-left: 14px; padding-right: 4px; opacity: 1; background-color: #03A; color:#CF8; font-weight: bold }

#account_menu .sub_menu{ list-style-type: none;  padding: 0px; font-family: 'Open Sans', sans-serif; font-size: 0.85em; width: 200px; }
#account_menu .sub_menu li { padding-left: 4px; padding-right: 14px; width: 180px; background-color:#03F; font-size: 11pt; color: #FF8; min-height: 22px;}
#account_menu .sub_menu li:hover { padding-left: 14px; padding-right: 4px; opacity: 1; background-color: #25F; color:#CF8; }
#account_menu .sub_menu li.sub_current { padding-left: 14px; padding-right: 4px; opacity: 1; background-color: #03A; color:#CF8; font-weight: bold }

#description{ position: absolute; top: 133px; left: 250px; right: 10px; }
#description ul{list-style-type: none;  margin: 0px; padding: 0px; font-family: 'Open Sans', sans-serif; font-size: 0.85em; width: 100%;  color: rgba(51,51,51,1); }

Date : 2014-11-28 12:01:05

By : Chaidhanan

No. 5

Angeleye

โพสกระทู้ ( 100 )
บทความ ( 0 )

ขอบคุณค่ะ เดี๋ยวขอลองดูก่อนนะค่ะ ^__^

Date : 2014-11-28 13:24:09

By : angeleye

ค้นหาข้อมูล

แสดงความคิดเห็น

Re : สอบถามการทำ Menu Active หน่อยค่ะ พอดีทำแล้วติดปัญหา menu ไม่ Active ให้ค่ะ

รายละเอียด

เพื่อความเรียบร้อยของข้อความ ควรจัดรูปแบบให้พอดีกับขนาดของหน้าจอ เพื่อง่ายต่อการอ่านและสบายตา และตรวจสอบภาษาไทยให้ถูกต้อง

อัพโหลดแทรกรูปภาพ

Notice

เพื่อความปลอดภัยของเว็บบอร์ด ไม่อนุญาติให้แทรก แท็ก [img]....[/img] โดยการอัพโหลดไฟล์รูปจากที่อื่น เช่นเว็บไซต์ ฟรีอัพโหลดต่าง ๆ
อัพโหลดแทรกรูปภาพ ให้ใช้บริการอัพโหลดไฟล์ของไทยครีเอท และตัดรูปภาพให้พอดีกับสกรีน เพื่อความโหลดเร็วและไฟล์ไม่ถูกลบทิ้ง

เพื่อความปลอดภัยและการตรวจสอบ กระทู้ที่แทรกไฟล์อัพโหลดไฟล์จากที่อื่น อาจจะถูกลบทิ้ง

โดย

อีเมล์

บวกค่าให้ถูก