วิธีการ สร้างเมนูที่ขยายลงมาได้ (Dropdown Menu) ด้วยโค้ด HTML และ CSS

บทความวิกิฮาวนี้จะแนะนำวิธีการสร้างเมนูที่ขยายลงมาได้ (drop-down menu) สำหรับใช้ในเว็บไซต์ ทำได้โดยใช้โค้ด HTML และ CSS นั่นเอง ปกติเมนู drop-down จะโผล่มาตอนเอาเคอร์เซอร์ไปจ่อที่ปุ่ม พอเมนูขยายลงมาแล้ว ผู้ใช้ก็คลิกเลือกหนึ่งในตัวอย่าง เพื่อไปยังหน้าของตัวเลือกนั้นได้เลย

ขั้นตอน

ดาวน์โหลดบทความ

{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/e\/e8\/3234689-1.jpg\/v4-460px-3234689-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/e\/e8\/3234689-1.jpg\/v4-728px-3234689-1.jpg","smallWidth":460,"smallHeight":346,"bigWidth":728,"bigHeight":547,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

1
เปิด HTML text editor. จะใช้ text editor ทั่วไป อย่าง Notepad หรือ TextEdit หรือจะใช้ text editor ขั้นสูงกว่าอย่าง Notepad++ ก็ได้เหมือนกัน
- ถ้าจะใช้ Notepad++ ต้องเลือก HTML ในหัวข้อ "H" ของเมนู Language ทางด้านบนของหน้าต่างซะก่อน
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/9\/95\/3234689-2.jpg\/v4-460px-3234689-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/9\/95\/3234689-2.jpg\/v4-728px-3234689-2.jpg","smallWidth":460,"smallHeight":343,"bigWidth":728,"bigHeight":543,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

2
ใส่ header ของเอกสาร. ส่วนนี้คือโค้ดที่ใช้กำหนดว่าจะเขียนโค้ดอะไรตลอดทั้งเอกสารนี้
```
 <!DOCTYPE html> 
 < 
 html 
 > 
 < 
 head 
 > 
 < 
 style 
 > 
```
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/c\/c6\/3234689-3.jpg\/v4-460px-3234689-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/c\/c6\/3234689-3.jpg\/v4-728px-3234689-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

3
สร้างเมนู 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 
 ; 
 } 
```
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/7\/78\/3234689-4.jpg\/v4-460px-3234689-4.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/7\/78\/3234689-4.jpg\/v4-728px-3234689-4.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

4
กำหนดว่าจะใส่ลิงค์ในเมนู drop-down. เดี๋ยวเราจะใส่ลิงค์ในเมนู drop-down ทีหลัง คุณใส่ลิงค์ในเมนู drop-down ได้โดยใช้โค้ดต่อไปนี้
```
 . 
 dropdown 
 { 
 position 
 : 
 relative 
 ; 
 display 
 : 
 inline-block 
 ; 
 } 
```
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/c\/c2\/3234689-5.jpg\/v4-460px-3234689-5.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/c\/c2\/3234689-5.jpg\/v4-728px-3234689-5.jpg","smallWidth":460,"smallHeight":344,"bigWidth":728,"bigHeight":545,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

5
ออกแบบหน้าตาของเมนู 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 
 ; 
 } 
```
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/d\/db\/3234689-6.jpg\/v4-460px-3234689-6.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/d\/db\/3234689-6.jpg\/v4-728px-3234689-6.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

6
ใส่รายละเอียดในเนื้อหาของเมนู drop-down. โค้ดต่อไปนี้จะกำหนดสีข้อความและขนาดของปุ่ม drop-down อย่าลืมเปลี่ยน "#" เป็นจำนวนพิกเซลที่ต้องการ ของขนาดปุ่ม
```
 . 
 dropdown-content 
 a 
 { 
 color 
 : 
 black 
 ; 
 padding 
 : 
 #px 
 #px 
 ; 
 text-decoration 
 : 
 none 
 ; 
 display 
 : 
 block 
 ; 
 } 
```
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/2\/23\/3234689-7.jpg\/v4-460px-3234689-7.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/2\/23\/3234689-7.jpg\/v4-728px-3234689-7.jpg","smallWidth":460,"smallHeight":343,"bigWidth":728,"bigHeight":543,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

7
กำหนดว่าเมนู 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 
 ;} 
```
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/1\/15\/3234689-8.jpg\/v4-460px-3234689-8.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/1\/15\/3234689-8.jpg\/v4-728px-3234689-8.jpg","smallWidth":460,"smallHeight":342,"bigWidth":728,"bigHeight":542,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

8
ปิดส่วนของ CSS. ให้พิมพ์โค้ดต่อไปนี้ เพื่อให้รู้ว่าจบส่วนของโค้ด CSS ในเอกสารนี้แล้ว
```
 </ 
 style 
 > 
 </ 
 head 
 > 
```
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/8\/87\/3234689-9.jpg\/v4-460px-3234689-9.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/8\/87\/3234689-9.jpg\/v4-728px-3234689-9.jpg","smallWidth":460,"smallHeight":348,"bigWidth":728,"bigHeight":550,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

9
ตั้งชื่อปุ่ม drop-down. พิมพ์โค้ดต่อไปนี้ อย่าลืมเปลี่ยน "Name" เป็นชื่อปุ่ม drop-down ที่ต้องการ (เช่น Menu )
```
 < 
 div 
 class 
 = 
 "dropdown" 
 > 
 < 
 button 
 class 
 = 
 "dropbtn" 
 > 
Name </ 
 button 
 > 
 < 
 div 
 class 
 = 
 "dropdown-content" 
 > 
```
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/8\/8f\/3234689-10.jpg\/v4-460px-3234689-10.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/8\/8f\/3234689-10.jpg\/v4-728px-3234689-10.jpg","smallWidth":460,"smallHeight":342,"bigWidth":728,"bigHeight":541,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

10
ใส่ลิงค์ในเมนู 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 
 > 
```
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/0\/06\/3234689-11.jpg\/v4-460px-3234689-11.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/0\/06\/3234689-11.jpg\/v4-728px-3234689-11.jpg","smallWidth":460,"smallHeight":347,"bigWidth":728,"bigHeight":549,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

11
จบโค้ดในเอกสารนั้น. ให้พิมพ์แท็กต่อไปนี้ เพื่อปิดเอกสาร แปลว่าเขียนโค้ดสร้างเมนู drop-down เสร็จแล้ว
```
 </ 
 div 
 > 
 </ 
 div 
 > 
 </ 
 body 
 > 
 </ 
 html 
 > 
```

{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/a\/a4\/3234689-12.jpg\/v4-460px-3234689-12.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/a\/a4\/3234689-12.jpg\/v4-728px-3234689-12.jpg","smallWidth":460,"smallHeight":344,"bigWidth":728,"bigHeight":544,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

โค้ดที่ได้ จะออกมาหน้าตาประมาณนี้ ^{[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 เข้าไปที่ เว็บนี้ ได้เลย

โฆษณา

[1]

[2]

[3]

เข้าสู่ระบบ

วิธีการ สร้างเมนูที่ขยายลงมาได้ (Dropdown Menu) ด้วยโค้ด HTML และ CSS

ขั้นตอน

เคล็ดลับ

คำเตือน

บทความวิกิฮาวอื่น ๆ ที่่เกี่ยวข้อง

ข้อมูลอ้างอิง

เกี่ยวกับวิกิฮาวนี้

บทความนี้เป็นประโยชน์กับคุณไหม

บทความที่เกี่ยวข้อง

ติดตามเรา

แบ่งปัน

Explore Categories