Register Register Member Login Member Login Member Login Forgot Password ??
PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone
 

Registered : 109,037

HOME > PHP > PHP Forum > ขอถามเกี่ยวกับการทำเมนู css ครับ คือจะทำให้เมนูมัน current page ยังไงครับ ตามโค้ด ข้างล่างนะครับ จะเขียนเพิ่มหรือดัดแปลงยังไงครับ



 

ขอถามเกี่ยวกับการทำเมนู css ครับ คือจะทำให้เมนูมัน current page ยังไงครับ ตามโค้ด ข้างล่างนะครับ จะเขียนเพิ่มหรือดัดแปลงยังไงครับ

 



Topic : 086015



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



สถานะออฟไลน์




Code
ul#saturday{
margin:0;
padding:0;
list-style-type:none;
width:auto;
position:relative;
display:block;
height:36px;
text-transform:uppercase;
font-size:12px;
font-weight:bold;
background:transparent url("images/bgOFF.gif") repeat-x top left;
font-family:Helvetica,Arial,Verdana,sans-serif;
border-bottom:4px solid #336666;
border-top:1px solid #C0E2D4;
}
ul#saturday li{
display:block;
float:left;
margin:0;
pading:0;
}
ul#saturday li a{
display:block;
float:left;
color:#874B46;
text-decoration:none;
padding:12px 20px 0 20px;
height:24px;
background:transparent url("images/bgDIVIDER.gif") no-repeat top right;
}
ul#saturday li a:hover{
color:#FFF;
background:transparent url("images/bgON.gif") no-repeat top right;
}
ul#saturday li a.current,ul#saturday li a.current:hover{
color:#fff;
background:transparent url("images/bgON.gif") no-repeat top right;
}


อันนี้ส่วนเมนูครับ
<ul id="saturday">
<li><a href="1.php" target="mainFrame" >ทดสอบ1</a></li>
<li><a href="2.php" target="mainFrame" >ทดสอบ2</a></li>
<li><a href="3.php" target="mainFrame" >ทดสอบ3</a></li>
<li><a href="4.php" target="mainFrame" >ทดสอบ4</a></li>
<li><a href="5.php" target="mainFrame" >ทดสอบ5</a></li>
<li><a href="6.php" target="mainFrame">ทดสอบ6</a></li>
<li><a href="7.php" target="mainFrame" >ทดสอบ7</a></li>
<li><a href="8.php" target="_parent">ทดสอบ8</a></li>
</ul>




Tag : PHP, MySQL, HTML/CSS







Move To Hilight (Stock) 
Send To Friend.Bookmark.
Date : 2012-10-29 15:35:18 By : addy_it View : 1959 Reply : 13
 

 

No. 1



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

สมาชิกที่ใส่เสื้อไทยครีเอท Hall of Fame 2012

สถานะออฟไลน์


target="_self"






แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2012-10-29 16:10:11 By : sakuraei
 


 

No. 2



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



สถานะออฟไลน์


target="_self" ไม่ได้เพราะสร้าง frame ไว้ครับ
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2012-10-29 16:14:23 By : addy_it
 

 

No. 3



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

สมาชิกที่ใส่เสื้อไทยครีเอท Hall of Fame 2012

สถานะออฟไลน์


งั้น current page คืออะไร ขยายความหน่อยครับ
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2012-10-29 16:15:52 By : sakuraei
 


 

No. 4



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



สถานะออฟไลน์


เฮ้อ..
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2012-10-29 16:21:00 By : addy_it
 


 

No. 5



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

สมาชิกที่ใส่เสื้อไทยครีเอท Hall of Fame 2012

สถานะออฟไลน์



แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2012-10-29 16:56:06 By : sakuraei
 


 

No. 6



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



สถานะออฟไลน์


ประมาณว่า ถ้าเราเข้าเมนูไหน ก็ให้เน้นที่เมนูนั้นๆหรือเปล่าหว่า ผมเข้าใจถูกไหม
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2012-10-29 17:03:34 By : billbox
 


 

No. 7



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



สถานะออฟไลน์


ถ้าทำแบบ static ก็แค่เพิ่ม class="current" ไว้ที่ <li></li> ของแต่ละหน้า
Code
<li><a href="3.php" target="mainFrame" class="current" >ทดสอบ3</a></li>


วิธีนี้ผมคิดว่าคุณคงรู้อยู่แล้ว เพราะว่าคุณเขียน css เตรียมไว้เรียบร้อย

CSS
ul#saturday li a.current,ul#saturday li a.current:hover{ color:#fff; background:transparent url("images/bgON.gif") no-repeat top right; }



แบบ Dynamic ต้องใช้ jQuery เข้ามาช่วย
ใส่สคริปข้างล่างนี้ไว้ทุกหน้า แต่ต้องเปลียนตัว selector ให้ตรงกับหน้านั้น $('a[href="3.php"]')
อย่าลื่มลิงค์ไฟล์ jquery.js ด้วย

Code (JavaScript)

<script type="text/javascript">
	$(document).ready(function(){
							   
		$('a[href="3.php"]').attr('class','current');						   
	});
</script>


แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2012-10-29 21:51:53 By : dreamlover
 


 

No. 8



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



สถานะออฟไลน์


ถูกครับคุณ bill
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2012-10-30 10:46:58 By : addy_it
 


 

No. 9



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



สถานะออฟไลน์


ผมลองทำแบบคุณ jack แล้วก็ยังไม่ได้ครับ ผมก็เอาโค้ดนี้ไปแปะที่หน้า 3.php เลยครับ ไม่รู้ว่าผมเข้าใจถูกไหม
<script type="text/javascript" src="../jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){

$('a[href="3.php"]').attr('class','current');
});
</script>
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2012-10-30 10:53:08 By : addy_it
 


 

No. 10



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



สถานะออฟไลน์


เข้าใจถูกแล้วครับ
ลองดูที่ตัว CSS คุณตั้งสีของตัวอักษรไว้เป็นสีขาว (color:#fff) เวลาเพิ่ม class=current จะมองไม่เห็นอะไร

CSS
ul#saturday li a.current,ul#saturday li a.current:hover{ color:#fff; background:transparent url("images/bgON.gif") no-repeat top right; }


ถ้ายังไม่ได้่ ผมเอาข้อมูลของคุณไปทำตัวอย่างไว้ให้ ลองไปดาวโหลดดูได้ที่

http://www.mineinc.net/qa/file/2012/10/29/file1.html
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2012-10-30 11:18:25 By : dreamlover
 


 

No. 11



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



สถานะออฟไลน์


ผมว่าคุณ jack ต้องเข้าใจผมผิดแน่ ๆ เลยครับ คือว่าผมต้องการแบบนี้ครับ คือถ้าเราคลิกที่ link หน้าไหน ก็ให้มัน hilight ที่ link นั้นอะครับ แต่ตาม วิธีที่คุณ jack ให้มา มันเป็นการให้ hiligth หน้าเดียวตลอดใช่ไหมครับ ถ้าใช่ ใช้ class=current ก็ได้ครับ
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2012-10-30 11:43:17 By : addy_it
 


 

No. 12



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



สถานะออฟไลน์


เข้าใจไม่ผิดหรอกครับ
เพราะว่าเราทดสอบอยู่ที่ไฟล์เดียวกันตลอด ก็เลย highlight อยู่แค่เมนูเดียว

ลองดาวโหลดมาดูใหม่นะครับ ผมทำไฟล์ไว้ 4 อัน และเปลี่ยนนามสกุลเป็น .html จะได้ไม่ต้องรันบน server


http://www.mineinc.net/qa/file/2012/10/29/file1.html


ประวัติการแก้ไข
2012-10-30 13:51:33
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2012-10-30 12:58:37 By : dreamlover
 


 

No. 13



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

สมาชิกที่ใส่เสื้อไทยครีเอท Hall of Fame 2012

สถานะออฟไลน์


ลองดูน่ะครับ
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title>https://www.thaicreate.com/php/forum/086015.html</title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="Unidentifier">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <meta http-equiv="Content-Type" content="text/html; charset=utf8" />
  <style type="text/css">
	ul.menu > li	{
		width:150px;
		display:inline-block;
		text-align:center;
	}
	.highlight{
		background-color:#ffff99;
	}
  </style>
 </head>

 <body>
  <ul class="menu">
	<li><a href="test1.html">ทดสอบ1</a></li>
	<li><a href="test2.html">ทดสอบ2</a></li>
	<li><a href="test3.html">ทดสอบ3</a></li>
	<li><a href="test4.html">ทดสอบ4</a></li><br />
  </ul>
  <iframe id="frameTarget" src="blank.html" style="width:1000px;height:330px;"></iframe>
  <script>
	$("ul.menu a").click(function(event){		
		event.preventDefault();
		var target = $(this).attr("href");
		alert(target);
		$("#frameTarget").attr("src",target);
		$("ul.menu li").removeClass("highlight");
		$(this).parent("li").addClass("highlight");
	});

  </script>
 </body>
</html>


แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2012-10-30 14:14:17 By : sakuraei
 

   

ค้นหาข้อมูล


   
 

แสดงความคิดเห็น
Re : ขอถามเกี่ยวกับการทำเมนู css ครับ คือจะทำให้เมนูมัน current page ยังไงครับ ตามโค้ด ข้างล่างนะครับ จะเขียนเพิ่มหรือดัดแปลงยังไงครับ
 
 
รายละเอียด
 
ตัวหนา ตัวเอียง ตัวขีดเส้นใต้ ตัวมีขีดกลาง| ตัวเรืองแสง ตัวมีเงา ตัวอักษรวิ่ง| จัดย่อหน้าอิสระ จัดย่อหน้าชิดซ้าย จัดย่อหน้ากึ่งกลาง จัดย่อหน้าชิดขวา| เส้นขวาง| ขนาดตัวอักษร แบบตัวอักษร
ใส่แฟลช ใส่รูป ใส่ไฮเปอร์ลิ้งค์ ใส่อีเมล์ ใส่ลิ้งค์ FTP| ใส่แถวของตาราง ใส่คอลัมน์ตาราง| ตัวยก ตัวห้อย ตัวพิมพ์ดีด| ใส่โค้ด ใส่การอ้างถึงคำพูด| ใส่ลีสต์
smiley for :lol: smiley for :ken: smiley for :D smiley for :) smiley for ;) smiley for :eek: smiley for :geek: smiley for :roll: smiley for :erm: smiley for :cool: smiley for :blank: smiley for :idea: smiley for :ehh: smiley for :aargh: smiley for :evil:
Insert PHP Code
Insert ASP Code
Insert VB.NET Code Insert C#.NET Code Insert JavaScript Code Insert C#.NET Code
Insert Java Code
Insert Android Code
Insert Objective-C Code
Insert XML Code
Insert SQL Code
Insert Code
เพื่อความเรียบร้อยของข้อความ ควรจัดรูปแบบให้พอดีกับขนาดของหน้าจอ เพื่อง่ายต่อการอ่านและสบายตา และตรวจสอบภาษาไทยให้ถูกต้อง

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

Notice

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

   
  เพื่อความปลอดภัยและการตรวจสอบ กระทู้ที่แทรกไฟล์อัพโหลดไฟล์จากที่อื่น อาจจะถูกลบทิ้ง
 
โดย
อีเมล์
บวกค่าให้ถูก
<= ตัวเลขฮินดูอารบิก เช่น 123 (หรือล็อกอินเข้าระบบสมาชิกเพื่อไม่ต้องกรอก)







Exchange: นำเข้าสินค้าจากจีน, Taobao, เฟอร์นิเจอร์, ของพรีเมี่ยม, ร่ม, ปากกา, power bank, แฟลชไดร์ฟ, กระบอกน้ำ

Load balance : Server 01
ThaiCreate.Com Logo
© www.ThaiCreate.Com. 2003-2024 All Rights Reserved.
ไทยครีเอทบริการ จัดทำดูแลแก้ไข Web Application ทุกรูปแบบ (PHP, .Net Application, VB.Net, C#)
[Conditions Privacy Statement] ติดต่อโฆษณา 081-987-6107 อัตราราคา คลิกที่นี่