หน้าแรก>การเขียนโปรแกรมที่เกี่ยวข้อง>ซอร์สโค้ดอื่น ๆ
ดาวน์โหลด

เมนูแบบเลื่อนลง CSS ของ Tailwind

ปลั๊กอินสำหรับสร้างดรอปดาวน์ JavaScript ฟรีที่สามารถเข้าถึงได้ด้วย Tailwind CSS นี่ไม่ใช่องค์ประกอบ (แม้ว่าคุณจะใช้ตัวอย่างด้านล่างเป็นพิมพ์เขียวได้ก็ตาม)

- ดูสดบน CodeSandbox

- ติดตั้ง 

npm install tailwindcss-dropdown

ใน tailwind.config.js เพิ่ม dropdown ให้กับรูปแบบ display ของคุณและต้องใช้ปลั๊กอิน เช่นนี้ 

 module . exports = {
  theme : { } ,
  variants : {
    display : [ 'responsive' , 'dropdown' ]
  } ,
  plugins : [ require ( 'tailwindcss-dropdown' ) ] ,
}

การใช้งาน

ปลั๊กอินนี้เพิ่ม dropdown เป็นตัวแปรสำหรับยูทิลิตี้ display การแปล: คุณสามารถใช้ dropdown:block เพื่อเปลี่ยน display ของลูก ul เพื่อ block (หรือคุณสมบัติอื่น ๆ ที่แสดงไว้ที่นี่)

ขึ้นอยู่กับโครงสร้างของ HTML ของคุณอย่างมาก เช่น: 

 < ul class =" flex space-x-6 " role =" navigation " >
  < li > < a href = # > Home </ a > </ li >
  < li > < a href = # > Support </ a > </ li >
  <!-- 1) dropdown:block -->
  < li class =" relative dropdown:block " aria-haspopup =" true " >
    < a href = # > Products </ a >
    <!-- 2) will transform this ul in a block when focused -->
    < ul class =" hidden absolute right-0 w-auto " aria-label =" submenu " >
      < li > < a href = # > macOS </ a > </ li >
      < li > < a href = # > Windows </ a > </ li >
    </ ul >
  </ li >
</ ul >

โปรดทราบว่า dropdown:block ต้องมี ul เป็นรายการลูก เช่นเดียวกันสามารถทำได้ด้วย button : 

 <!-- 1) dropdown:block -->
< button class =" relative dropdown:block " role =" navigation " aria-haspopup =" true " >
  Products
  <!-- 2) will transform this ul in a block when focused -->
  < ul class =" absolute right-0 hidden w-auto " aria-label =" submenu " >
    < li > < a href =" # " > macOS </ a > </ li >
    < li > < a href =" # " > Windows </ a > </ li >
  </ ul >
</ button >

ตัวอย่างเพิ่มเติมเกี่ยวกับ CodeSandbox

?‍♂️ มันทำงานอย่างไร?

โค้ดสำหรับ dropdown:block (และสำหรับค่าการแสดงผลอื่นๆ เช่น dropdown:grid ฯลฯ) จะมีลักษณะดังนี้: 

. dropdown  : block : focus-within > ul {
  display : block;
}

ดังนั้น เมื่อองค์ประกอบที่มี class dropdown:block มีโฟกัสอยู่ภายใน ul ที่อยู่ข้างในก็จะกลายเป็น block

ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด