BS4 ochiluvchi menyular (dropdown)
Oddiy ochiluvchi menyu (dropdown)
Ochiluvchi menyu — foydalanuvchiga oldindan belgilangan ro‘yxatdan bitta qiymatni tanlash imkonini beruvchi, ochib-yopiladigan menyu:
Misol
<div class="dropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
Dropdown button
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a class="dropdown-item" href="#">Link 3</a>
</div>
</div>
O‘zingiz sinab ko‘ring »
Misol tahlili
.dropdown klassi ochiluvchi menyuni bildiradi.
Ochiluvchi menyuni ochish uchun .dropdown-toggle klassi va data-toggle="dropdown" atributiga ega tugma yoki havoladan foydalaning.
Ochiluvchi menyuni hosil qilish uchun <div> elementiga .dropdown-menu klassini qo‘shing. So‘ngra ochiluvchi menyu ichidagi har bir elementga (havola yoki tugmaga) .dropdown-item klassini qo‘shing.
Ochiluvchi menyu ajratgichi
.dropdown-divider klassi ochiluvchi menyu ichidagi havolalarni ingichka gorizontal chiziq bilan ajratish uchun ishlatiladi:
Ochiluvchi menyu sarlavhasi
.dropdown-header klassi ochiluvchi menyu ichiga sarlavhalar qo‘shish uchun ishlatiladi:
Nofaol va faol elementlar
Ochiluvchi menyudagi muayyan elementni .active klassi yordamida ajratib ko‘rsating (ko‘k fon rangini qo‘shadi).
Ochiluvchi menyudagi elementni nofaol qilish uchun .disabled klassidan foydalaning (element och kulrang matn rangini oladi, sichqoncha ustiga olib borilganda esa kursor "to‘xtash taqiqlangan" belgisi ko‘rinishiga keladi):
Misol
<a class="dropdown-item active" href="#">Active</a>
<a class="dropdown-item disabled" href="#">Disabled</a>
O‘zingiz sinab ko‘ring »
Ochiluvchi menyuning joylashuvi
Ochiluvchi elementga .dropright yoki .dropleft klassini qo‘shib, "dropright" (o‘ngga ochiladigan) yoki "dropleft" (chapga ochiladigan) menyu ham yaratishingiz mumkin. E’tibor bering, uchburchak/strelka belgisi avtomatik qo‘shiladi:
O‘ngga tekislangan ochiluvchi menyu
Ochiluvchi menyuni o‘ngga tekislash uchun .dropdown-menu klassiga ega elementga .dropdown-menu-right klassini qo‘shing:
Dropup (yuqoriga ochiladigan menyu)
Agar ochiluvchi menyu pastga emas, yuqoriga qarab ochilishini istasangiz, class="dropdown" bo‘lgan <div> elementini "dropup" ga o‘zgartiring:
Ochiluvchi menyudagi matn
.dropdown-item-text klassi ochiluvchi menyu elementiga oddiy matn qo‘shish uchun yoki havolalarga standart havola uslubini berish uchun ishlatiladi.
Misol
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a class="dropdown-item-text" href="#">Text Link</a>
<span class="dropdown-item-text">Just Text</span>
</div>
O‘zingiz sinab ko‘ring »
Ochiluvchi menyuli tugmalar guruhi
Misol
<div class="btn-group">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
Sony
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Tablet</a>
<a class="dropdown-item" href="#">Smartphone</a>
</div>
</div>
</div>
O‘zingiz sinab ko‘ring »
Bo‘lingan (split) tugmali ochiluvchi menyular
Misol
<div class="btn-group">
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
</div>
</div>
O‘zingiz sinab ko‘ring »
Ochiluvchi menyuli vertikal tugmalar guruhi
Misol
<div class="btn-group-vertical">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
Sony
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Tablet</a>
<a class="dropdown-item" href="#">Smartphone</a>
</div>
</div>
</div>
O‘zingiz sinab ko‘ring »
Bootstrap 4 Dropdown bo‘yicha to‘liq ma’lumotnoma
Barcha dropdown parametrlari, metodlari va hodisalari bo‘yicha to‘liq ma’lumotnoma uchun Bootstrap 4 JS Dropdown ma’lumotnomamizga o‘ting.
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!