การสร้างเมนูคล้ายๆ กับเว็บ Sanook จัดทำโดย : Mr.GuruZ พิมพ์
 :: WebThaiDD.COM - ขุมทรัพย์ทางปัญญาของคนไทย •))) ------------
หลายคนสงสัยว่าเว็บไซต์ดังๆ เขาทำเมนูกันยังไงสวยจังเลย นี่ก็เป็นอีกเว็บไซต์หนึ่งนะครับที่มีคนเข้าไปดูเยอะครับ เราก็จะมาดูกันซิว่าเขาทำเมนูกันอย่างไร

ภาพเมนูตัวอย่าง
//หรือจะเข้าไปดูที่เว็บ Sanook.com ก็ได้นะครับ

ขั้นตอนการทำ

1.> ใช้โปรแกรม Photoshop หรือโปรแกรมที่เราชอบสร้างรูปภาพที่เราจะนำมาใช้คั่นระหว่างเมนู (ใส่สีตามที่เราต้องการได้เลยนะครับ) ขนาดที่สร้าง กว้าง 1 px - สูง 2 px


2.> หลังจากนั้นให้เราสร้างตารางขนาด 10 แถว x 5 คอลัมภ์ หรือตามขนาดเมนู่ที่เราต้องการ ความกว้างก็ประมาณ 120 px ก็ได้ครับ แล้วเราจะได้ตารางขึ้นมาดังภาพ

ตารางที่เราได้


3.> หลังจากที่เราสร้างตารางเสร็จแล้ว ให้เรารวมเซล์ของตารางแถวแรก และกำหนดขนาดความกว้างโดยประมาณที่ 10 px ดังภาพ

4.> หลังจากนั้นก็ทำการใส่สี #FE7474 ลงไปในตารางที่เราได้ทำการรวม

5.> หลังจากนั้นให้เรานำภาพที่เราเตรียมไว้มาใส่เป็น Background แบบสลับช่อง


6.> หลังจากนั้นให้เรานำรูปภาพที่เราได้เตรียมไว้มาใส่ในตารางที่เราใส่ Background ไว้อีกทีหนึ่ง

7.> หลังจากนั้นให้เราทำการใส่สี #C10909 ลงในช่องว่างที่เหลืออีกทีหนึ่ง

8.> หลังจากนั้นก็ใช้ Photoshop สร้างภาพ 3 เหลี่ยมแล้วนำมาใส่ที่มุมของตารางเพียงเท่านี้เราก็จะได้เทนูสวย ๆ มาใช้งานในเว้บเราแล้วนะครับ

จัดทำโดย : อ.บอย
ที่มา : เว็บ Sanook.com
คุณอาจสนใจ
เปิดฐานข้อมูลโหมด DesignView ใน MX
dooidea team (52,801 - 21 มี.ค. 51)
เร่งสปีด FireFox
เว็บไทยดีดี (20,583 - 29 ก.ย. 50)
การใช้ตัวช่วยสร้างการค้นหาเพื่อสร้างข้อความในคอลัมน์
Mr.N (22,578 - 02 มิ.ย. 50)
การแทรกรูปภาพ
Mr.GuruZ (45,952 - 04 มิ.ย. 49)
การนำภาพมาใช้กับรูปทรง 3 มิติที่สร้างจากการทำ 3D Transform
Lee (87,282 - 25 ธ.ค. 49)
Herizontal Type Tool (T)
Mr.GuruZ (42,741 - 22 ก.ย. 50)
การค้นหา และแทนที่คำในเอกสาร Web Page
Mr.GuruZ (40,004 - 05 ก.ย. 49)
วิธีเล่น MSN กับเมล์อื่น ๆ ที่ไม่ใช่ hotmail
เว็บไทยดีดี (15,516 - 03 พ.ย. 50)