Dropdowns / Выпадающее меню

Dropdowns / Выпадающее меню

Переключаемое, контекстное меню для отображения списка ссылок. Их интерактивность обеспечивается JavaScript плагином для dropdown меню.

Оберните кнопку выпадающего меню и список с помощью класса .dropdownили другого элемента, который объявляетposition: relative;.

<div class="dropdown">
  <button class="btn dropdown-toggle sr-only" type="button" id="dropdownMenu1" data-toggle="dropdown">
        Dropdown
        <span class="caret"></span>
      </button>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Действие</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Другое действие</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Что-то еще</a></li>
    <li role="presentation" class="divider"></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Отдельная ссылка</a></li>
  </ul>
</div>

По умолчанию, выпадающее меню автоматически устанавливается 100% от верхнего и вдоль левого края его родителя. Добавьте .dropdown-menu-right к .dropdown-menu для выравнивание выпадающего меню справа.

Может потребоваться дополнительное позиционирование

Dropdowns автоматически позиционируется с помощью CSS в пределах нормального потока документа. Это означает, что выпадающее меню может быть обрезано родителями с определенными свойствами overflow или появляются за пределми области просмотра. Адресуйте эти вопросы по своему усмотрению, когда они возникают.

.pull-right устаревшее выравнивание

В версии 3.1, мы определили устаревшим выравнивание .pull-right для выпадающего меню. Для выравнивания меню справа, используйте .dropdown-menu-right. Компоненты, выровненные справа в навигационной панели используют реализован версию класса right-aligned, для автоматического выравнивания меню. Для переопределения их, используйте .dropdown-menu-left.

<ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="dLabel">
  ...
</ul>

Добавьте заголовок чтобы маркировать участки в любом выпадающего меню.

<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu2">
  <li role="presentation" class="dropdown-header">Название меню</li>
  ...
  <li role="presentation" class="divider"></li>
  <li role="presentation" class="dropdown-header">Название меню</li>
  ...
</ul>

Добавьте .disabled к <li> в выпадающем списке, чтобы отключить ссылку.

<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu3">
  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Обычная ссылка</a></li>
  <li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">Заблокированая ссылка</a></li>
  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Другая ссылка</a></li>
</ul>

Translate »