Home > CSS techniques > ทำปุ่มเมนู CSS ขอบมนโดยใช้รูปเดียว

ทำปุ่มเมนู CSS ขอบมนโดยใช้รูปเดียว

menu ก่อนที่ผมจะรู้จัก CSS นั้น การทำปุ่มเมนูในรูปแบบนี้ นั้นต้องใช้ รูป ถึง 3 รูปเลยทีเดียว คือ รูปขอบด้านซ้าย รูปพื้นที่ตรงกลาง และรูปขอบมนด้านขวา แต่ตอนนี้เราสามารถใช้ CSS ช่วยโดยใช้รูปเพียงรูปเดียว ประหยัดเวลา ประหยัดแบนวิธ ใช้ง่าย ในทุกที่ ยืดได้ แม้ ประโยคจะยาว ลองมาดูวิธีกันครับ

Image

bg
ด้านบนนี้คือตัวอย่างรูป ที่เราจะใช้กัน แต่ผมจะไม่บอกวิธีการทำรูปนะครับ ดาวน์โหลด .psd ไปศึกษาหรือปรับเปลี่ยนกันดูเองนะครับ menubutton.psd

Concept

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/

Related Articles


Share
Categories: CSS techniques
Tags:

About the author

Webmaster ของเว็บนี้และ www.toysmile.com กับ www.wondercutie.com ความสามารถ : web design, graphic design, CSS, PHP programming, wordpress, magento ตอนนี้กำลังสนใจ : การออกแบบ ตัวการ์ตูน คาแรคเตอร์ ^^

Website : http://www.divland.com

Facebook : http://www.facebook.com/divland

Twiter : http://twitter.com/divland


  1. krkaew
    July 6th, 2008 at 16:45 | #1

    :)>-
    ขอบคุณมากๆค่ะ ได้ความรู้ดี

  2. krkaew
    July 6th, 2008 at 17:11 | #2

    ขอถามเพิ่มค่ะ
    แล้วมันจะ “ประหยัดแบนวิธ” ไงอ๊ะค่ะ
    เพราะเท่ากับ client load background ชิ้นใหญ่ทีเดียวเลย (ตามตัวอย่าง 493*24 )
    อันนี้ไม่พูดถึงทำรูปให้มีขนาดเล็กนะค่ะ (ตามตัวอย่าง 394 bytes)

    แต่ที่ว่าประหยัดเวลานี่เห็นด้วยอย่างยิ่งค่ะ

  3. utt
    July 6th, 2008 at 22:12 | #3

    เขียนโค้ดสั้นลงน่ะครับ แล้วใช้ซ้ำได้หลายๆที่ครับ

  4. purie
    July 9th, 2008 at 20:52 | #4

    ใส่ มันทำให้มี warning นี่คะ element เปล่า มีวิธีอื่นไหมคะ

  5. purie
    July 9th, 2008 at 20:53 | #5

    มันไม่ขึ้น เอาใหม่ ใส่ span เปล่าๆ ไม่มีอาไรข้างใน มันมี warning นี่คะ มีวิธีการอื่นไหมคะ

  6. utt
    July 9th, 2008 at 21:16 | #6

    warning อะไรหรอครับ

  7. purie
    July 10th, 2008 at 10:27 | #7

    คือ ตามหลักเว็บ standard เค้าห้ามมี element เปล่าอ่ะค่ะ ถ้าใช้ firefox เช็คดู จะเห็นว่า มี warning เตือนด้านล่างขวา ตรง status บาร์อ่ะค่ะ

  8. DEOW
    July 11th, 2008 at 10:44 | #8

    เป็นเทคนิคที่ดีมากครับ สามารถปรับใช้ได้ในหลายรูปแบบ และแก้ไขง่ายด้วยขอบคุณมากครับ

    ตอบคำถามคุณ purie
    เว็บ standard ใช้ element ได้นะครับส่วน warning น่าจะมาจากสาเหตุอื่นครับ เช่นคุณอาจใส่ javascript เอาไว้แนะนำให้ดูส่วนอื่นก่อนครับ เพราะผมดู code แล้วไม่มีปัญหาหรือ bug ครับสามารถใช้ได้ทั้ง firefox และ IE ครับ คิดว่า Browser อื่นก็ไม่น่าจะมีปัญหาด้วยนะครับ :)

  9. partyman
    July 13th, 2008 at 12:20 | #9

    คิดไม่ถึงจิงๆๆ …

    อิอิ … เก่งๆๆๆ

  10. July 26th, 2008 at 16:43 | #10

    เอาไปใช้ยังไงอะครับ มือใหม่บอกด้วยนะครับ

  11. February 11th, 2009 at 23:49 | #11

    ชอบครับได้ความรู้….แล้วจะเข้ามาเก็บเกี่ยวบ่อยๆครับ
    ขอบคุณครับ

  12. March 24th, 2009 at 15:49 | #12

    ขอบคุณมากครับ ผมหาวิธีอยู่ตั้งนาน สุดยอดเลยย :x

  13. May 29th, 2009 at 20:15 | #13

    แบบนี้ จะใช้ภาพนามสกุลอะไรได้บ้าง

    หรือว่าเป็น Gif อย่างเีดียว

  14. numpu
    July 15th, 2009 at 17:13 | #14

    ถ้ามีเทมเพลสแล้วแต่ต้องการเปลี่ยนสี ตรงส่วน colum ทั้งซ้ายและ ขวาละคะ สามารถทำได้ไหมค่ะ

  15. July 28th, 2009 at 14:16 | #15

    เดี๋ยวจะไปทำปุ่มสวย ๆมั่ง

  16. December 6th, 2009 at 13:33 | #16

    ความรู้แบบนี้ชอบจริงๆ

  17. December 6th, 2009 at 13:33 | #17

    ข้อมูลดีๆแบบนี้หามาบอกกันเรื่อยๆนะครับ

  18. น้ำพิ้งค์
    January 5th, 2010 at 21:50 | #18

    แล้วถ้าจะทำเหมือนเมนูด้านขวามือ ที่เป็นสีฟ้า ทำยังไงค่ะ รบกวนบอกหน่อย

  19. April 22nd, 2010 at 03:52 | #19

    เคยได้ยินวิธีการนี้มาบ้าง แต่พอมาดู code แล้วค่อนข้างยาวครับ เกิดอาการขี้เกียจกลับไปแก้ของเก่า ถ้าจะแก้คงนานพอดูเลย เอาไว้ว่างๆ ทำใจได้ก่อนจะเริ่มแก้ครับ

    วิท (http://www.tutorpoint.net)

  20. hen
    July 30th, 2010 at 16:24 | #20

    ใช้ง่ายมากเลยค่ะ ภาพเดียวอยู่
    แต่น่าจะใช้ได้เฉพาะ .jpg หรือเปล่าคะ
    ถ้าเป็น .png พื้นหลังโปร่งใสไม่น่าจะได้:)

  21. July 31st, 2010 at 09:50 | #21

    @hen
    png ก็ได้เหมือนกันครับ :)

  22. July 31st, 2010 at 18:26 | #22

    ขอบคุณมากครับเป็นประโยชน์มาก ๆ เลย

  23. ttt
    October 15th, 2010 at 16:08 | #23

    png ได้ครับ แต่ตอนเซฟ อย่าเซฟเป็น transparency นะ ลองแล้วไม่ได้ ต้องเป็น Background ขาว นะครับ

  24. November 23rd, 2010 at 17:43 | #24

    ขอบคุณมากๆ คะ นำไปใช้แล้ว แต่ติดปัญหานิดหน่อยคะ คือ ถ้าเอาไปใส่พัฒนาต่อโดย asp.net อะคะ แล้วทำเป้น master ปุ่มจะไม่เลื่อนไปตามเมนูนั้นๆ หรือว่าเรามะเข้าใจเองก็มะรุ้นะคะ เพราะว่า ถ้า class=”current” อยุ่ที่ index รูปก็จะขึ้นที่ index ถูกมั้ยคะ แต่ถ้าเราเลือกที่เมนูอื่น class=”current” เราก็ต้องตามไปเมนูอื่นด้วย แต่เราไม่รู้ว่าจะต้องใส่ยังไง เพราะว่ามันเป็น master ไม่รู้ว่าเราอธิบายงงหรือเปล่า ต้องขออภัยด้วยนะคะ

  25. November 30th, 2010 at 19:20 | #25

    ต้องทำ current เป็นตัวแปรครับ แล้วพอคลิกหน้าไหน ก็ให้ current เฉพาะเมนูนั้น ของผมเขียน php จะใช้วิธีเช็กจาก url

  26. May 6th, 2011 at 10:01 | #26

    ขอนับถือเลยคับผม เยี่ยมมากสำหรับเว็บนี้
    มีการนำเสนอที่เข้าใจได้ทันที
    ขอบคุณมากคับผมที่สร้างสรรค์ผลงานดีๆ เช่นนี้แก่พวกเราและสังคม
    พวกเราจะเป็นกำลังใจให้นะคับผม

  1. No trackbacks yet.