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 แบบคลิกแล้วจะแสดงเมนูย่อยๆออกมา คือจะทำเมนูที่สามารถเพิ่มได้เรื่อยๆ อะครับ



 

จะทำเมนู CSS แบบคลิกแล้วจะแสดงเมนูย่อยๆออกมา คือจะทำเมนูที่สามารถเพิ่มได้เรื่อยๆ อะครับ

 



Topic : 058683



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



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




ผมจะทำ list menu <ul> <il> แบบคลิกแล้วจะมีเมนูย่อยๆ ขึ้นมา ผมจะใช้ CSS ทำยังไงครับ พอจะมีตัวอย่างบ้างไหมครับ



Tag : PHP, HTML/CSS






Move To Hilight (Stock) 
Send To Friend.Bookmark.
Date : 2011-04-15 19:26:14 By : sakang View : 8779 Reply : 10
 

 

No. 1



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



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


<html>
<head>
<style>
ul
{
list-style-type:none;
margin:0;
padding:0;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>

แสดงผล

Home
News
Contact
About

/////////////////////////////////////////////////////////////////////////////////
<html>
<head>
<style type="text/css">
ul
{
list-style-type:none;
margin:0;
padding:0;
}
li
{
display:inline;
}
</style>
</head>

<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>

</body>

แสดงผล

Home News Contact About


แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2011-04-15 20:13:46 By : ckcr
 


 

No. 2



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



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


ครับแบบว่าคลิกแล้วให้มีเมนูย่อยๆ ออกมาอีกอะครับ เช่น contact ก็จะมีเมนูติดต่อแผนกต่างๆให้เลือกอะครับ
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2011-04-15 20:46:03 By : sakang
 

 

No. 3



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

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

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

Code (PHP)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title> stu nicholls dot com | menu - hover drop #2 </title>
<meta name="Author" content="Stu Nicholls" />


<link rel="stylesheet" media="all" type="text/css" href="hover_drop_2/hover_drop_2.css" />

<script src="hover_drop_2/iefix.js" type="text/javascript"></script>

</head>

<body onload="ieFix('menu')">

<h1>stunicholls.com</h1>
<h2>Horizontal drop/fly</h2>
<h3>3rd November 2007</h3>

<div id="outer">

<div class="pad1"></div>
<ul id="menu">
	<li><a href="#nogo1">Home</a></li>
	<li class="sub"><a href="#nogo2">Products</a>
		<ul>
			<li class="sub"><a href="#nogo3">Cameras</a>
					<ul class="left">
						<li><a href="#nogo4">Nikon</a></li>
						<li><a href="#nogo5">Minolta</a></li>
						<li><a href="#nogo6">Pentax</a></li>
					</ul>
			</li>
			<li class="sub"><a href="#nogo7">Lenses </a>
					<ul>
						<li><a href="#nogo8">Wide Angle</a></li>
						<li><a href="#nogo9">Standard</a></li>
						<li><a href="#nogo10">Telephoto</a></li>
						<li class="sub"><a href="#nogo11">Zoom</a>
							<ul>
								<li><a href="#nogo12">35mm to 125mm</a></li>
								<li><a href="#nogo13">50mm to 250mm</a></li>
								<li><a href="#nogo14">125mm to 500mm</a></li>
							</ul>
						</li>
						<li><a href="#nogo15">Mirror</a></li>
						<li class="sub"><a href="#nogo16">Non-standard</a>
							<ul class="left">
								<li><a href="#nogo17">Bayonet mount</a></li>
								<li><a href="#nogo18">Screw mount</a></li>
							</ul>
						</li>
					</ul>
			</li>
			<li><a href="#nogo19">Flash Guns</a></li>
			<li><a href="#nogo20">Tripods</a></li>
			<li><a href="#nogo21">Filters</a></li>
		</ul>
	</li>
	<li class="sub"><a href="#nogo22">Services</a>
		<ul>
			<li><a href="#nogo23">Printing</a></li>
			<li><a href="#nogo24">Photo Framing</a></li>
			<li><a href="#nogo25">Retouching</a></li>
			<li><a href="#nogo26">Archiving</a></li>
		</ul>
	</li>
	<li class="sub"><a href="#nogo27">Shop</a>
		<ul>
			<li><a href="#nogo28">Online</a></li>
			<li><a href="#nogo29">Catalogue</a></li>
			<li><a href="#nogo30">Mail Order</a></li>
		</ul>
	</li>
	<li class="sub"><a href="#nogo31">Contacts</a>
		<ul>
			<li><a href="#nogo32">Support</a></li>
			<li class="sub"><a href="#nogo33">Sales</a>
				<ul class="left">
					<li><a href="#nogo34">USA</a></li>
					<li><a href="#nogo35">Canadian</a></li>
					<li><a href="#nogo36">South American</a></li>
					<li class="sub"><a href="#nogo37">European</a>
						<ul class="left">
							<li><a href="#nogo38">British</a></li>
							<li><a href="#nogo39">French</a></li>
							<li><a href="#nogo40">German</a></li>
							<li><a href="#nogo41">Spanish</a></li>
							<li><a href="#nogo42">Italian</a></li>
						</ul>
					</li>
					<li><a href="#nogo43">Canadian</a></li>
					<li><a href="#nogo44">Asian</a></li>
				</ul>
			</li>
			<li><a href="#nogo45">Buying</a></li>
			<li><a href="#nogo46">Photographers</a></li>
			<li><a href="#nogo47">Stockist</a></li>
			<li><a href="#nogo48">General</a></li>
		</ul>
	</li>
</ul>
<div class="pad2"></div>
</div>
<p>&copy; 2007 stunicholls.com</p>


</body>
</html>

แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2011-04-15 21:46:10 By : Dragons_first
 


 

No. 4



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

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

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

css
Code (PHP)
#outer {width:750px; height:300px; background:url(film.jpg) no-repeat right bottom; border:1px solid #766; border-width:5px 1px 1px; position:relative;}

.pad1 {width:50px; height:25px; background:#baa; display:inline; float:left; margin:3px 3px 0 3px;}
.pad2 {width:50px; height:25px; background:#baa; display:inline; float:left; margin:3px 3px 0 0;}

#menu {list-style-type:none; padding:0; margin:0;}
#menu ul {list-style-type:none; padding:0; margin:0;}
#menu li {float:left; background:#dcc; margin:3px 3px 0 0; position:relative;}
#menu li.sub {background:#baa;}

/* for IE5.5 and IE6 only */
#menu table {border-collapse:collapse;position:absolute;top:0;left:0;z-index:80;font-size:1em;}

#menu li a {display:block; color:#000; height:25px; font-family:arial, sans-serif; font-size:11px; line-height:24px; width:125px; text-decoration:none; text-align:center;}
#menu :hover {color:#ee0; background:#988;}
#menu :hover > a {color:#ee0; background:#988;}

#menu ul, 
#menu :hover ul ul,
#menu :hover ul :hover ul ul,
#menu :hover ul :hover ul ul.left {position:absolute; left:-9999px; width:128px;}

#menu :hover ul{left:0;top:25px; background:url(transparent.gif);} /* the background image is for IE7 */

#menu :hover ul :hover ul,
#menu :hover ul :hover ul :hover ul {padding:0 3px; left:125px; top:-3px;}

#menu :hover ul :hover ul.left,
#menu :hover ul :hover ul :hover ul.left {padding:0 3px; left:-131px; top:-3px;}

แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2011-04-15 21:46:57 By : Dragons_first
 


 

No. 5



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

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

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

js
Code (PHP)
function ieFix(topLevel) 
{
var ua = navigator.userAgent;
var isMSIE = (navigator.appName == "Microsoft Internet Explorer");
var isMSIE5_5 = isMSIE && (ua.indexOf('MSIE 5.5') != -1);
var isMSIE6 = isMSIE && (ua.indexOf('MSIE 6.0') != -1);

	if (isMSIE5_5 || isMSIE6) 
	{
	document.getElementById(topLevel).innerHTML = document.getElementById(topLevel).innerHTML.replace (/<ul/gi,"<table><tr><td><ul").replace (/<\/ul>/gi,"</ul></td></tr></table></a>");
	for (i=0;i<document.getElementsByTagName("li").length; i++) 
		{
		if (document.getElementsByTagName("li").item(i).className == "sub")
			{
			document.getElementsByTagName("li").item(i).innerHTML = document.getElementsByTagName("li").item(i).innerHTML.replace(/<\/a>/i,"");
			}
		}
	}
}

แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2011-04-15 21:47:32 By : Dragons_first
 


 

No. 6



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

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

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

เอาไปแกะเอาเอง ไม่ยากครับ
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2011-04-15 21:48:18 By : Dragons_first
 


 

No. 7



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



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


อ้นคุง ++
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2011-04-15 22:14:01 By : phajvaj
 


 

No. 8

Guest


เจ๋งดีครับ..
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2011-04-16 01:13:09 By : กุ้งมือใหม่
 


 

No. 9

Guest


ทำไมมันแสดงได้ในเฉพาะIEล่ะครับ ff กับ chrome ไม่แสดง,,ต้องทำยังไงครับ??
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2012-05-01 10:19:51 By : มือใหม่
 


 

No. 10



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



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


ลองทำในดรีมไม่ง่ายกว่าหรอครับ
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2012-05-01 10:29:10 By : showroom
 

   

ค้นหาข้อมูล
   
 

แสดงความคิดเห็น
Re : จะทำเมนู CSS แบบคลิกแล้วจะแสดงเมนูย่อยๆออกมา คือจะทำเมนูที่สามารถเพิ่มได้เรื่อยๆ อะครับ
 
 
รายละเอียด
 
ตัวหนา ตัวเอียง ตัวขีดเส้นใต้ ตัวมีขีดกลาง| ตัวเรืองแสง ตัวมีเงา ตัวอักษรวิ่ง| จัดย่อหน้าอิสระ จัดย่อหน้าชิดซ้าย จัดย่อหน้ากึ่งกลาง จัดย่อหน้าชิดขวา| เส้นขวาง| ขนาดตัวอักษร แบบตัวอักษร
ใส่แฟลช ใส่รูป ใส่ไฮเปอร์ลิ้งค์ ใส่อีเมล์ ใส่ลิ้งค์ 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 00
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 อัตราราคา คลิกที่นี่