Forgot Password ??

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

	Registered : 109,038

HOME > PHP > PHP Forum > Css menu แบบนี้ทำอย่างไรหรอครับอยากทำเป้นบ้างลองแก้แล้วก็ไม่ได้เหมือนเขาอะครับ

Css menu แบบนี้ทำอย่างไรหรอครับอยากทำเป้นบ้างลองแก้แล้วก็ไม่ได้เหมือนเขาอะครับ

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

Guest

ทำเมนูแบบ นี้ทำอย่าไรหรอครับ ผมลองเอาทำตามแล้วผลก้ไม่ออกแบบเขาอะครับ รบกวนผู้รู้ ตอบ ที ครับ

http://www.sadung.com/css/CSS-Navigation-website/CSS-Navigation.html
ขอบคุณ ครับ

Tag : PHP, HTML/CSS

Date : 2010-08-29 20:43:38

By : ลองของ

View : 1223

Reply : 6

No. 1

xxx

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

ยังไม่ได้เปิดดู source นะครับ

แต่ขอมั่วว่า แค่กำหนด css แบบ mouse hover กับ mouse out เพื่อเปลี่ยนรูป background ทั้งนั้นเอง

Date : 2010-08-29 20:47:01

By : tungman

No. 2

PlaKriM

โพสกระทู้ ( 11,835 )
บทความ ( 10 )

Quote:
BODY {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 20px 0px 0px; PADDING-TOP: 0px; BACKGROUND-REPEAT: repeat-x; BACKGROUND-COLOR: #ecebec
}
#container {
MARGIN: auto; WIDTH: 600px
}
#title {
MARGIN-BOTTOM: 50px; MARGIN-LEFT: auto; WIDTH: 546px; MARGIN-RIGHT: auto; HEIGHT: 75px
}
.navigation LI {
DISPLAY: block; FLOAT: left; LIST-STYLE-TYPE: none
}
.navigation LI A {
DISPLAY: block; WIDTH: 89px; TEXT-INDENT: -9999px; HEIGHT: 53px
}
LI.button1 {
BACKGROUND-POSITION: left top; BACKGROUND-IMAGE: url(../style/navigation.png); BACKGROUND-REPEAT: no-repeat
}
LI.button2 {
BACKGROUND-POSITION: -89px top; BACKGROUND-IMAGE: url(../style/navigation.png); BACKGROUND-REPEAT: no-repeat
}
LI.button3 {
BACKGROUND-POSITION: -166px top; BACKGROUND-IMAGE: url(../style/navigation.png); BACKGROUND-REPEAT: no-repeat
}
LI.button4 {
BACKGROUND-POSITION: -249px top; BACKGROUND-IMAGE: url(../style/navigation.png); BACKGROUND-REPEAT: no-repeat
}
LI.button5 {
BACKGROUND-POSITION: -334px top; BACKGROUND-IMAGE: url(../style/navigation.png); BACKGROUND-REPEAT: no-repeat
}
LI.button6 {
BACKGROUND-POSITION: right top; BACKGROUND-IMAGE: url(../style/navigation.png); BACKGROUND-REPEAT: no-repeat
}
LI.button1 A:hover {
BACKGROUND-POSITION: left bottom; BACKGROUND-IMAGE: url(../style/navigation.png); BACKGROUND-REPEAT: no-repeat
}
LI.button2 A:hover {
BACKGROUND-POSITION: -89px bottom; BACKGROUND-IMAGE: url(../style/navigation.png); BACKGROUND-REPEAT: no-repeat
}
LI.button3 A:hover {
BACKGROUND-POSITION: -166px bottom; BACKGROUND-IMAGE: url(../style/navigation.png); BACKGROUND-REPEAT: no-repeat
}
LI.button4 A:hover {
BACKGROUND-POSITION: -249px bottom; BACKGROUND-IMAGE: url(../style/navigation.png); BACKGROUND-REPEAT: no-repeat
}
LI.button5 A:hover {
BACKGROUND-POSITION: -334px bottom; BACKGROUND-IMAGE: url(../style/navigation.png); BACKGROUND-REPEAT: no-repeat
}
LI.button6 A:hover {
BACKGROUND-POSITION: right bottom; BACKGROUND-IMAGE: url(../style/navigation.png); BACKGROUND-REPEAT: no-repeat
}

แปะให้ดูซะเลยว่าเข้าเขียนแบบนี้

Date : 2010-08-29 21:08:16

By : PlaKriM

No. 3

Guest

index.html

<!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=windows-1250" />
<link href="styles.css" type=text/css rel=stylesheet> </link>
<title>Untitled Document</title>
</head>
<body>
<DIV id=container></DIV>
<ul class=navigation>
<li class=button1><a title="??? Photoshop"
href="http://www.sadung.com/?cat=1">??? Photoshop</a>
</li>
<li class=button2><a title="Download"
href="http://www.sadung.com/?cat=7">Download</a>
</li>
<li class=button3><a title="??????"
href="http://www.sadung.com/hardware">??????</a>
</li>
<li class=button4><a title="??????????"
href="http://www.sadung.com/smf/">??????????</a>
</li>
<li class=button5><a title="program download"
href="http://www.sadung.com/smf/">program download</a>
</li>
<li class=button6><a title="??? FlASH"
href="http://www.sadung.com/?cat=5">??? FlASH</a>
</li></ul>
</body>
</html>
--------------------------------------------------------------------------------------------------------------------------------
style.css
BODY {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 20px 0px 0px; PADDING-TOP: 0px; BACKGROUND-REPEAT: repeat-x; BACKGROUND-COLOR: #ecebec
}
#container {
MARGIN: auto; WIDTH: 600px
}
.navigation LI {
DISPLAY: block; FLOAT: left; LIST-STYLE-TYPE: none
}
.navigation LI A {
DISPLAY: block; WIDTH: 89px; TEXT-INDENT: -9999px; HEIGHT: 53px
}
LI.button1 {
BACKGROUND-POSITION: left top; BACKGROUND-IMAGE:url(onebit_03.png); BACKGROUND-REPEAT: no-repeat
}
LI.button2 {
BACKGROUND-POSITION: -89px top; BACKGROUND-IMAGE:url(onebit_04.png); BACKGROUND-REPEAT: no-repeat
}
LI.button3 {
BACKGROUND-POSITION: -166px top; BACKGROUND-IMAGE:url(onebit_11.png); BACKGROUND-REPEAT: no-repeat
}
LI.button4 {
BACKGROUND-POSITION: -249px top; BACKGROUND-IMAGE:url(onebit_13.png); BACKGROUND-REPEAT: no-repeat
}
LI.button5 {
BACKGROUND-POSITION: -334px top; BACKGROUND-IMAGE:url(onebit_17.png); BACKGROUND-REPEAT: no-repeat
}
LI.button6 {
BACKGROUND-POSITION: right top; BACKGROUND-IMAGE:url(onebit_18.png); BACKGROUND-REPEAT: no-repeat
}
LI.button1 A:hover {
BACKGROUND-POSITION: left bottom; BACKGROUND-IMAGE:url(onebit_03.png); BACKGROUND-REPEAT: no-repeat
}
LI.button2 A:hover {
BACKGROUND-POSITION: -89px bottom; BACKGROUND-IMAGE:url(onebit_04.png); BACKGROUND-REPEAT: no-repeat
}
LI.button3 A:hover {
BACKGROUND-POSITION: -166px bottom; BACKGROUND-IMAGE:url(onebit_11.png); BACKGROUND-REPEAT: no-repeat
}
LI.button4 A:hover {
BACKGROUND-POSITION: -249px bottom; BACKGROUND-IMAGE:url(onebit_13.png); BACKGROUND-REPEAT: no-repeat
}
LI.button5 A:hover {
BACKGROUND-POSITION: -334px bottom; BACKGROUND-IMAGE:url(onebit_17.png); BACKGROUND-REPEAT: no-repeat
}
LI.button6 A:hover {
BACKGROUND-POSITION: right bottom; BACKGROUND-IMAGE:url(onebit_18.png); BACKGROUND-REPEAT: no-repeat
}

รูปมันข้นแค่ด้านข้างซ้ายกับขวาอะครับ รูปตรงกลางไม่ขึ้นโชว์อะครับ
พอเอาเมาส์ไปวางรูปมันก็ขยับนะครับแต่ขยับลงข่างล่างนิดเดียวเองอะครับเองอะครับ
ไม่เหมือนกับของเขาเลยครับ

Date : 2010-08-29 21:53:03

By : ลองของ

No. 4

Guest

style.css
BODY {
PADDING-RIGHT:0px; PADDING-LEFT:0px; PADDING-BOTTOM: 100px; MARGIN: 20px 0px 0px; PADDING-TOP: 50px; BACKGROUND-REPEAT: repeat-x; BACKGROUND-COLOR: #ecebec
}
#container {
MARGIN: auto; WIDTH: 600px
}
.navigation LI {
DISPLAY:block; FLOAT:left; LIST-STYLE-TYPE: none
}
.navigation LI A {
DISPLAY:block; WIDTH: 89px; TEXT-INDENT: -9999px; HEIGHT: 60px;
}
LI.button1 {
BACKGROUND-POSITION:top; BACKGROUND-IMAGE:url(onebit_03.png); BACKGROUND-REPEAT: no-repeat
}
LI.button2 {
BACKGROUND-POSITION:top; BACKGROUND-IMAGE:url(onebit_04.png); BACKGROUND-REPEAT: no-repeat
}
LI.button3 {
BACKGROUND-POSITION:top; BACKGROUND-IMAGE:url(onebit_11.png); BACKGROUND-REPEAT: no-repeat
}
LI.button4 {
BACKGROUND-POSITION:top; BACKGROUND-IMAGE:url(onebit_13.png); BACKGROUND-REPEAT: no-repeat
}
LI.button5 {
BACKGROUND-POSITION:top; BACKGROUND-IMAGE:url(onebit_17.png); BACKGROUND-REPEAT: no-repeat
}
LI.button6 {
BACKGROUND-POSITION:top; BACKGROUND-IMAGE:url(onebit_18.png); BACKGROUND-REPEAT: no-repeat
}
LI.button1 A:hover {
BACKGROUND-POSITION:bottom ; BACKGROUND-IMAGE:url(onebit_03.png); BACKGROUND-REPEAT:no-repeat
}
LI.button2 A:hover {
BACKGROUND-POSITION:bottom; BACKGROUND-IMAGE:url(onebit_04.png); BACKGROUND-REPEAT:no-repeat
}
LI.button3 A:hover {
BACKGROUND-POSITION:bottom; BACKGROUND-IMAGE:url(onebit_11.png); BACKGROUND-REPEAT: no-repeat
}
LI.button4 A:hover {
BACKGROUND-POSITION:bottom; BACKGROUND-IMAGE:url(onebit_13.png); BACKGROUND-REPEAT: no-repeat
}
LI.button5 A:hover {
BACKGROUND-POSITION:bottom; BACKGROUND-IMAGE:url(onebit_17.png); BACKGROUND-REPEAT: no-repeat
}
LI.button6 A:hover {
BACKGROUND-POSITION:bottom; BACKGROUND-IMAGE:url(onebit_18.png); BACKGROUND-REPEAT: no-repeat
}
-------------------------------------------------
ผมลองแก้แบบนี้แล้วรูปพื้นหลังขึ้นโชว์ทุกอันแล้วครับแต่ผลก็ยังไม่ออกมาได้แบบเขาอยู่ดี

Date : 2010-08-29 22:52:30

By : ลองของ

No. 5

Guest

ผ่านมาเห็นพอดี อิอิ
ลองใช้ Jquery ดูนะครับ

http://meewebfree.com/site/javascript-jquery/244-simple-jquery-menu-rollover

Date : 2010-09-14 20:42:39

By : ผ่านมาเห็น

No. 6

peterXP

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

พี่ PlaKriM โชว์เมพเลย sprite image menu อิๆ
ผ่านมาแซว

Date : 2010-09-16 12:41:37

By : peterxp

ค้นหาข้อมูล

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

Re : Css menu แบบนี้ทำอย่างไรหรอครับอยากทำเป้นบ้างลองแก้แล้วก็ไม่ได้เหมือนเขาอะครับ

รายละเอียด

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

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

Notice

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

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

โดย

อีเมล์

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