ดาวน์โหลดบทความ
ดาวน์โหลดบทความ
บทความวิกิฮาวนี้จะแนะนำวิธีการสร้างเมนูที่ขยายลงมาได้ (drop-down menu) สำหรับใช้ในเว็บไซต์ ทำได้โดยใช้โค้ด HTML และ CSS นั่นเอง ปกติเมนู drop-down จะโผล่มาตอนเอาเคอร์เซอร์ไปจ่อที่ปุ่ม พอเมนูขยายลงมาแล้ว ผู้ใช้ก็คลิกเลือกหนึ่งในตัวอย่าง เพื่อไปยังหน้าของตัวเลือกนั้นได้เลย
ขั้นตอน
-
เปิด HTML text editor. จะใช้ text editor ทั่วไป อย่าง Notepad หรือ TextEdit หรือจะใช้ text editor ขั้นสูงกว่าอย่าง Notepad++ ก็ได้เหมือนกัน
- ถ้าจะใช้ Notepad++ ต้องเลือก HTML ในหัวข้อ "H" ของเมนู Language ทางด้านบนของหน้าต่างซะก่อน
-
ใส่ header ของเอกสาร. ส่วนนี้คือโค้ดที่ใช้กำหนดว่าจะเขียนโค้ดอะไรตลอดทั้งเอกสารนี้
<!DOCTYPE html> < html > < head > < style >
-
สร้างเมนู drop-down. พิมพ์โค้ดต่อไปนี้ เพื่อกำหนดขนาดและสีของเมนู drop-down ย้ำว่าต้องใส่ "#" พร้อมหมายเลขที่จะใช้ (ยิ่งเลขมาก เมนู drop-down ที่ได้ก็ยิ่งใหญ่) หรือปรับค่า "background-color" กับ "color" ให้ได้สี (หรือโค้ดสี HTML) ที่ต้องการก็ได้ [1] X แหล่งข้อมูลอ้างอิง
. dropbtn { background-color : black ; color : white ; padding : #px ; font-size : #px ; border : none ; }
-
กำหนดว่าจะใส่ลิงค์ในเมนู drop-down. เดี๋ยวเราจะใส่ลิงค์ในเมนู drop-down ทีหลัง คุณใส่ลิงค์ในเมนู drop-down ได้โดยใช้โค้ดต่อไปนี้
. dropdown { position : relative ; display : inline-block ; }
-
ออกแบบหน้าตาของเมนู drop-down. โค้ดต่อไปนี้ใช้กำหนดสีและขนาดของเมนู drop-down รวมถึงตำแหน่งเมื่ออยู่รวมกับส่วนประกอบอื่นๆ ในหน้าเว็บ อย่าลืมใส่เลขที่ต้องการ (เช่น 250) ใน "#" ของหัวข้อ "min-width" แล้วเปลี่ยนหัวข้อ "background-color" เป็นสีหรือโค้ด HTML ที่ต้องการ
. dropdown-content { display : none ; position : absolute ; background-color : lightgrey ; min-width : #px ; z-index : 1 ; }
-
ใส่รายละเอียดในเนื้อหาของเมนู drop-down. โค้ดต่อไปนี้จะกำหนดสีข้อความและขนาดของปุ่ม drop-down อย่าลืมเปลี่ยน "#" เป็นจำนวนพิกเซลที่ต้องการ ของขนาดปุ่ม
. dropdown-content a { color : black ; padding : #px #px ; text-decoration : none ; display : block ; }
-
กำหนดว่าเมนู drop-down จะเปลี่ยนไปยังไงเมื่อจ่อเคอร์เซอร์. เวลาขยับเมาส์จ่อเคอร์เซอร์ที่ปุ่มของเมนู drop-down สีควรจะเปลี่ยนไป "background-color" ในบรรทัดแรก คือสีที่จะเปลี่ยนเมื่อคุณเลือกไอเท็มนั้นในเมนู drop-down ส่วน "background-color" ในบรรทัดที่ 2 คือสีปุ่มเมนู drop-down ที่เปลี่ยนไป แนะนำว่าตอนยังไม่ได้เลือก ควรเป็นสีอ่อนกว่าตอนที่เลือกแล้ว
. dropdown-content a : hover { background-color : white ;} . dropdown : hover . dropdown-content { display : block ;} . dropdown : hover . dropbtn { background-color : grey ;}
-
ปิดส่วนของ CSS. ให้พิมพ์โค้ดต่อไปนี้ เพื่อให้รู้ว่าจบส่วนของโค้ด CSS ในเอกสารนี้แล้ว
</ style > </ head >
-
ตั้งชื่อปุ่ม drop-down. พิมพ์โค้ดต่อไปนี้ อย่าลืมเปลี่ยน "Name" เป็นชื่อปุ่ม drop-down ที่ต้องการ (เช่น Menu )
< div class = "dropdown" > < button class = "dropbtn" > Name </ button > < div class = "dropdown-content" >
-
ใส่ลิงค์ในเมนู drop-down. แต่ละไอเท็มหรือตัวเลือกในเมนู drop-down ต้องเชื่อมต่อไปที่อื่น เช่น หน้าอื่นของเว็บ หรือเว็บอื่น คุณใส่ไอเท็มในเมนู drop-down ได้โดยใช้โค้ดข้างล่าง อย่าลืมเปลี่ยน https://www.website.com เป็น address ของลิงค์ (พร้อมเครื่องหมายคำพูด) และเปลี่ยน "Name" เป็นชื่อของลิงค์นั้น
< a href = "https://www.website.com" > Name </ a > < a href = "https://www.website.com" > Name </ a > < a href = "https://www.website.com" > Name </ a >
-
จบโค้ดในเอกสารนั้น. ให้พิมพ์แท็กต่อไปนี้ เพื่อปิดเอกสาร แปลว่าเขียนโค้ดสร้างเมนู drop-down เสร็จแล้ว
</ div > </ div > </ body > </ html >
-
ตรวจทานโค้ดของช่อง drop-down. โค้ดที่ได้ จะออกมาหน้าตาประมาณนี้ [2] X แหล่งข้อมูลอ้างอิง
<!DOCTYPE html> < html > < head > < style > . dropbtn { background-color : black ; color : white ; padding : 16 px ; font-size : 16 px ; border : none ; } . dropdown { position : relative ; display : inline-block ; } . dropdown-content { display : none ; position : absolute ; background-color : lightgrey ; min-width : 200 px ; z-index : 1 ; } . dropdown-content a { color : black ; padding : 12 px 16 px ; text-decoration : none ; display : block ; } . dropdown-content a : hover { background-color : white ;} . dropdown : hover . dropdown-content { display : block ;} . dropdown : hover . dropbtn { background-color : grey ;} </ style > </ head > < div class = "dropdown" > < button class = "dropbtn" > Social Media </ button > < div class = "dropdown-content" > < a href = "https://www.google.com" > Google </ a > < a href = "https://www.facebook.com" > Facebook </ a > < a href = "https://www.youtube.com" > YouTube </ a > </ div > </ div > </ body > </ html >
โฆษณา
เคล็ดลับ
- ต้องทดสอบโค้ดเสมอ ก่อนโพสต์ลงเว็บไซต์
- ขั้นตอนด้านบนเป็นวิธีเขียนโค้ดสร้างเมนู drop-down ที่จะขยายลงมาเมื่อเลื่อนเคอร์เซอร์ไปจ่อที่ปุ่ม ถ้าจะสร้างเมนู drop-down ที่ขยายลงมาเมื่อคลิก ต้องใช้ JavaScript แทน [3] X แหล่งข้อมูลอ้างอิง
โฆษณา
คำเตือน
- สี HTML นั้นค่อนข้างมีจำกัด เช่น ใช้แท็กประมาณว่า "black" หรือ "green" อาจจะใช้ HTML color code generator แทน เพื่อสร้างและใช้สีที่ปรับแต่งเองแบบ custom เข้าไปที่ เว็บนี้ ได้เลย
โฆษณา
ข้อมูลอ้างอิง
โฆษณา