ทำเมนู แบบนี้ยังไงหรอครับ(น่าจะเป็น CSS)

[t_doyoumv]

ครับเวลาชี้จะมีเงาอยู๋ด้านหลัง ครับ แล้วแต่ละ เมนู จะมี ...... ขั้น อยู่ครับ ไม่รู็ทำยังไง ไม่เกง่ CSS ด้วยสิครับ

สอบทำแบบนี้ด้วยก็ดีครับ แฮ่ๆ

[whitecross]

จากเว็บไหนเนี่ย ขอเข้าไปดูการทำงานของมันหน่อย พอดีอ่านแล้ว งง 

[t_doyoumv]

เดี๋ยวมาช่วยตอบครับ ไปถูบ้านก่อนเดี๋ยวมาตอบ 

ครับ ผม

[itportal]

ผมใช้ style sheet เข้าช่วยครับ

อันนี้ใน style sheet

โค้ด เลือก ขยาย


.dvleftmenu {
text-decoration: none;
}
.dvleftmenu ul {
margin: 0px;
width: 187px;
padding-left: 0px;
background-color: #F8F8F8;
}
.dvleftmenu li {
background-color: #F8F8F8;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #CCCCCC;
list-style-type: none;
}
.dvleftmenu li a {
color: #333333;
height: 19px;
padding-left: 10px;
padding-top: 2px;
text-decoration: none;
display: block;
}
.dvleftmenu li a:hover {
color: #006699;
background-color: #CCCCCC;
}


อันนี้ในหน้าเว็บ

โค้ด เลือก ขยาย


<div class="dvleftmenu">
<ul>
<li><a href="xxx">xxx</a></li>
<li><a href="xxx">xxx</a></li>
<li><a href="xxx">xxx</a></li>
</ul>
</div>


ลองดูนะครับ

[whitecross]

มีคนมาตอบแล้ว ดีใจด้วยครับ

งั้นผมแนะนำอีกแบบแล้วกันนะครับ เป็นแบบใช้ภาพ สามารถประยุกต์ใช้ได้หลายแบบเลย

http://www.projectplay.in.th/tabhover/

กด view source ดูนะครับ ผมใส่ css ไว้ในส่วนของตัว code เลย ถ้าดูไม่ได้ก็ลง plug-in เสริมถึงจะดูได้

[t_doyoumv]

มีคนมาตอบแล้ว ดีใจด้วยครับ

งั้นผมแนะนำอีกแบบแล้วกันนะครับ เป็นแบบใช้ภาพ สามารถประยุกต์ใช้ได้หลายแบบเลย

http://www.projectplay.in.th/tabhover/

กด view source ดูนะครับ ผมใส่ css ไว้ในส่วนของตัว code เลย ถ้าดูไม่ได้ก็ลง plug-in เสริมถึงจะดูได้

คุงครับ แต่ว่า มันไม่มี .... ขั้น อะครับ แล้ว ผมดึงมาใช้ มันไม่มีสีเลยครับ --*

[g-ji]

หน้าเว็บมันเป็นไงหว่า ไม่เห็นก็บอกไม่ถูกเน้อ

[whitecross]

มีคนมาตอบแล้ว ดีใจด้วยครับ

งั้นผมแนะนำอีกแบบแล้วกันนะครับ เป็นแบบใช้ภาพ สามารถประยุกต์ใช้ได้หลายแบบเลย

http://www.projectplay.in.th/tabhover/

กด view source ดูนะครับ ผมใส่ css ไว้ในส่วนของตัว code เลย ถ้าดูไม่ได้ก็ลง plug-in เสริมถึงจะดูได้

คุงครับ แต่ว่า มันไม่มี .... ขั้น อะครับ แล้ว ผมดึงมาใช้ มันไม่มีสีเลยครับ --*

มันใช้ภาพด้วยครับ ของผมใช้วิธีทำแบบ image hover ครับ

http://www.projectplay.in.th/tabhover/nav.png

เซฟภาพไป แล้วเอาไปไว้ที่เดียวกับไฟล์ index.php หรือไว้ที่ไหนก็ browse หาเอาก็ได้ครับ


ปล. วิธีนี้ใช้ทำเป็น nav แบบอนิเมชั่นได้ด้วยขอบอก แจ่มสุดๆ ลองประยุกต์เอานะครับ

[aCustiCz]

มีคนมาตอบแล้ว ดีใจด้วยครับ

งั้นผมแนะนำอีกแบบแล้วกันนะครับ เป็นแบบใช้ภาพ สามารถประยุกต์ใช้ได้หลายแบบเลย

http://www.projectplay.in.th/tabhover/

กด view source ดูนะครับ ผมใส่ css ไว้ในส่วนของตัว code เลย ถ้าดูไม่ได้ก็ลง plug-in เสริมถึงจะดูได้

คุงครับ แต่ว่า มันไม่มี .... ขั้น อะครับ แล้ว ผมดึงมาใช้ มันไม่มีสีเลยครับ --*

ใส่ border-botom: ..... ; ครับ

[whitecross]

มีคนมาตอบแล้ว ดีใจด้วยครับ

งั้นผมแนะนำอีกแบบแล้วกันนะครับ เป็นแบบใช้ภาพ สามารถประยุกต์ใช้ได้หลายแบบเลย

http://www.projectplay.in.th/tabhover/

กด view source ดูนะครับ ผมใส่ css ไว้ในส่วนของตัว code เลย ถ้าดูไม่ได้ก็ลง plug-in เสริมถึงจะดูได้

คุงครับ แต่ว่า มันไม่มี .... ขั้น อะครับ แล้ว ผมดึงมาใช้ มันไม่มีสีเลยครับ --*

ใส่ border-botom: ..... ; ครับ

ถ้าจะใส่ ... ในโค๊ดของผม ต้องแก้กันนิดนึงนะครับ เพราะผมใช้แบบดึงภาพ จุดมันจะไม่ซ้อนกับภาพ ลองประยุกต์ดูนะครับ

ปล. CSS ทำได้ทุกอย่าง ยกเว้นเขียนโปรแกรม T-T

[itportal]

อ๋อ ผมงงกับคำว่า "เมนู จะมี ...... ขั้น อยู่ครับ" ต้องใช้คำว่า คั่น นะครับจึงจะถูกต้อง

จาก style sheet ที่ผมใส่ลงไป

border-top-width: 1px;
border-top-style: solid;
border-top-color: #CCCCCC;

ตรงนี้ล่ะครับ ที่จะกำหนดว่าจะให้เป็น จุด เส้น ใหญ่ เล็ก สีอะไรยังไง
ลองทำดูครับ แล้วจะเห็นเอง 

[g-ji]

↑ออ

border-bottom:1px dotted #ccc;

คำสั่งนี้ก็พอแล้ว

[t_doyoumv]

ผมใช้ style sheet เข้าช่วยครับ

อันนี้ใน style sheet

โค้ด เลือก ขยาย


.dvleftmenu {
text-decoration: none;
}
.dvleftmenu ul {
margin: 0px;
width: 187px;
padding-left: 0px;
background-color: #F8F8F8;
}
.dvleftmenu li {
background-color: #F8F8F8;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #CCCCCC;
list-style-type: none;
}
.dvleftmenu li a {
color: #333333;
height: 19px;
padding-left: 10px;
padding-top: 2px;
text-decoration: none;
display: block;
}
.dvleftmenu li a:hover {
color: #006699;
background-color: #CCCCCC;
}


อันนี้ในหน้าเว็บ

โค้ด เลือก ขยาย


<div class="dvleftmenu">
<ul>
<li><a href="xxx">xxx</a></li>
<li><a href="xxx">xxx</a></li>
<li><a href="xxx">xxx</a></li>
</ul>
</div>


ลองดูนะครับ

น่าสนดีครับ แต่ ว่า ถ้าจะเปลี่ยน สีพื้นหลังแต่ละช่องยังไงหรอครับ

[t_doyoumv]

สอนทำแบบนี้ด้วยก็ดีครับ แฮ่ๆ

[t_doyoumv]

↑ออ

border-bottom:1px dotted #ccc;

คำสั่งนี้ก็พอแล้ว

ได้แล้วครับๆ มั่วๆ เอา

[whitecross]

ลองเอาไปใส่ดูมั่วๆก่อนครับ จะได้รู้ว่าถ้าใส่อันไหนแล้วเกิดอะไรขึ้น

ท่านเล่นถามหมดอย่างนี้ ก็เหมือนให้คนอื่นทำให้ จะไม่ได้อะไรเอาครับ

ลองเอาไปใส่ดู แล้วคิดดูว่าทำไมถึงเกิดตรงนั้น แล้วตรงนั้นใส่แล้วเป้นยังไง

[t_doyoumv]

ลองเอาไปใส่ดูมั่วๆก่อนครับ จะได้รู้ว่าถ้าใส่อันไหนแล้วเกิดอะไรขึ้น

ท่านเล่นถามหมดอย่างนี้ ก็เหมือนให้คนอื่นทำให้ จะไม่ได้อะไรเอาครับ

ลองเอาไปใส่ดู แล้วคิดดูว่าทำไมถึงเกิดตรงนั้น แล้วตรงนั้นใส่แล้วเป้นยังไง

ครับได้แล้วๆ ครับ อิอิ เหลือ แต่ ถ้าจะเอาช่องไหนช่องหนึ่ง ใส่ พื้นหลังคนละสีทำยังไงครับ ...

[whitecross]

ลองเอาไปใส่ดูมั่วๆก่อนครับ จะได้รู้ว่าถ้าใส่อันไหนแล้วเกิดอะไรขึ้น

ท่านเล่นถามหมดอย่างนี้ ก็เหมือนให้คนอื่นทำให้ จะไม่ได้อะไรเอาครับ

ลองเอาไปใส่ดู แล้วคิดดูว่าทำไมถึงเกิดตรงนั้น แล้วตรงนั้นใส่แล้วเป้นยังไง

ครับได้แล้วๆ ครับ อิอิ เหลือ แต่ ถ้าจะเอาช่องไหนช่องหนึ่ง ใส่ พื้นหลังคนละสีทำยังไงครับ ...

code สี จะนำหน้าด้วย # ลองแก้เลขเอาครับ คิดว่าท่านน่าจะผสมสีแบบ RGB เป็นนะครับ 

[t_doyoumv]

ลองเอาไปใส่ดูมั่วๆก่อนครับ จะได้รู้ว่าถ้าใส่อันไหนแล้วเกิดอะไรขึ้น

ท่านเล่นถามหมดอย่างนี้ ก็เหมือนให้คนอื่นทำให้ จะไม่ได้อะไรเอาครับ

ลองเอาไปใส่ดู แล้วคิดดูว่าทำไมถึงเกิดตรงนั้น แล้วตรงนั้นใส่แล้วเป้นยังไง

ครับได้แล้วๆ ครับ อิอิ เหลือ แต่ ถ้าจะเอาช่องไหนช่องหนึ่ง ใส่ พื้นหลังคนละสีทำยังไงครับ ...

code สี จะนำหน้าด้วย # ลองแก้เลขเอาครับ คิดว่าท่านน่าจะผสมสีแบบ RGB เป็นนะครับ 

ครับ เปลี่ยนแล้วครับแต่ว่ามันดันไปทุกช่องเลยอะครับผมอยากให้โชว์แค่ช่องใดช่องหนึ่งครับ

[t_doyoumv]

สอนทำแบบนี้ด้วยก็ดีครับ แฮ่ๆ  ผมทำได้ แต่ว่า หัวมันไม่มลๆอะครับ