รูปแบบเมนูดรอปดาวน์และป๊อปโอเวอร์

ส่วนติดต่อการเขียนโปรแกรมป๊อปโอเวอร์ของ HTML (Chrome 114 ขึ้นไป และรองรับอย่างกว้างขวาง) มีพฤติกรรมการแสดงและซ่อนแบบประกาศ โดยใช้แอตทริบิวต์ popover กับเป้าหมาย และใช้ popovertarget กับปุ่มเรียกใช้ ไม่ต้องใช้ JavaScript สำหรับการเปิดและปิดพื้นฐาน รวมถึงการปิดเมื่อคลิกภายนอกและการจัดการปุ่ม Escape

เลือกองค์ประกอบป๊อปโอเวอร์เป้าหมายด้วย [popover] หรือ :popover-open องค์ประกอบเสมือน ::backdrop พร้อมใช้งานสำหรับทำให้พื้นหลังมืดลง ป๊อปโอเวอร์จะแสดงในชั้นบนสุดเช่นเดียวกับกล่องโต้ตอบ จึงไม่เกิดปัญหาการซ้อนของ z-index

การจัดตำแหน่งแบบยึดโยงของ CSS จะจัดตำแหน่งป๊อปโอเวอร์ให้สัมพันธ์กับตัวเรียกใช้โดยไม่ต้องใช้ JavaScript (Chrome 125 ขึ้นไป): กำหนด anchor-name: --btn ให้ตัวเรียกใช้ กำหนด position-anchor: --btn ให้ป๊อปโอเวอร์ จากนั้นใช้ top: anchor(bottom); left: anchor(left) เพื่อจัดให้อยู่ด้านล่างตัวเรียกใช้

หากไม่มีการจัดตำแหน่งแบบยึดโยง ให้ใช้ตัวครอบหลักที่กำหนดตำแหน่ง: กำหนด position: relative ให้คอนเทนเนอร์ และกำหนด position: absolute; top: 100%; left: 0 ให้เมนูแบบเลื่อนลง วิธีนี้ทำงานข้ามเบราว์เซอร์ได้ แต่ตัวเรียกใช้และเมนูแบบเลื่อนลงต้องเป็นองค์ประกอบพี่น้องกันภายในคอนเทนเนอร์ที่กำหนดตำแหน่ง

จัดรูปแบบรายการเมนูเป็น position: absolute; background: var(--color-surface); box-shadow: var(--shadow-md); border-radius: var(--radius-md); padding: var(--spacing-1) 0; min-width: 200px รายการเมนูใช้ระยะขอบภายใน พื้นหลังเมื่อวางเมาส์เหนือ และการแสดงผลเต็มความกว้าง

ทำให้การเปิดและปิดป๊อปโอเวอร์เคลื่อนไหวด้วย @starting-style สำหรับตอนเปิด และใช้ transition-behavior: allow-discrete เพื่อทำให้การเปลี่ยนแปลงคุณสมบัติ display เคลื่อนไหวได้ วิธีนี้ทำให้สร้างภาพเคลื่อนไหวตอนเข้าและออกด้วย CSS เท่านั้น โดยผูกกับสถานะเปิดหรือปิดของป๊อปโอเวอร์

เมนูแบบเลื่อนลงต้องรองรับแป้นพิมพ์: ใช้ปุ่มลูกศรนำทางระหว่างรายการเมนู ใช้ปุ่มยืนยันหรือปุ่มเว้นวรรคเพื่อเรียกใช้รายการที่โฟกัสอยู่ ใช้ปุ่มยกเลิกเพื่อปิดเมนูและคืนโฟกัสไปยังตัวเรียกใช้ ส่วนติดต่อการเขียนโปรแกรมป๊อปโอเวอร์จะจัดการปุ่มยกเลิกโดยอัตโนมัติ แต่การนำทางด้วยปุ่มลูกศรต้องจัดการเหตุการณ์ด้วย JavaScript

สำหรับเมนูแบบเลื่อนลงกำหนดเอง (ที่ไม่ใช้ส่วนติดต่อการเขียนโปรแกรมป๊อปโอเวอร์) ให้เพิ่ม aria-haspopup="listbox" และ aria-expanded ให้ตัวเรียกใช้ เพิ่ม role="listbox" ให้รายการ และเพิ่ม role="option" กับ aria-selected ให้แต่ละรายการ โปรแกรมอ่านหน้าจอจะแจ้งสถานะการขยายและจำนวนรายการ

เมนูแบบเลื่อนลงที่จัดตำแหน่งไว้ด้านล่างตัวเรียกใช้อาจล้นออกนอกหน้าต่างมุมมองบริเวณด้านล่าง ตรวจจับกรณีนี้ด้วย IntersectionObserver หรือ getBoundingClientRect แล้วสลับให้เมนูไปอยู่เหนือตัวเรียกใช้ การจัดตำแหน่งแบบยึดโยงของ CSS จัดการกรณีนี้ด้วย position-try-fallbacks

เมนูแบบเลื่อนลงซ้อนกัน (เมนูย่อย) เพิ่มความซับซ้อน ให้จัดตำแหน่งเมนูย่อยไว้ทางขวาของรายการแม่ เพิ่มระยะหน่วงก่อนซ่อนเมื่อเมาส์ออก (โดยใช้ CSS transition-delay หรือการหมดเวลาใน JS) เพื่อป้องกันไม่ให้เมนูย่อยปิดขณะผู้ใช้เลื่อนเมาส์ในแนวทแยง

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

ส่วนติดต่อการเขียนโปรแกรมป๊อปโอเวอร์มีอะไรให้โดยอัตโนมัติ ซึ่งก่อนหน้านี้ต้องเขียน JavaScript กำหนดเอง

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