ทำปุ่มเมนู 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>- ตอนที่เอาเมาส์โอเวอร์
ลองใช้โค้ดทั้งหมดรวมกันดูครับ ถ้ายังไม่เห็นภาพ ลองดูตัวอย่างที่นี่ menu.html สำหรับรูป ใส่ไว้ใน โฟลเดอร์ images ด้วยนะครับ ถ้าใช้ css ตามด้านบนนี้ ดาวน์โหลดไฟล์ตัวอย่างทั้งหมดได้ที่นี่ครับ cssmenu1image.rar
ข้อมูลจาก http://kailoon.com/css-sliding-door-using-only-1-image/
krkaew said,
July 6, 2008 @ 4:45 pm
ขอบคุณมากๆค่ะ ได้ความรู้ดี
krkaew said,
July 6, 2008 @ 5:11 pm
ขอถามเพิ่มค่ะ
แล้วมันจะ “ประหยัดแบนวิธ” ไงอ๊ะค่ะ
เพราะเท่ากับ client load background ชิ้นใหญ่ทีเดียวเลย (ตามตัวอย่าง 493*24 )
อันนี้ไม่พูดถึงทำรูปให้มีขนาดเล็กนะค่ะ (ตามตัวอย่าง 394 bytes)
แต่ที่ว่าประหยัดเวลานี่เห็นด้วยอย่างยิ่งค่ะ
utt said,
July 6, 2008 @ 10:12 pm
เขียนโค้ดสั้นลงน่ะครับ แล้วใช้ซ้ำได้หลายๆที่ครับ
purie said,
July 9, 2008 @ 8:52 pm
ใส่ มันทำให้มี warning นี่คะ element เปล่า มีวิธีอื่นไหมคะ
purie said,
July 9, 2008 @ 8:53 pm
มันไม่ขึ้น เอาใหม่ ใส่ span เปล่าๆ ไม่มีอาไรข้างใน มันมี warning นี่คะ มีวิธีการอื่นไหมคะ
utt said,
July 9, 2008 @ 9:16 pm
warning อะไรหรอครับ
purie said,
July 10, 2008 @ 10:27 am
คือ ตามหลักเว็บ standard เค้าห้ามมี element เปล่าอ่ะค่ะ ถ้าใช้ firefox เช็คดู จะเห็นว่า มี warning เตือนด้านล่างขวา ตรง status บาร์อ่ะค่ะ
DEOW said,
July 11, 2008 @ 10:44 am
เป็นเทคนิคที่ดีมากครับ สามารถปรับใช้ได้ในหลายรูปแบบ และแก้ไขง่ายด้วยขอบคุณมากครับ
ตอบคำถามคุณ purie
เว็บ standard ใช้ element ได้นะครับส่วน warning น่าจะมาจากสาเหตุอื่นครับ เช่นคุณอาจใส่ javascript เอาไว้แนะนำให้ดูส่วนอื่นก่อนครับ เพราะผมดู code แล้วไม่มีปัญหาหรือ bug ครับสามารถใช้ได้ทั้ง firefox และ IE ครับ คิดว่า Browser อื่นก็ไม่น่าจะมีปัญหาด้วยนะครับ
partyman said,
July 13, 2008 @ 12:20 pm
คิดไม่ถึงจิงๆๆ …
อิอิ … เก่งๆๆๆ
optic said,
July 26, 2008 @ 4:43 pm
เอาไปใช้ยังไงอะครับ มือใหม่บอกด้วยนะครับ