падащи менюта

Превключете контекстуалните наслагвания за показване на списъци с връзки и други с плъгина за падащо меню Bootstrap.

Преглед

Падащите менюта са превключващи, контекстуални наслагвания за показване на списъци с връзки и други. Те са направени интерактивни с включената приставка за JavaScript с падащо меню Bootstrap. Те се превключват чрез щракване, а не чрез задържане на мишката; това е умишлено дизайнерско решение.

Падащите менюта са изградени на базата на библиотека на трета страна, Popper.js , която осигурява динамично позициониране и откриване на прозорци. Не забравяйте да включите popper.min.js преди JavaScript на Bootstrap или използвайте bootstrap.bundle.min.js/ bootstrap.bundle.js, който съдържа Popper.js. Popper.js не се използва за позициониране на падащи менюта в навигационни ленти, въпреки че не е необходимо динамично позициониране.

Ако изграждате нашия JavaScript от изходния код, той изискваutil.js .

Достъпност

Стандартът WAI ARIA дефинира действителна role="menu"джаджа , но това е специфично за подобни на приложения менюта, които задействат действия или функции. Менютата ARIA могат да съдържат само елементи от менюто, елементи от менюто с квадратчета за отметка, елементи от менюто с радио бутони, групи радио бутони и подменюта.

Падащите менюта на Bootstrap, от друга страна, са проектирани да бъдат общи и приложими към различни ситуации и структури за маркиране. Например, възможно е да създадете падащи менюта, които съдържат допълнителни входове и контроли на формуляри, като полета за търсене или формуляри за влизане. Поради тази причина Bootstrap не очаква (нито добавя автоматично) нито един от атрибутите roleи , необходими за истинските ARIA менюта. Авторите ще трябва сами да включат тези по-специфични атрибути.aria-

Въпреки това, Bootstrap добавя вградена поддръжка за повечето стандартни взаимодействия с менюто на клавиатурата, като например възможността за придвижване през отделни .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 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>

Най-добрата част е, че можете да направите това и с всеки вариант на бутон:

<!-- 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

Задействайте падащи менюта отдясно на елементите чрез добавяне .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

Задействайте падащи менюта отляво на елементите чрез добавяне .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>

Исторически съдържанието на падащото меню трябваше да бъде връзки, но това вече не е така с v4. Сега можете по избор да използвате <button>елементи в падащите менюта вместо само <a>s.

<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към a .dropdown-menuза подравняване на падащото меню вдясно.

Горе главата! Падащите менюта се позиционират благодарение на Popper.js (освен когато се съдържат в лентата за навигация).

<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>

Използване

Чрез атрибути на данни или JavaScript плъгинът за падащо меню превключва скритото съдържание (падащи менюта), като превключва .showкласа в елемента от родителския списък. На data-toggle="dropdown"атрибута се разчита за затваряне на падащи менюта на ниво приложение, така че е добра идея винаги да го използвате.

На устройства със сензорен екран отварянето на падащо меню добавя празни ( $.noop) mouseoverманипулатори към непосредствените деца на <body>елемента. Този несъмнено грозен хак е необходим, за да се заобиколи странност в делегирането на събития в iOS , което иначе би попречило на докосване някъде извън падащото меню да задейства кода, който затваря падащото меню. След като падащото меню се затвори, тези допълнителни празни 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>

Чрез JavaScript

Извикайте падащите менюта чрез JavaScript:

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

`data-toggle="dropdown"`все още се изисква

Независимо дали извиквате своето падащо меню чрез JavaScript или вместо това използвате data-api, data-toggle="dropdown"винаги се изисква да присъства в задействащия елемент на падащото меню.

Настроики

Опциите могат да се предават чрез атрибути на данни или JavaScript. За атрибути на данни добавете името на опцията към data-, както в data-offset="".

Име	Тип	По подразбиране	Описание
изместване	номер \| низ \| функция	0	Отместване на падащото меню спрямо неговата цел. За повече информация вижте офсетните документи на Popper.js .
флип	булево	вярно	Разрешаване на падащото меню да се обръща в случай на припокриване на референтния елемент. За повече информация вижте flip docs на Popper.js .
граница	низ \| елемент	'scrollParent'	Границата на ограничението за препълване на падащото меню. Приема стойностите на `'viewport'`, `'window'`, `'scrollParent'`или препратка към HTMLElement (само за JavaScript). За повече информация вижте документите за предотвратяване на Overflow на Popper.js .

Обърнете внимание, когато boundaryе зададена стойност, различна от 'scrollParent', стилът position: staticсе прилага към .dropdownконтейнера.

Методи

Метод	Описание
`$().dropdown('toggle')`	Превключва падащото меню на дадена навигационна лента или навигация с раздели.
`$().dropdown('update')`	Актуализира позицията на падащото меню на елемент.
`$().dropdown('dispose')`	Унищожава падащото меню на елемент.

събития

Всички падащи събития се задействат към .dropdown-menuродителския елемент и имат relatedTargetсвойство, чиято стойност е превключващият анкерен елемент.

Събитие	Описание
`show.bs.dropdown`	Това събитие се задейства веднага, когато се извика методът за показване на екземпляр.
`shown.bs.dropdown`	Това събитие се задейства, когато падащото меню е направено видимо за потребителя (ще изчака CSS преходите да завършат).
`hide.bs.dropdown`	Това събитие се задейства незабавно, когато методът за скриване на екземпляра е извикан.
`hidden.bs.dropdown`	Това събитие се задейства, когато падащото меню свърши да бъде скрито от потребителя (ще изчака CSS преходите да завършат).

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

падащи менюта

Преглед

Достъпност

Примери

Падащи менюта с един бутон

Разделяне на падащи бутони

Оразмеряване

Дропъп вариация

Вариация Dropright

Вариация Dropleft

Елементи от менюто

Подравняване на менюто

Заглавки на менюто

Разделители на менюто

Форми на менюто

Активни елементи от менюто

Деактивирани елементи от менюто

Използване

Чрез атрибути на данни

Чрез JavaScript

`data-toggle="dropdown"`все още се изисква

Настроики

Методи

събития

падащи менюта

Преглед

Достъпност

Примери

Падащи менюта с един бутон

Разделяне на падащи бутони

Оразмеряване

Дропъп вариация

Вариация Dropright

Вариация Dropleft

Елементи от менюто

Подравняване на менюто

Заглавки на менюто

Заглавка на падащото меню

Разделители на менюто

Форми на менюто

Активни елементи от менюто

Деактивирани елементи от менюто

Използване

Чрез атрибути на данни

Чрез JavaScript

data-toggle="dropdown"все още се изисква

Настроики

Методи

събития

`data-toggle="dropdown"`все още се изисква