ម៉ឺនុយទម្លាក់ចុះ (dropdown menu) មួយគឺជាម៉ឺនុយ toggletable មួយដែលអនុញ្ញាតឱ្យអ្នកប្រើ ជ្រើសតម្លៃមួយពីបញ្ជីដែលបានកំណត់ជាមុន:
ពន្យល់ឧទាហរណ៍ខាងលើ
.dropdown class
បង្ហាញម៉ឺនុយទម្លាក់ចុះ។- ដើម្បីបើកម៉ឺនុយទម្លាក់ចុះ, ប្រើប៊ូតុងមួយ ឬ តំណភ្ជាប់ជាមួយនឹង class នៃការ
.dropdown-toggle
និងdata-toggle= “dropdown” attribute
។ .caret class
បង្កើតរូបតំណាងសញ្ញាព្រួញ (), ដែលបង្ហាញថាប៊ូតុងទម្លាក់ចុះ។- ដើម្បីបង្កើតម៉ឺនុយទម្លាក់ចុះត្រូវបន្ថែម
.dropdown-menu class
ទៅក្នុងធាតុ<ul>
។
១) បែងចែកទម្លាក់ចុះ (Dropdown Divider)
.divider class
ត្រូវបានប្រើដើម្បីចែកតំណភ្ជាប់ដោយឡែកពីគ្នានៅក្នុងម៉ឺនុយទម្លាក់ចុះផ្ដេក:
យើងបានលទ្ធផលដូចខាងក្រោម
២) Header ម៉ឺនុយទម្លាក់ចុះ (Dropdown Header)
.dropdown-header class
បានប្រើដើម្បីបន្ថែម headers នៅក្នុងម៉ឺនុយទម្លាក់ចុះ
យើងបានលទ្ធផលដូចខាងក្រោម
៣) បិទធាតុ (Disable an Item)
ដើម្បីបិទធាតុនៅក្នុងម៉ឺនុយទម្លាក់ចុះប្រើ .disabled
class:
យើងបានលទ្ធផលដូចខាងក្រោម
៤) ទីតាំងទម្លាក់ចុះ (Dropdown Position)
ដើម្បី right-align
ទម្លាក់ចុះ ត្រូវបន្ថែម .dropdown-menu-right
ទៅក្នុងធាតុ .dropdown-menu
យើងបានលទ្ធផលដូចខាងក្រោម
៥) ទម្លាក់ឡើង (Dropup)
ប្រសិនបើអ្នកចង់ម៉ឺនុយទម្លាក់ចុះដើម្បីជំនួសឱ្យការធ្លាក់ចុះ ទៅជាទម្លាក់ឡើង ផ្លាស់ប្តូរធាតុ <div>
ជាមួយ class=dropdown
ទៅជា dropup
:
យើងបានលទ្ធផលដូចខាងក្រោម