Sertifikat olingYANGIW3Schools ilovasiiOS va AndroidSarguzashtni boshlang

BS5 ochiluvchi menyular (dropdown)

ULASHISH

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-bs-toggle="dropdown">     Dropdown button   </button>   <ul class="dropdown-menu">     <li><a class="dropdown-item" href="#">Link 1</a></li>     <li><a class="dropdown-item" href="#">Link 2</a></li>     <li><a class="dropdown-item" href="#">Link 3</a></li>   </ul> </div>
O‘zingiz sinab ko‘ring »

Misol tahlili

.dropdown klassi ochiluvchi menyuni bildiradi.

Ochiluvchi menyuni ochish uchun .dropdown-toggle klassi va data-bs-toggle="dropdown" atributiga ega tugma yoki havoladan foydalaning.

Ochiluvchi menyuni hosil qilish uchun <div> yoki <ul> kabi konteyner elementga .dropdown-menu klassini qo‘shing. So‘ngra ochiluvchi menyu ichidagi har bir elementga (havola yoki tugmaga) .dropdown-item klassini qo‘shing.

Ochiluvchi menyu ajratgichi

Link 1 Link 2 Link 3
Another link

.dropdown-divider klassi ochiluvchi menyu ichidagi havolalarni ingichka gorizontal chiziq bilan ajratish uchun ishlatiladi:

Misol

<li><hr class="dropdown-divider"></hr></li>
O‘zingiz sinab ko‘ring »

Ochiluvchi menyu sarlavhasi

Dropdown header 1
Link 1 Link 2 Link 3
Dropdown header 2
Another link

.dropdown-header klassi ochiluvchi menyu ichiga sarlavhalar qo‘shish uchun ishlatiladi:

Misol

<li><h5 class="dropdown-header">Dropdown header 1</h5></li>
O‘zingiz sinab ko‘ring »

Nofaol va faol elementlar

Normal Active Disabled

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

<li><a class="dropdown-item" href="#">Normal</a></li> <li><a class="dropdown-item active" href="#">Active</a></li> <li><a class="dropdown-item disabled" href="#">Disabled</a></li>
O‘zingiz sinab ko‘ring »

Ochiluvchi menyuning joylashuvi

Link 1 Link 2 Link 3
Link 1 Link 2 Link 3

Ochiluvchi elementga .dropend yoki .dropstart klassini qo‘shib, "dropend" (o‘ngga ochiladigan) yoki "dropstart" (chapga ochiladigan) menyu ham yaratishingiz mumkin. E’tibor bering, uchburchak/strelka belgisi avtomatik qo‘shiladi:

Dropright

<div class="dropdown dropend">
O‘zingiz sinab ko‘ring »

Dropleft

<div class="dropdown dropstart">
O‘zingiz sinab ko‘ring »

O‘ngga tekislangan ochiluvchi menyu

Link 1 Link 2 Link 3

Ochiluvchi menyuni o‘ngga tekislash uchun .dropdown-menu klassiga ega elementga .dropdown-menu-end klassini qo‘shing:

Misol

<div class="dropdown-menu dropdown-menu-end">
O‘zingiz sinab ko‘ring »

Dropup (yuqoriga ochiladigan menyu)

Link 1 Link 2 Link 3

Agar ochiluvchi menyu pastga emas, yuqoriga qarab ochilishini istasangiz, class="dropdown" bo‘lgan <div> elementini "dropup" ga o‘zgartiring:

Misol

<div class="dropup">
O‘zingiz sinab ko‘ring »

Ochiluvchi menyudagi matn

Link 1 Link 2 Text Link Just Text

.dropdown-item-text klassi ochiluvchi menyu elementiga oddiy matn qo‘shish uchun yoki havolalarga standart havola uslubini berish uchun ishlatiladi.

Misol

<ul class="dropdown-menu">   <li><a class="dropdown-item" href="#">Link 1</a></li>   <li><a class="dropdown-item" href="#">Link 2</a></li>   <li><a class="dropdown-item" href="#">Link 3</a></li>   <li><a class="dropdown-item-text" href="#">Text Link</a></li>   <li><span class="dropdown-item-text">Just Text</span></li> </ul>
O‘zingiz sinab ko‘ring »

Ochiluvchi menyuli tugmalar guruhi

Tablet Smartphone

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-bs-toggle="dropdown">Sony</button>     <ul class="dropdown-menu">       <li><a class="dropdown-item" href="#">Tablet</a></li>       <li><a class="dropdown-item" href="#">Smartphone</a></li>     </ul>   </div> </div>
O‘zingiz sinab ko‘ring »

Ochiluvchi menyuli vertikal tugmalar guruhi

Tablet Smartphone

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-bs-toggle="dropdown">Sony</button>     <ul class="dropdown-menu">       <li><a class="dropdown-item" href="#">Tablet</a></li>       <li><a class="dropdown-item" href="#">Smartphone</a></li>     </ul>   </div> </div>
O‘zingiz sinab ko‘ring »

‹ OrqagaKeyingisi

W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!

Ro'yxatdan o'tishKirish