ทำปุ่มเมนู CSS ขอบมนโดยใช้รูปเดียว
Jul 3rd
ก่อนที่ผมจะรู้จัก CSS นั้น การทำปุ่มเมนูในรูปแบบนี้ นั้นต้องใช้ รูป ถึง 3 รูปเลยทีเดียว คือ รูปขอบด้านซ้าย รูปพื้นที่ตรงกลาง และรูปขอบมนด้านขวา แต่ตอนนี้เราสามารถใช้ CSS ช่วยโดยใช้รูปเพียงรูปเดียว ประหยัดเวลา ประหยัดแบนวิธ ใช้ง่าย ในทุกที่ ยืดได้ แม้ ประโยคจะยาว ลองมาดูวิธีกันครับ
Image
ด้านบนนี้คือตัวอย่างรูป ที่เราจะใช้กัน แต่ผมจะไม่บอกวิธีการทำรูปนะครับ ดาวน์โหลด .psd ไปศึกษาหรือปรับเปลี่ยนกันดูเองนะครับ menubutton.psd
Concept
คอนเซปคือ เราจะใส่แบ็คกราวด์ ใน แท็ก a จัดชิดขวา และจะใส่รูปเดียวกัน ที่ แท็ก span แล้วจัดชิดซ้าย ง่ายๆ แค่นี้เอง มาดู HTML และ CSS กัน
HTML
<ul class="blue"> <li><a class="current" title="home" href="#">home</a></li> <li><a title="products" href="#">products</a></li> <li><a title="blog" href="#">blog</a></li> <li><a title="contact" href="#">contact</a></li> </ul>
CSS
<ul>- Unorder-List
ul.blue { padding: 5px; margin: 10px 0; list-style: none; float: left; }
อย่าลืมใส่ list-style เป็น none ครับ เพราะไม่งั้นเราจะใส่ แบ็คกรานด์ไม่ได้
<li>- List
ul.blue li { float: left; } ul.blue li a { float: left; text-decoration: none; color: #ccc; padding: 4px 15px 0 0; margin-right: 8px; font: 900 14px "Arial", Helvetica, sans-serif; }
ใส่ padding ด้านขวา 15 เพื่อเว้นระยะ ระหว่างปุ่ม
<span>- span ที่อยู่ใน link
ul.blue li a span { float: left; padding-right: 15px; display: block; margin-top: -4px; height: 24px; }
จะเห็นว่าใส่ margin-top ไว้ -4px นั่นเพราะว่า ส่วนของ a เรามี padding ด้านบนอยู่ 4px ครับ
<Hover>- ตอนที่เอาเมาส์โอเวอร์
ul.blue li a:hover, ul.blue li a.current { color: #0d5f83; background: url("images/blue.png") no-repeat top right; } ul.blue li a:hover span, ul.blue li a.current span { background: url("images/blue.png") no-repeat top left; }
ลองใช้โค้ดทั้งหมดรวมกันดูครับ ถ้ายังไม่เห็นภาพ ลองดูตัวอย่างที่นี่ menu.html สำหรับรูป ใส่ไว้ใน โฟลเดอร์ images ด้วยนะครับ ถ้าใช้ css ตามด้านบนนี้ ดาวน์โหลดไฟล์ตัวอย่างทั้งหมดได้ที่นี่ครับ cssmenu1image.rar
ข้อมูลจาก http://kailoon.com/css-sliding-door-using-only-1-image/
ขอบคุณมากๆค่ะ ได้ความรู้ดี
ขอถามเพิ่มค่ะ
แล้วมันจะ “ประหยัดแบนวิธ” ไงอ๊ะค่ะ
เพราะเท่ากับ client load background ชิ้นใหญ่ทีเดียวเลย (ตามตัวอย่าง 493*24 )
อันนี้ไม่พูดถึงทำรูปให้มีขนาดเล็กนะค่ะ (ตามตัวอย่าง 394 bytes)
แต่ที่ว่าประหยัดเวลานี่เห็นด้วยอย่างยิ่งค่ะ
เขียนโค้ดสั้นลงน่ะครับ แล้วใช้ซ้ำได้หลายๆที่ครับ
ใส่ มันทำให้มี warning นี่คะ element เปล่า มีวิธีอื่นไหมคะ
มันไม่ขึ้น เอาใหม่ ใส่ span เปล่าๆ ไม่มีอาไรข้างใน มันมี warning นี่คะ มีวิธีการอื่นไหมคะ
warning อะไรหรอครับ
คือ ตามหลักเว็บ standard เค้าห้ามมี element เปล่าอ่ะค่ะ ถ้าใช้ firefox เช็คดู จะเห็นว่า มี warning เตือนด้านล่างขวา ตรง status บาร์อ่ะค่ะ
เป็นเทคนิคที่ดีมากครับ สามารถปรับใช้ได้ในหลายรูปแบบ และแก้ไขง่ายด้วยขอบคุณมากครับ
ตอบคำถามคุณ purie
เว็บ standard ใช้ element ได้นะครับส่วน warning น่าจะมาจากสาเหตุอื่นครับ เช่นคุณอาจใส่ javascript เอาไว้แนะนำให้ดูส่วนอื่นก่อนครับ เพราะผมดู code แล้วไม่มีปัญหาหรือ bug ครับสามารถใช้ได้ทั้ง firefox และ IE ครับ คิดว่า Browser อื่นก็ไม่น่าจะมีปัญหาด้วยนะครับ
คิดไม่ถึงจิงๆๆ …
อิอิ … เก่งๆๆๆ
เอาไปใช้ยังไงอะครับ มือใหม่บอกด้วยนะครับ
ชอบครับได้ความรู้….แล้วจะเข้ามาเก็บเกี่ยวบ่อยๆครับ
ขอบคุณครับ
ขอบคุณมากครับ ผมหาวิธีอยู่ตั้งนาน สุดยอดเลยย
แบบนี้ จะใช้ภาพนามสกุลอะไรได้บ้าง
หรือว่าเป็น Gif อย่างเีดียว
ถ้ามีเทมเพลสแล้วแต่ต้องการเปลี่ยนสี ตรงส่วน colum ทั้งซ้ายและ ขวาละคะ สามารถทำได้ไหมค่ะ
เดี๋ยวจะไปทำปุ่มสวย ๆมั่ง
ความรู้แบบนี้ชอบจริงๆ
ข้อมูลดีๆแบบนี้หามาบอกกันเรื่อยๆนะครับ
แล้วถ้าจะทำเหมือนเมนูด้านขวามือ ที่เป็นสีฟ้า ทำยังไงค่ะ รบกวนบอกหน่อย
เคยได้ยินวิธีการนี้มาบ้าง แต่พอมาดู code แล้วค่อนข้างยาวครับ เกิดอาการขี้เกียจกลับไปแก้ของเก่า ถ้าจะแก้คงนานพอดูเลย เอาไว้ว่างๆ ทำใจได้ก่อนจะเริ่มแก้ครับ
วิท (http://www.tutorpoint.net)
ใช้ง่ายมากเลยค่ะ ภาพเดียวอยู่
แต่น่าจะใช้ได้เฉพาะ .jpg หรือเปล่าคะ
ถ้าเป็น .png พื้นหลังโปร่งใสไม่น่าจะได้:)
@hen
png ก็ได้เหมือนกันครับ
ขอบคุณมากครับเป็นประโยชน์มาก ๆ เลย