บทความวิกิฮาวนี้จะแนะนำวิธีการใช้ Adobe Dreamweaver เพื่อสร้างกล่องแบบเลื่อนลงสำหรับหน้าเว็บ กล่องดรอปดาวน์คือเมนูที่ "ดรอปดาวน์" เมื่อมีการคลิกรายการบนหน้าเว็บของคุณ ซึ่งจะแสดงตัวเลือกเพิ่มเติมในกระบวนการนี้
ขั้นตอน
ขั้นตอนที่ 1 เปิดโครงการ Dreamweaver
ดับเบิลคลิกไฟล์ของโปรเจ็กต์เพื่อดำเนินการ หากคุณต้องการสร้างโครงการ Dreamweaver ใหม่ คุณจะต้องเปิด Dreamweaver แทน คลิก ไฟล์, คลิก ใหม่ และปฏิบัติตามคำแนะนำบนหน้าจอ
ขั้นตอนที่ 2 สร้างรายการสั่งซื้อ
ในการสร้างเมนูแบบเลื่อนลง คุณต้องมีรายการสัญลักษณ์แสดงหัวข้อย่อยอย่างน้อยหนึ่งรายการ คุณสามารถสร้างสัญลักษณ์แสดงหัวข้อย่อยได้โดยปิด CSS (คลิกที่ ดู รายการเมนู เลือก การแสดงผลสไตล์ และคลิก รูปแบบการแสดงผล หากเลือกไว้) คลิกตำแหน่งที่คุณต้องการเพิ่มจุด คลิกไอคอนสัญลักษณ์แสดงหัวข้อย่อยที่ด้านล่างของหน้าต่าง แล้วพิมพ์ชื่อจุด จากนั้นคุณควรหันกลับมาใช้ CSS ก่อนดำเนินการต่อ
- ชื่อของจุดนี้จะทำหน้าที่เป็นตัวกระตุ้นเมนูแบบเลื่อนลงของคุณ (เช่น ปุ่มที่จะวางเมาส์เหนือหรือแตะเพื่อเปิดเมนูแบบเลื่อนลง)
- ข้ามขั้นตอนนี้หากคุณมีรายการที่ต้องการแปลงเป็นเมนูดรอปดาวน์อยู่แล้ว
ขั้นตอนที่ 3 กำหนดชื่อรายการของคุณ
คลิก รหัส แท็บและตรวจสอบให้แน่ใจว่าคุณอยู่บน รหัสแหล่งที่มา จากนั้นเลื่อนลงไปที่รหัสรายการสั่งซื้อของคุณ (จะอยู่ระหว่าง"
"แท็กและ"
"tag) และมองหาแท็ก " " ด้านบนสุด"
แท็ก คำในใบเสนอราคาเป็นชื่อรายการของคุณ
-
หากคุณไม่เห็นชื่อ ให้ใส่แท็ก (โดยที่ชื่อหมายถึงชื่อที่คุณต้องการในรายการ) เหนือ
แท็ก
ขั้นตอนที่ 4 ลบสัญลักษณ์แสดงหัวข้อย่อย
ตรวจสอบให้แน่ใจว่าคุณมาถูกที่แล้วโดยคลิกที่ปุ่ม ออกแบบ แท็บแล้วคลิก CSS Designer ที่มุมขวาบนของหน้าต่าง แล้วดำเนินการดังต่อไปนี้:
- คลิก + ทางขวาของหัวข้อ "ตัวเลือก"
- พิมพ์ #name ul โดยที่ "name" เป็นชื่อรายการของคุณ
- กด ↵ Enter สองครั้ง
- เลื่อนลงและคลิก รายการสไตล์ประเภท ในบานหน้าต่างที่ด้านล่างของ CSS Designer แท็บ
- คลิก ไม่มี ในเมนูป๊อปอัปที่เป็นผลลัพธ์
ขั้นตอนที่ 5. เปลี่ยนรายการสั่งซื้อของคุณเพื่อแสดงในแนวนอน
ในการทำเช่นนั้น:
- คลิก + ทางขวาของหัวข้อ "ตัวเลือก"
- พิมพ์ #name li โดยที่ "name" เป็นชื่อรายการของคุณ
- ค้นหาหัวข้อ "float" ในบานหน้าต่างที่ด้านล่างของ CSS Designer แท็บ
- คลิก ซ้าย ปุ่มทางด้านขวาของหัวข้อ "ลอย" ทันที
ขั้นตอนที่ 6 เพิ่มแท็กที่ใช้งานอยู่สำหรับรายการของคุณ
คลิก + ทางขวาของ "Selectors" แล้วพิมพ์ #name a (โดยที่ "name" เป็นชื่อรายชื่อของคุณ) แล้วกด ↵ Enter สองครั้ง
ขั้นตอนที่ 7 เพิ่มสีพื้นหลัง
เลือก #ชื่ออา รายการ หากจำเป็น จากนั้นคลิกแท็บ "สีพื้นหลัง" รูปกล่องที่ด้านบนของ CSS Designer บานหน้าต่าง เลือก สีพื้นหลัง และเลือกสีพื้นหลังที่จะใช้
นี่คือสีที่รายการในรายการดรอปดาวน์ของคุณจะใช้
ขั้นตอนที่ 8 ทำให้รายการของคุณใช้รูปแบบ "บล็อก"
รูปแบบนี้ช่วยให้แน่ใจว่าเมื่อมีคนคลิกหรือแตะที่รายการในรายการ พวกเขาสามารถเปิดได้โดยการเลือกด้านบนหรือด้านล่างเล็กน้อย แทนที่จะต้องเลือกข้อความให้แม่นยำ:
- ตรวจสอบให้แน่ใจว่า.ของคุณ #ชื่ออา รายการถูกเลือกใน CSS Designer แท็บ
- เลื่อนลงไปที่หัวข้อ "display" ในบานหน้าต่าง
- คลิกด้านขวาสุดของหัวข้อ "display" แล้วคลิก บล็อก ในเมนูผลลัพธ์
ขั้นตอนที่ 9 เพิ่มช่องว่างภายในหากจำเป็น
หากคุณสังเกตเห็นว่ารายการของคุณติดกัน คุณสามารถวางช่องว่างระหว่างรายการได้โดยทำดังนี้:
- ตรวจสอบให้แน่ใจว่า.ของคุณ #ชื่ออา รายการถูกเลือกใน CSS Designer แท็บ
- เลื่อนลงไปที่หัวข้อ "padding" ในบานหน้าต่าง
- เปลี่ยนช่องข้อความ "px" ด้านบนและด้านล่างให้อ่านอย่างน้อย 5
- เปลี่ยนช่องข้อความ "px" ด้านซ้ายและขวาให้อ่านอย่างน้อย 10
ขั้นตอนที่ 10. สร้างสีโฮเวอร์
นี่คือสีที่จะปรากฏขึ้นเมื่อคุณวางเคอร์เซอร์เมาส์ไว้เหนือรายการในเมนูแบบเลื่อนลง:
- คลิก + ทางขวาของหัวข้อ "ตัวเลือก"
- พิมพ์ #nave a:hover (โดยที่ "name" คือชื่อรายชื่อของคุณ) แล้วกด ↵ Enter สองครั้ง
- คลิกแท็บ "สีพื้นหลัง"
- เลือก สีพื้นหลัง แล้วเลือกสีที่อ่อนกว่าที่คุณใช้สำหรับสีพื้นหลัง
ขั้นตอนที่ 11 ปิด CSS
คลิก ดู รายการเมนู เลือก การแสดงผลสไตล์ และคลิก รูปแบบการแสดงผล ตัวเลือกในหน้าต่างแบบผุดขึ้น
ถ้า รูปแบบการแสดงผล ตัวเลือกเป็นสีเทา คลิกที่ใดก็ได้ในเอกสาร Dreamweaver ของคุณแล้วลองอีกครั้ง
ขั้นตอนที่ 12. สร้างเนื้อหาเมนูแบบเลื่อนลง
คุณสามารถทำได้โดยเพิ่มจุดย่อยใต้หัวข้อย่อยที่คุณต้องการใช้เป็นปุ่มของเมนูดรอปดาวน์:
- คลิก ทางขวาของรายการที่คุณต้องการเปลี่ยนเป็นเมนูแบบเลื่อนลง จากนั้นกด ↵ Enter
- กด Tab ↹
- พิมพ์ชื่อเมนูที่ขยายลงมารายการแรก แล้วกด ↵ Enter
- พิมพ์ชื่อเมนูที่ขยายลงมาถัดไป จากนั้นกด ↵ Enter แล้วทำซ้ำตามต้องการ
ขั้นตอนที่ 13 ผูกเนื้อหาเมนูแบบเลื่อนลงกับรายการหัวข้อย่อย
ในการทำเช่นนั้น:
- คลิก + ข้าง "ตัวเลือก" แล้วพิมพ์ #name ul ul แล้วกด ↵ Enter สองครั้ง
- เลื่อนลงและคลิก แสดง จากนั้นคลิก ไม่มี ในเมนูป๊อปอัป
- ค้นหาและคลิก ตำแหน่ง จากนั้นคลิก แน่นอน ในเมนูป๊อปอัป
ขั้นตอนที่ 14. สร้างเมนูแบบเลื่อนลงเอง
คุณจะต้องเพิ่มตัวเลือกอื่นเพื่อทำสิ่งนี้:
- คลิก + ข้าง "ตัวเลือก" จากนั้นพิมพ์ #name ul li:hover > ul แล้วกด ↵ Enter สองครั้ง
- ค้นหาและคลิก แสดง จากนั้นคลิก บล็อก ในเมนูป๊อปอัปที่ได้รับ
ขั้นตอนที่ 15. ทำให้เนื้อหาของเมนูแบบเลื่อนลงแสดงในแนวตั้ง
ตามค่าเริ่มต้น เนื้อหาในเมนูแบบเลื่อนลงจะแสดงในแถบแนวนอน แต่คุณสามารถบังคับเนื้อหาให้เป็นคอลัมน์แนวตั้งได้โดยทำดังนี้
- คลิก + ข้าง "ตัวเลือก" แล้วพิมพ์ #name ul ul li แล้วกด ↵ Enter สองครั้ง
- ค้นหาหัวข้อ "ลอย"
- คลิก "ไม่มี" () ทางขวาของหัวข้อ "float"
ขั้นตอนที่ 16 บันทึกโครงการของคุณ
กด Ctrl+S (Windows) หรือ ⌘ Command+S (Mac)
