อยากได้เมนูแบบนี้

jengseo01 · อยากได้เมนูแบบนี้

http://www.kapook.com/

เมนุ สี ๆ อะครับ เขาทำยังไง อยากได้มากเลย

wasantec

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

jengseo01

อ้างถึงจาก: wasantec ใน 26 พฤศจิกายน 2012, 21:52:33
นั่งทำหลังขด หลังแข็ง คงจะไม่มีคนเอามาแจกได้ง่ายๆ หลอกครับ

เขาทำยังไง?

?

ultimatecha

ผมว่ามันดูเบสิคๆเลยนะ แต่ทำไม่เป็นครับ

rasin

สวยดี มาติดตาม

sodsaikung

http://www.sadung.com/?p=3136

ประมาณนี้หรอ

annlzal

ลองศึกษา mouse over ดู search ใน google

jengseo01

ผมทำได้แต่คล้าย ๆ แต่ ผมอยากได้แบบมีเงาด้วยอ่ะ

Misaka

เอาโครมไปแกะดูครับ
แปปเดียวเอง

koonnak

เซพ เพจ ก็เห็นแล้วครับ

jengseo01

อ้างถึงจาก: Misaka ใน 26 พฤศจิกายน 2012, 23:49:42
เอาโครมไปแกะดูครับ
แปปเดียวเอง

ทำไม่เป็นอ่ะทำยังไงหรอครับสอนผมทีนะ

JummY HoT

เข้าเว็บแล้วลอง กด f8 ดู เผื่อเห็นโค้ดอะไรที่ต้องการ ก้ก็อบไปดู

l3adtzl3oy

อ้างถึงเขาทำยังไง?

ต้องทำ 2 ส่วนครับ
1. กำหนด class หรือ id ให้ selector (ในที่นี้เราใช้ li และกำหนดเป็น class) อยู่ในส่วนของ code <HTML>
2. กำหนด property ต่างๆให้กับ selector class นั้นๆ ให้แสดงผลตามที่เราต้องการ อยู่ในส่วนของ css <Style>

ลองเอา code ข้างล่างไปศึกษาดูครับ
ผมใช้ firebug แงะมาจากกระปุก แล้วตัดบางส่วนที่ไม่จำเป็นออก

<!DOCTYPE HTML>
<head>
<style>
   ul { width:1000px; margin:0 auto; background:#FFDB0D; box-shadow:0 2px 4px rgba(0,0,0,0.3) inset; height:43px; }
   ul li { width:84px; display:inline; float:left; text-align:center; box-shadow:0 2px 4px rgba(0,0,0,0.3) inset; position:relative; height:43px; }

   ul li a { display:block; width:100%; font-size:11px; color:#FFFFFF; position:absolute; bottom:0; left:0; z-index:5; height:34px; padding:9px 0 0 0; box-shadow:0 3px 4px rgba(0,0,0,0.3) inset; }


/* กำหนดสีตามที่เราต้องการให้แต่ละ class */
   ul li.sub-clip a { background:#FFDB0D; color:rgba(0,0,0,0.5); }
   ul li.sub-photo a { background:#FF2511; }
   ul li.sub-web a { background:#9327CB; }
   ul li.sub-fb a { background:#3C5A98; }
   ul li.sub-tw a { background:#29AAE1; }

   ul li:hover a { height:40px; box-shadow:0 3px 4px rgba(0,0,0,0) inset; z-index:99; }
   ul li:hover a:before { content:" "; width:1px; height:1px; border-top:18px solid rgba(0,0,0,0.3); border-right:6px solid rgba(0,0,0,0.3); border-bottom:18px solid transparent; border-left:6px solid transparent; position:absolute; left:-13px; top:6px; }
   ul li:hover a:after { content:" "; width:1px; height:1px; border-top:18px solid rgba(0,0,0,0.3); border-left:6px solid rgba(0,0,0,0.3); border-bottom:18px solid transparent; border-right:6px solid transparent; position:absolute; right:-13px; top:6px; }
   ul li a:hover { text-decoration:none; }

   ul li:hover a:before {
   border-color: rgba(0, 0, 0, 0.3) rgba(0, 0, 0, 0.3) transparent transparent; /* ทำเงาด้านซ้าย */
   border-style: solid;
   border-width: 18px 6px;
   content: " ";
   height: 1px;
   left: -13px;
   position: absolute;
   top: 6px;
   width: 1px;
   }

   ul li:hover a:after {
   border-color: rgba(0, 0, 0, 0.3) transparent transparent rgba(0, 0, 0, 0.3); /* ทำเงาด้านขวา */
   border-style: solid;
   border-width: 18px 6px;
   content: " ";
   height: 1px;
   position: absolute;
   right: -13px;
   top: 6px;
   width: 1px;
   }
</style>

</head>

<body>

<ul>

   <li class="sub-clip">
     <a target="_blank" href="#">1</a>
   </li>
   <li class="sub-photo">
     <a target="_blank" href="#">2</a>
   </li>
   <li class="sub-web">
     <a target="_blank" href="#">3</a>
   </li>
   <li class="sub-fb">
     <a target="_blank" href="#">4</a>
   </li>
   <li class="sub-tw">
     <a target="_blank" href="#">5</a>
   </li>
</ul>
</body>
</html>

kookonline

อ้างถึงจาก: jengseo01 ใน 26 พฤศจิกายน 2012, 23:39:51
ผมทำได้แต่คล้าย ๆ แต่ ผมอยากได้แบบมีเงาด้วยอ่ะ

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

moshikub1

http://www.kapook.com/images_CF/nav-03.png

ดูจากภาพนี้แล้วน่าจะเข้าใจครับ เค้าเขียนเรื่องตำแหน่ง bg ด้วย css ครับ

เมื่อ mouse over ก็ปรับตำแหน่งภาพครับ

jengseo01

อ้างถึงจาก: l3adtzl3oy ใน 28 พฤศจิกายน 2012, 07:26:11
อ้างถึงเขาทำยังไง?

ต้องทำ 2 ส่วนครับ
1. กำหนด class หรือ id ให้ selector (ในที่นี้เราใช้ li และกำหนดเป็น class) อยู่ในส่วนของ code <HTML>
2. กำหนด property ต่างๆให้กับ selector class นั้นๆ ให้แสดงผลตามที่เราต้องการ อยู่ในส่วนของ css <Style>

ลองเอา code ข้างล่างไปศึกษาดูครับ
ผมใช้ firebug แงะมาจากกระปุก แล้วตัดบางส่วนที่ไม่จำเป็นออก

<!DOCTYPE HTML>
<head>
<style>
   ul { width:1000px; margin:0 auto; background:#FFDB0D; box-shadow:0 2px 4px rgba(0,0,0,0.3) inset; height:43px; }
   ul li { width:84px; display:inline; float:left; text-align:center; box-shadow:0 2px 4px rgba(0,0,0,0.3) inset; position:relative; height:43px; }

   ul li a { display:block; width:100%; font-size:11px; color:#FFFFFF; position:absolute; bottom:0; left:0; z-index:5; height:34px; padding:9px 0 0 0; box-shadow:0 3px 4px rgba(0,0,0,0.3) inset; }


/* กำหนดสีตามที่เราต้องการให้แต่ละ class */
   ul li.sub-clip a { background:#FFDB0D; color:rgba(0,0,0,0.5); }
   ul li.sub-photo a { background:#FF2511; }
   ul li.sub-web a { background:#9327CB; }
   ul li.sub-fb a { background:#3C5A98; }
   ul li.sub-tw a { background:#29AAE1; }

   ul li:hover a { height:40px; box-shadow:0 3px 4px rgba(0,0,0,0) inset; z-index:99; }
   ul li:hover a:before { content:" "; width:1px; height:1px; border-top:18px solid rgba(0,0,0,0.3); border-right:6px solid rgba(0,0,0,0.3); border-bottom:18px solid transparent; border-left:6px solid transparent; position:absolute; left:-13px; top:6px; }
   ul li:hover a:after { content:" "; width:1px; height:1px; border-top:18px solid rgba(0,0,0,0.3); border-left:6px solid rgba(0,0,0,0.3); border-bottom:18px solid transparent; border-right:6px solid transparent; position:absolute; right:-13px; top:6px; }
   ul li a:hover { text-decoration:none; }

   ul li:hover a:before {
   border-color: rgba(0, 0, 0, 0.3) rgba(0, 0, 0, 0.3) transparent transparent; /* ทำเงาด้านซ้าย */
   border-style: solid;
   border-width: 18px 6px;
   content: " ";
   height: 1px;
   left: -13px;
   position: absolute;
   top: 6px;
   width: 1px;
   }

   ul li:hover a:after {
   border-color: rgba(0, 0, 0, 0.3) transparent transparent rgba(0, 0, 0, 0.3); /* ทำเงาด้านขวา */
   border-style: solid;
   border-width: 18px 6px;
   content: " ";
   height: 1px;
   position: absolute;
   right: -13px;
   top: 6px;
   width: 1px;
   }
</style>

</head>

<body>

<ul>

   <li class="sub-clip">
     <a target="_blank" href="#">1</a>
   </li>
   <li class="sub-photo">
     <a target="_blank" href="#">2</a>
   </li>
   <li class="sub-web">
     <a target="_blank" href="#">3</a>
   </li>
   <li class="sub-fb">
     <a target="_blank" href="#">4</a>
   </li>
   <li class="sub-tw">
     <a target="_blank" href="#">5</a>
   </li>
</ul>
</body>
</html>

ท่านสุดยอดมาเลยครับ อิอิอิอิอิอิอิอิอิอิอิ

mr.beer

มาเก็บ

online7

เก็บกวาดให้หมด

asnowman

ลองไปทำดูด้วยคน อิอิ

Jokerz

เข้ามาเก็บด้วยคน ความรู้ๆ