Source

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

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

Преглед

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

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

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

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

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

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

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

Примери

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

Падајући мени са једним дугметом

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

Action Another action Something else here 
<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>елементима:

Action Another action Something else here 
<div class="dropdown show">
  <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>

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

Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link 
<!-- 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што је додато за обичне падајуће меније дугмета. Ове додатне промене држе курсор у центру у подељеном дугмету и обезбеђују погоднију величину погодне области поред главног дугмета.

Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link 
<!-- 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родитељском елементу.

Action Another action Something else here
Separated link
Action Another action Something else here
Separated link 
<!-- 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родитељском елементу.

Action Another action Something else here
Separated link
Action Another action Something else here
Separated link 
<!-- 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родитељском елементу.

Action Another action Something else here
Separated link
Action Another action Something else here
Separated link 
<!-- 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>

Подразумевано, падајући мени се аутоматски поставља 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>

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

Падајуће заглавље
поступак Још једна акција 
<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">
  <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-check">
      <input type="checkbox" class="form-check-input" id="dropdownCheck">
      <label class="form-check-label" for="dropdownCheck">
        Remember me
      </label>
    </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-check">
    <input type="checkbox" class="form-check-input" id="dropdownCheck2">
    <label class="form-check-label" for="dropdownCheck2">
      Remember me
    </label>
  </div>
  <button type="submit" class="btn btn-primary">Sign in</button>
</form>

Активне ставке менија

Додајте .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="#">Disabled link</a>
  <a class="dropdown-item" href="#">Another link</a>
</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', или референце ХТМЛЕлемента (само ЈаваСцрипт). За више информација погледајте ПревенОверфлов документе Поппер.јс .

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

Методе

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

Догађаји

Сви догађаји падајућег менија се покрећу на .dropdown-menuродитељском елементу 'с и имају relatedTargetсвојство чија је вредност преклопни елемент сидра.

Догађај Опис
show.bs.dropdown Овај догађај се покреће одмах када се позове метода схов инстанце.
shown.bs.dropdown Овај догађај се покреће када падајући мени постане видљив кориснику (сачекаће да се ЦСС транзиције доврше).
hide.bs.dropdown Овај догађај се покреће одмах када се позове метод сакривања инстанце.
hidden.bs.dropdown Овај догађај се покреће када се падајући мени заврши са сакривањем од корисника (сачекаће да се ЦСС транзиције доврше). 
$('#myDropdown').on('show.bs.dropdown', function () {
  // do something…
})