เมนูในเว็บไซต์ต่าง ๆ นั้น แต่ละที่ก็จะมีเทคนิคในการทำไม่เหมือนกัน วันนี้ผมจะนำเสนอวิธีการทำเมนูอีกวิธีหนึ่งที่เน้นความสวยงามเป็นหลัก ข้อดีของการทำเมนูด้วยวิธีนี้คือ ตัวอักษรและพื้นหลังขอเมนูจะเป็นรูปภาพทั้งหมด ทำให้สามารถออกแบบและตกแต่งเมนูได้เต็มที่ แต่ความสวยงามที่ได้ยังอยู่บนมาตรฐานเหมือนเดิมนะครับ เพราะถึงแม้ว่าเราจะใช้รูปภาพในการทำเมนู แต่ code ที่เรานำมาใช้นั้นยังเป็นตัวอักษรเหมือนเดิม จึงทำให้เรายังหวังผล SEO จาก keyword ที่อาจจะผสมลงไปในเมนูได้เหมือนเดิม (เยี่ยมมั้ยหละ) อย่ารอช้า เราไปดูกันเลยดีกว่าครับ ในขั้นตอนแรกเราต้องออกแบบเมนูที่เราต้องการก่อนนะคับ ทำเป็นไฟล์รูปภาพไฟล์เดียวยาว ๆ เลยนะคับไม่ต้องเสียเวลาตัดแบ่งเป็นหลาย ๆ อัน อันนี้เป็นรูปภาพ(เพียงรูปเดียว)ที่นำมาใช้ทำเมนูครับ บางคนอาจจะงงนะครับว่า “เอ๊ะ ทำไมเมนูมันมีสองแถว” ก็คือรูปภาพที่นำมาใช้นี้แถวบนจะเป็นสถานะปกติของเมนู ส่วนแถวล่างจะเป็นสถานะตอน hover ครับ HTML จะเป็นแบบนี้ครับ <ul id=”example”> <li id=”home”><a href=”#” class=”current”>home</a></li> <li id=”products”><a href=”#”>products</a></li> <li id=”service”><a href=”#”>service</a></li> <li id=”blog”><a href=”#”>blog</a></li> <li id=”contact”><a href=”#”>contact</a></li> [...]