ทำปุ่มเมนู CSS ขอบมนโดยใช้รูปเดียว
ก่อนที่ผมจะรู้จัก 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/
>-
(
krkaew said,
กรกฎาคม 6, 2008 @ 4:45 pm
ขอบคุณมากๆค่ะ ได้ความรู้ดี
krkaew said,
กรกฎาคม 6, 2008 @ 5:11 pm
ขอถามเพิ่มค่ะ
แล้วมันจะ “ประหยัดแบนวิธ” ไงอ๊ะค่ะ
เพราะเท่ากับ client load background ชิ้นใหญ่ทีเดียวเลย (ตามตัวอย่าง 493*24 )
อันนี้ไม่พูดถึงทำรูปให้มีขนาดเล็กนะค่ะ (ตามตัวอย่าง 394 bytes)
แต่ที่ว่าประหยัดเวลานี่เห็นด้วยอย่างยิ่งค่ะ
utt said,
กรกฎาคม 6, 2008 @ 10:12 pm
เขียนโค้ดสั้นลงน่ะครับ แล้วใช้ซ้ำได้หลายๆที่ครับ
purie said,
กรกฎาคม 9, 2008 @ 8:52 pm
ใส่ มันทำให้มี warning นี่คะ element เปล่า มีวิธีอื่นไหมคะ
purie said,
กรกฎาคม 9, 2008 @ 8:53 pm
มันไม่ขึ้น เอาใหม่ ใส่ span เปล่าๆ ไม่มีอาไรข้างใน มันมี warning นี่คะ มีวิธีการอื่นไหมคะ
utt said,
กรกฎาคม 9, 2008 @ 9:16 pm
warning อะไรหรอครับ
purie said,
กรกฎาคม 10, 2008 @ 10:27 am
คือ ตามหลักเว็บ standard เค้าห้ามมี element เปล่าอ่ะค่ะ ถ้าใช้ firefox เช็คดู จะเห็นว่า มี warning เตือนด้านล่างขวา ตรง status บาร์อ่ะค่ะ
DEOW said,
กรกฎาคม 11, 2008 @ 10:44 am
เป็นเทคนิคที่ดีมากครับ สามารถปรับใช้ได้ในหลายรูปแบบ และแก้ไขง่ายด้วยขอบคุณมากครับ
ตอบคำถามคุณ purie
เว็บ standard ใช้ element ได้นะครับส่วน warning น่าจะมาจากสาเหตุอื่นครับ เช่นคุณอาจใส่ javascript เอาไว้แนะนำให้ดูส่วนอื่นก่อนครับ เพราะผมดู code แล้วไม่มีปัญหาหรือ bug ครับสามารถใช้ได้ทั้ง firefox และ IE ครับ คิดว่า Browser อื่นก็ไม่น่าจะมีปัญหาด้วยนะครับ
partyman said,
กรกฎาคม 13, 2008 @ 12:20 pm
คิดไม่ถึงจิงๆๆ …
อิอิ … เก่งๆๆๆ
optic said,
กรกฎาคม 26, 2008 @ 4:43 pm
เอาไปใช้ยังไงอะครับ มือใหม่บอกด้วยนะครับ
akeblog said,
กุมภาพันธ์ 11, 2009 @ 11:49 pm
ชอบครับได้ความรู้….แล้วจะเข้ามาเก็บเกี่ยวบ่อยๆครับ
ขอบคุณครับ
โคตรฮิต said,
มีนาคม 24, 2009 @ 3:49 pm
ขอบคุณมากครับ ผมหาวิธีอยู่ตั้งนาน สุดยอดเลยย
likepost said,
พฤษภาคม 29, 2009 @ 8:15 pm
แบบนี้ จะใช้ภาพนามสกุลอะไรได้บ้าง
หรือว่าเป็น Gif อย่างเีดียว
numpu said,
กรกฎาคม 15, 2009 @ 5:13 pm
ถ้ามีเทมเพลสแล้วแต่ต้องการเปลี่ยนสี ตรงส่วน colum ทั้งซ้ายและ ขวาละคะ สามารถทำได้ไหมค่ะ
seo said,
กรกฎาคม 28, 2009 @ 2:16 pm
เดี๋ยวจะไปทำปุ่มสวย ๆมั่ง
โหลดเพลง mp3 said,
ธันวาคม 6, 2009 @ 1:33 pm
ความรู้แบบนี้ชอบจริงๆ
ดาวน์โหลดเพลงใหม่ฟรี said,
ธันวาคม 6, 2009 @ 1:33 pm
ข้อมูลดีๆแบบนี้หามาบอกกันเรื่อยๆนะครับ
น้ำพิ้งค์ said,
มกราคม 5, 2010 @ 9:50 pm
แล้วถ้าจะทำเหมือนเมนูด้านขวามือ ที่เป็นสีฟ้า ทำยังไงค่ะ รบกวนบอกหน่อย