ทำเมนูแบบรูปภาพสวย ๆ ด้วย CSS
เมนูในเว็บไซต์ต่าง ๆ นั้น แต่ละที่ก็จะมีเทคนิคในการทำไม่เหมือนกัน วันนี้ผมจะนำเสนอวิธีการทำเมนูอีกวิธีหนึ่งที่เน้นความสวยงามเป็นหลัก ข้อดีของการทำเมนูด้วยวิธีนี้คือ ตัวอักษรและพื้นหลังขอเมนูจะเป็นรูปภาพทั้งหมด ทำให้สามารถออกแบบและตกแต่งเมนูได้เต็มที่ แต่ความสวยงามที่ได้ยังอยู่บนมาตรฐานเหมือนเดิมนะครับ เพราะถึงแม้ว่าเราจะใช้รูปภาพในการทำเมนู แต่ 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>
</ul>
ส่วน CSS ที่นำมาใช้ทำเมนูมีหน้าตาแบบนี้คับ
ul#example {margin: 0; padding: 0;}
ul#example li {display: inline;}
ul#example li a {float: left; width: 117px; height: 0; padding-top: 38px; overflow: hidden;}
ul#example li a {background:url(example-menu-bg.png) no-repeat left top;}
ul#example li#home a {background-position: 0 0;}
ul#example li#products a {background-position: -117px 0;}
ul#example li#service a {background-position: -234px 0;}
ul#example li#blog a {background-position: -351px 0;}
ul#example li#contact a {background-position: -468px 0;}
ul#example li#home a:hover,ul#example li#home a.current {background-position: 0 -38px;}
ul#example li#products a:hover {background-position: -117px -38px;}
ul#example li#service a:hover {background-position: -234px -38px;}
ul#example li#blog a:hover {background-position: -351px -38px;}
ul#example li#contact a:hover {background-position: -468px -38px;}
CSS จะถูกแยกออกเป็น 3 ส่วนหลัก ๆ คือ
1. การใช้งานทั่วไป (ul, li, a)
2. ควบคุมการแสดงผลปกติของเมนูแต่ละอัน (li#home a, li#products a เป็นต้น)
3. ควบคุมการแสดงผลตอน hover (li#home a:hover, li#products a:hover เป็นต้น)
มาดูเหตุผลในการใช้งาน property บางตัวที่หลายคนอาจจะไม่ค่อยคุ้นกันดีกว่าครับ
height: 0, padding-top: 38px, overflow: hidden
property ทั้ง 3 ตัวนี้จะทำให้รูปภาพที่เราต้องการปรากฎขึ้นมาแทน text ของแต่ละเมนู(overflow: hidden) โดยกำหนด padding-top ตามขนาดความสูงของรูปภาพที่นำมาทำเป็นเมนู (ความสูงของรูปภาพนี้เท่ากับ 38px)
background-position
property ตัวนี้จะเป็นการแสดงผลพื้นหลังของเมนูแต่ละตัว ซึ่งค่าที่นำมาใส่นั้นจะเป็นค่าพิกัดเริ่มต้นของความกว้าง ความยาวรูปภาพ (แกนx แกนy)
ยังไงก็ลองเอาไปปรับใช้ดูกันนะครับ วิธีการทำก็ไม่ยาก ลองศึกษาการใช้ CSS ดูก็น่าจะเอาไปใช้งานกันได้หลากหลายยิ่งขึ้น เอาไว้คราวหน้าผมจะหาเทคนิคอื่น ๆ ในการใช้งาน CSS มาให้ดูกันอีกครับ วันนี้เอาไว้แค่นี้ก่อน 