Падајући мени

Пребаците контекстуалне преклапања за приказивање листа веза и више помоћу падајућег додатка Боотстрап.

Преглед

Падајући мени су променљиви, контекстуални преклопи за приказ листа веза и још много тога. Они су интерактивни помоћу укљученог ЈаваСцрипт додатка Боотстрап падајућег менија. Пребацују се кликом, а не лебдењем; ово је намерна одлука о дизајну .

Падајући мени су изграђени на библиотеци треће стране, Поппер.јс , која обезбеђује динамичко позиционирање и откривање поља приказа. Обавезно укључите поппер.мин.јс пре Боотстрап-овог ЈаваСцрипт-а или користите bootstrap.bundle.min.js/ bootstrap.bundle.jsкоји садржи Поппер.јс. Поппер.јс се не користи за позиционирање падајућих менија у навигационим тракама, иако динамичко позиционирање није потребно.

Ако градите наш ЈаваСцрипт из извора, он захтеваutil.js .

Приступачност

ВАИ АРИА стандард дефинише стварни role="menu"виџет , али ово је специфично за меније налик апликацијама који покрећу радње или функције. АРИА менији могу да садрже само ставке менија, ставке менија у пољу за потврду, ставке менија радио дугмади, групе радио дугмади и подменије.

Падајући мени Боотстрапа, с друге стране, дизајнирани су да буду генерички и применљиви на различите ситуације и структуре означавања. На пример, могуће је креирати падајуће меније који садрже додатне уносе и контроле обрасца, као што су поља за претрагу или обрасци за пријаву. Из тог разлога, Боотстрап не очекује (нити аутоматски додаје) ниједан од атрибута roleи aria-потребних за праве АРИА меније. Аутори ће морати сами да укључе ове специфичније атрибуте.

Међутим, Боотстрап додаје уграђену подршку за већину стандардних интеракција менија на тастатури, као што је могућност кретања кроз појединачне .dropdown-itemелементе помоћу тастера са стрелицама и затварање менија помоћу ESCтастера.

Примери

Премотајте прекидач падајућег менија (ваше дугме или везу) и падајући мени унутар .dropdownили другог елемента који декларише position: relative;. Падајући мени се може покренути из <a>или <button>елемената како би боље одговарали вашим потенцијалним потребама.

Једно дугме

Било који сингл .btnсе може претворити у падајући прекидач са неким променама ознаке. Ево како их можете ставити да раде са било којим <button>елементом:

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>

И са <a>елементима:

<div class="dropdown">
  <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown link
  </a>

  <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>

Најбољи део је што ово можете да урадите и са било којом варијантом дугмета:

<!-- Example single danger button -->
<div class="btn-group">
  <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Separated link</a>
  </div>
</div>

Дугме за раздвајање

Слично томе, направите падајуће меније са подељеним дугметом са практично истим ознакама као падајуће меније са једним дугметом, али са додатком .dropdown-toggle-splitза правилан размак око падајућег курсора.

Користимо ову додатну класу да смањимо хоризонталу paddingса обе стране курсора за 25% и уклонимо оно margin-leftшто је додато за обичне падајуће меније дугмета. Ове додатне промене држе курсор у центру у подељеном дугмету и обезбеђују погоднију величину погодне области поред главног дугмета.

<!-- Example split danger button -->
<div class="btn-group">
  <button type="button" class="btn btn-danger">Action</button>
  <button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Separated link</a>
  </div>
</div>

Одређивање величине

Падајући мени са дугмадима функционише са дугмадима свих величина, укључујући подразумевана и подељена дугмад за падајући мени.

<!-- Large button groups (default and split) -->
<div class="btn-group">
  <button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Large button
  </button>
  <div class="dropdown-menu">
    ...
  </div>
</div>
<div class="btn-group">
  <button class="btn btn-secondary btn-lg" type="button">
    Large split button
  </button>
  <button type="button" class="btn btn-lg btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    ...
  </div>
</div>

<!-- Small button groups (default and split) -->
<div class="btn-group">
  <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Small button
  </button>
  <div class="dropdown-menu">
    ...
  </div>
</div>
<div class="btn-group">
  <button class="btn btn-secondary btn-sm" type="button">
    Small split button
  </button>
  <button type="button" class="btn btn-sm btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    ...
  </div>
</div>

Упутства

Дропуп

Покрените падајуће меније изнад елемената додавањем .dropupродитељском елементу.

<!-- Default dropup button -->
<div class="btn-group dropup">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropup
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>

<!-- Split dropup button -->
<div class="btn-group dropup">
  <button type="button" class="btn btn-secondary">
    Split dropup
  </button>
  <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>

Дропригхт

Покрените падајуће меније са десне стране елемената додавањем .droprightродитељском елементу.

<!-- Default dropright button -->
<div class="btn-group dropright">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropright
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>

<!-- Split dropright button -->
<div class="btn-group dropright">
  <button type="button" class="btn btn-secondary">
    Split dropright
  </button>
  <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropright</span>
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>

Дроплефт

Покрените падајуће меније са леве стране елемената додавањем .dropleftродитељском елементу.

<!-- Default dropleft button -->
<div class="btn-group dropleft">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropleft
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>

<!-- Split dropleft button -->
<div class="btn-group">
  <div class="btn-group dropleft" role="group">
    <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      <span class="sr-only">Toggle Dropleft</span>
    </button>
    <div class="dropdown-menu">
      <!-- Dropdown menu links -->
    </div>
  </div>
  <button type="button" class="btn btn-secondary">
    Split dropleft
  </button>
</div>

Историјски, садржај падајућег менија је морао да буде везе, али то више није случај са в4. Сада можете опционо да користите <button>елементе у падајућем менију уместо само <a>с.

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenu2">
    <button class="dropdown-item" type="button">Action</button>
    <button class="dropdown-item" type="button">Another action</button>
    <button class="dropdown-item" type="button">Something else here</button>
  </div>
</div>

Такође можете да креирате неинтерактивне падајуће ставке са .dropdown-item-text. Слободно стилизујте даље помоћу прилагођених ЦСС или текстуалних услужних програма.

<div class="dropdown-menu">
  <span class="dropdown-item-text">Dropdown item text</span>
  <a class="dropdown-item" href="#">Action</a>
  <a class="dropdown-item" href="#">Another action</a>
  <a class="dropdown-item" href="#">Something else here</a>
</div>

Ацтиве

Додајте .activeу ставке у падајућем менију да бисте их стилизирали као активне .

<div class="dropdown-menu">
  <a class="dropdown-item" href="#">Regular link</a>
  <a class="dropdown-item active" href="#">Active link</a>
  <a class="dropdown-item" href="#">Another link</a>
</div>

Онемогућено

Додајте .disabledу ставке у падајућем менију да бисте их стилизирали као онемогућене .

<div class="dropdown-menu">
  <a class="dropdown-item" href="#">Regular link</a>
  <a class="dropdown-item disabled" href="#" tabindex="-1" aria-disabled="true">Disabled link</a>
  <a class="dropdown-item" href="#">Another link</a>
</div>

Подразумевано, падајући мени се аутоматски поставља 100% од врха и дуж леве стране свог надређеног. Додајте .dropdown-menu-rightна .dropdown-menuдесно поравнајте падајући мени.

Главу горе! Падајући мени су позиционирани захваљујући Поппер.јс (осим када су садржани у навигационој траци).

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Right-aligned menu
  </button>
  <div class="dropdown-menu dropdown-menu-right">
    <button class="dropdown-item" type="button">Action</button>
    <button class="dropdown-item" type="button">Another action</button>
    <button class="dropdown-item" type="button">Something else here</button>
  </div>
</div>

Респонсиве алигнмент

Ако желите да користите прилагодљиво поравнање, онемогућите динамичко позиционирање додавањем data-display="static"атрибута и користите класе варијација које одговарају.

Да бисте поравнали десно падајући мени са датом тачком прекида или већом, додајте .dropdown-menu{-sm|-md|-lg|-xl}-right.

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" data-display="static" aria-haspopup="true" aria-expanded="false">
    Left-aligned but right aligned when large screen
  </button>
  <div class="dropdown-menu dropdown-menu-lg-right">
    <button class="dropdown-item" type="button">Action</button>
    <button class="dropdown-item" type="button">Another action</button>
    <button class="dropdown-item" type="button">Something else here</button>
  </div>
</div>

Да бисте поравнали леви падајући мени са датом тачком прекида или већом, додајте .dropdown-menu-rightи .dropdown-menu{-sm|-md|-lg|-xl}-left.

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" data-display="static" aria-haspopup="true" aria-expanded="false">
    Right-aligned but left aligned when large screen
  </button>
  <div class="dropdown-menu dropdown-menu-right dropdown-menu-lg-left">
    <button class="dropdown-item" type="button">Action</button>
    <button class="dropdown-item" type="button">Another action</button>
    <button class="dropdown-item" type="button">Something else here</button>
  </div>
</div>

Имајте на уму да не морате да додајете data-display="static"атрибут у падајућа дугмад у навигационим тракама, пошто се Поппер.јс не користи у навигационим тракама.

Заглавља

Додајте заглавље да означите делове радњи у било ком падајућем менију.

<div class="dropdown-menu">
  <h6 class="dropdown-header">Dropdown header</h6>
  <a class="dropdown-item" href="#">Action</a>
  <a class="dropdown-item" href="#">Another action</a>
</div>

Разделници

Одвојите групе повезаних ставки менија помоћу преграде.

<div class="dropdown-menu">
  <a class="dropdown-item" href="#">Action</a>
  <a class="dropdown-item" href="#">Another action</a>
  <a class="dropdown-item" href="#">Something else here</a>
  <div class="dropdown-divider"></div>
  <a class="dropdown-item" href="#">Separated link</a>
</div>

Текст

Поставите било који текст слободног облика у падајући мени са текстом и користите услужне програме за размаке . Имајте на уму да ће вам вероватно бити потребни додатни стилови величине да бисте ограничили ширину менија.

<div class="dropdown-menu p-4 text-muted" style="max-width: 200px;">
  <p>
    Some example text that's free-flowing within the dropdown menu.
  </p>
  <p class="mb-0">
    And this is more example text.
  </p>
</div>

Формс

Ставите образац у падајући мени или га претворите у падајући мени и користите услужне програме за маргине или паддинг да бисте му дали негативни простор који вам је потребан.

<div class="dropdown-menu">
  <form class="px-4 py-3">
    <div class="form-group">
      <label for="exampleDropdownFormEmail1">Email address</label>
      <input type="email" class="form-control" id="exampleDropdownFormEmail1" placeholder="[email protected]">
    </div>
    <div class="form-group">
      <label for="exampleDropdownFormPassword1">Password</label>
      <input type="password" class="form-control" id="exampleDropdownFormPassword1" placeholder="Password">
    </div>
    <div class="form-group">
      <div class="form-check">
        <input type="checkbox" class="form-check-input" id="dropdownCheck">
        <label class="form-check-label" for="dropdownCheck">
          Remember me
        </label>
      </div>
    </div>
    <button type="submit" class="btn btn-primary">Sign in</button>
  </form>
  <div class="dropdown-divider"></div>
  <a class="dropdown-item" href="#">New around here? Sign up</a>
  <a class="dropdown-item" href="#">Forgot password?</a>
</div>

<form class="dropdown-menu p-4">
  <div class="form-group">
    <label for="exampleDropdownFormEmail2">Email address</label>
    <input type="email" class="form-control" id="exampleDropdownFormEmail2" placeholder="[email protected]">
  </div>
  <div class="form-group">
    <label for="exampleDropdownFormPassword2">Password</label>
    <input type="password" class="form-control" id="exampleDropdownFormPassword2" placeholder="Password">
  </div>
  <div class="form-group">
    <div class="form-check">
      <input type="checkbox" class="form-check-input" id="dropdownCheck2">
      <label class="form-check-label" for="dropdownCheck2">
        Remember me
      </label>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Sign in</button>
</form>

Користите data-offsetили data-referenceда промените локацију падајућег менија.

<div class="d-flex">
  <div class="dropdown mr-1">
    <button type="button" class="btn btn-secondary dropdown-toggle" id="dropdownMenuOffset" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-offset="10,20">
      Offset
    </button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuOffset">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
    </div>
  </div>
  <div class="btn-group">
    <button type="button" class="btn btn-secondary">Reference</button>
    <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" id="dropdownMenuReference" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-reference="parent">
      <span class="sr-only">Toggle Dropdown</span>
    </button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuReference">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Separated link</a>
    </div>
  </div>
</div>

Употреба

Преко атрибута података или ЈаваСцрипт-а, падајући додатак укључује скривени садржај (падајући менији) тако што укључује .showкласу на родитељској листи. Атрибут data-toggle="dropdown"се ослања на затварање падајућих менија на нивоу апликације, тако да је добра идеја да га увек користите.

На уређајима са омогућеним додиром, отварање падајућег менија додаје празне ( $.noop) mouseoverруковаоце непосредним потомцима <body>елемента. Овај, додуше, ружан хак је неопходан да би се заобишла чудна грешка у делегирању догађаја у иОС-у , која би иначе спречила да додир било где изван падајућег менија покрене код који затвара падајући мени. Када се падајући мени затвори, ови додатни празни mouseoverруковаоци се уклањају.

Преко атрибута података

Додајте data-toggle="dropdown"везу или дугме да бисте укључили падајући мени.

<div class="dropdown">
  <button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown trigger
  </button>
  <div class="dropdown-menu" aria-labelledby="dLabel">
    ...
  </div>
</div>

Преко ЈаваСцрипт-а

Позовите падајуће меније преко ЈаваСцрипт-а:

$('.dropdown-toggle').dropdown()

`data-toggle="dropdown"`још увек потребно

Без обзира да ли позивате падајући мени преко ЈаваСцрипт-а или уместо тога користите дата-апи, data-toggle="dropdown"увек је потребно да буде присутан на елементу покретача падајућег менија.

Опције

Опције се могу пренети преко атрибута података или ЈаваСцрипт-а. За атрибуте података додајте име опције у data-, као у data-offset="".

Име	Тип	Уобичајено	Опис
офсет	број \| стринг \| функција	0	Померање падајућег менија у односу на циљ. За више информација погледајте Поппер.јс офсет документе .
флип	боолеан	истинито	Дозволите да се падајући мени окрене у случају преклапања на референтном елементу. За више информација погледајте флип документе Поппер.јс .
граница	стринг \| елемент	'сцроллПарент'	Преливање границе ограничења падајућег менија. Прихвата вредности `'viewport'`, `'window'`, `'scrollParent'`, или референце ХТМЛЕлемента (само ЈаваСцрипт). За више информација погледајте ПревенОверфлов документе Поппер.јс .
референца	стринг \| елемент	'искључи'	Референтни елемент падајућег менија. Прихвата вредности `'toggle'`, `'parent'`, или референце ХТМЛЕлемента. За више информација погледајте Поппер.јс референцеОбјецт документе .
приказ	низ	'динамичан'	Подразумевано користимо Поппер.јс за динамичко позиционирање. Онемогућите ово помоћу `static`.

Обратите пажњу када boundaryје постављена на било коју вредност осим 'scrollParent', стил position: staticсе примењује на .dropdownконтејнер.

Методе

Метод	Опис
`$().dropdown('toggle')`	Пребацује падајући мени дате навигационе траке или навигације са картицама.
`$().dropdown('show')`	Приказује падајући мени дате траке за навигацију или навигације са картицама.
`$().dropdown('hide')`	Сакрива падајући мени дате траке за навигацију или навигације са картицама.
`$().dropdown('update')`	Ажурира позицију падајућег менија елемента.
`$().dropdown('dispose')`	Уништава падајући мени елемента.

Догађаји

Сви догађаји падајућег менија се покрећу на .dropdown-menuродитељском елементу 'с и имају relatedTargetсвојство чија је вредност преклопни елемент сидра. hide.bs.dropdownи hidden.bs.dropdownдогађаји имају clickEventсвојство (само када је оригинални тип догађаја click) које садржи објекат догађаја за догађај клика.

Догађај	Опис
`show.bs.dropdown`	Овај догађај се покреће одмах када се позове метода схов инстанце.
`shown.bs.dropdown`	Овај догађај се покреће када падајући мени постане видљив кориснику (сачекаће да се ЦСС транзиције доврше).
`hide.bs.dropdown`	Овај догађај се покреће одмах када се позове метод сакривања инстанце.
`hidden.bs.dropdown`	Овај догађај се покреће када се падајући мени заврши са сакривањем од корисника (сачекаће да се ЦСС транзиције доврше).

$('#myDropdown').on('show.bs.dropdown', function () {
  // do something…
})

Падајући мени

Преглед

Приступачност

Примери

Једно дугме

Дугме за раздвајање

Одређивање величине

Упутства

Дропуп

Дропригхт

Дроплефт

Ставке менија

Ацтиве

Онемогућено

Поравнање менија

Респонсиве алигнмент

Садржај менија

Заглавља

Разделници

Текст

Формс

Употреба

Преко атрибута података

Преко ЈаваСцрипт-а

`data-toggle="dropdown"`још увек потребно

Опције

Методе

Догађаји

Падајући мени

Преглед

Приступачност

Примери

Једно дугме

Дугме за раздвајање

Одређивање величине

Упутства

Дропуп

Дропригхт

Дроплефт

Ставке менија

Ацтиве

Онемогућено

Поравнање менија

Респонсиве алигнмент

Садржај менија

Заглавља

Падајуће заглавље

Разделници

Текст

Формс

Опције падајућег менија

Употреба

Преко атрибута података

Преко ЈаваСцрипт-а

data-toggle="dropdown"још увек потребно

Опције

Методе

Догађаји

`data-toggle="dropdown"`још увек потребно