Sertifikat olingYANGIW3Schools ilovasiiOS va AndroidSarguzashtni boshlang

BS 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 class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example   <span class="caret"></span></button>   <ul class="dropdown-menu">     <li><a href="#">HTML</a></li>     <li><a href="#">CSS</a></li>     <li><a href="#">JavaScript</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-toggle="dropdown" atributiga ega tugma yoki havoladan foydalaning.

.caret klassi tugma ochiluvchi menyu ekanini bildiruvchi uchburchak strelka belgisini () yaratadi.

Ochiluvchi menyuning o‘zini yaratish uchun <ul> elementiga .dropdown-menu klassini qo‘shing.

Ochiluvchi menyu ajratgichi

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

Misol

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

Ochiluvchi menyu sarlavhasi

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

Misol

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

Nofaol va faol elementlar

Ochiluvchi menyudagi muayyan elementni .active klassi yordamida ajratib ko‘rsating (ko‘k fon rangi qo‘shiladi).

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 class="disabled"><a href="#">CSS</a></li> <li class="active"><a href="#">HTML</a></li>
O‘zingiz sinab ko‘ring »

Ochiluvchi menyuning joylashuvi

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

Misol

<ul class="dropdown-menu dropdown-menu-right">
O‘zingiz sinab ko‘ring »

Dropup (yuqoriga ochiladigan menyu)

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 menyuning qulayligi (accessibility)

Ekran o‘quvchi dasturlardan foydalanadigan odamlar uchun qulaylikni oshirish maqsadida ochiluvchi menyu yaratishda quyidagi role va aria-* atributlarini qo‘shishingiz kerak:

Misol

<div class="dropdown">   <button class="btn btn-default dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">Tutorials   <span class="caret"></span></button>   <ul class="dropdown-menu" role="menu" aria-labelledby="menu1">     <li role="presentation"><a role="menuitem" href="#">HTML</a></li>     <li role="presentation"><a role="menuitem" href="#">CSS</a></li>     <li role="presentation"><a role="menuitem" href="#">JavaScript</a></li>     <li role="presentation" class="divider"></li>     <li role="presentation"><a role="menuitem" href="#">About Us</a></li>   </ul> </div>
O‘zingiz sinab ko‘ring »

Mashqlar yordamida o‘zingizni sinang

Mashq:

Ochiluvchi ro‘yxat yaratish uchun kerakli klass va atributlarni qo‘shing.

<div class="">
  <button 
  class="btn btn-primary ">
  Dropdown Example
  <span class="caret"></span></button>
  <ul class="">
    <li><a href="#">HTML</a></li>
    <li><a href="#">CSS</a></li>
    <li><a href="#">JavaScript</a></li>
  </ul>
</div>

Mashqni boshlash

Bootstrap ochiluvchi menyulari bo‘yicha to‘liq ma’lumotnoma

Ochiluvchi menyularning barcha parametrlari (options), metodlari va hodisalari (events) bo‘yicha to‘liq ma’lumot uchun Bootstrap JS Dropdown ma’lumotnomamizga o‘ting.


‹ OrqagaKeyingisi

W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!

Ro'yxatdan o'tishKirish