Выпадающее меню на js: Как сделать раскрывающееся меню при нажатии

Dropdowns (выпадающие списки)

Обзор

Выпадающие списки — это переключаемые контекстные наложения для отображения списков ссылок и многого другого. Они сделаны интерактивными с помощью включенного плагина JavaScript для выпадающего меню Bootstrap. Они переключаются щелчком, а не при наведении курсора; это намеренное дизайнерское решение.

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

Доступность

Стандарт WAI ARIA определяет фактический role="menu"

виджет, но он специфичен для меню, похожего на приложения, которое запускает действия или функции. Меню ARIA могут содержать только пункты меню, пункты меню флажков, пункты меню радиокнопок, группы радиокнопок и подменю.

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

Однако Bootstrap добавляет встроенную поддержку для большинства стандартных взаимодействий с меню клавиатуры, таких как возможность перемещаться по отдельным

.dropdown-item элементам с помощью клавиш курсора и закрывать меню с помощью ESC клавиши.

Примеры

Оберните переключатель раскрывающегося списка (вашу кнопку или ссылку) и раскрывающееся меню внутрь .dropdown или в другой элемент, который объявляет position: relative;. Выпадающие списки можно запускать из элементов <a> или <button>, чтобы лучше соответствовать вашим потенциальным потребностям. В показанных здесь примерах используются семантические <ul> элементы там, где это необходимо, но поддерживается настраиваемая разметка.

Одна кнопка

Любой сингл .btn можно превратить в раскрывающийся список с некоторыми изменениями разметки. Вот как вы можете заставить их работать с любым из

<button> элементов:

<div>
  <button type="button" data-toggle="dropdown" aria-expanded="false">
    Dropdown button
  </button>
  <ul aria-labelledby="dropdownMenuButton">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
  </ul>
</div>

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

<div>
  <a href="#" role="button" data-toggle="dropdown" aria-expanded="false">
    Dropdown link
  </a>

  <ul aria-labelledby="dropdownMenuLink">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
  </ul>
</div>

Самое приятное то, что вы можете сделать это и с любым вариантом кнопки:

<!-- Example single danger button -->
<div>
  <button type="button" data-toggle="dropdown" aria-expanded="false">
    Action
  </button>
  <ul>
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li><hr></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

Кнопка разделения

Точно так же создайте раскрывающиеся списки с разделенными кнопками с практически такой же разметкой, что и раскрывающиеся списки с одной кнопкой, но с добавлением

. dropdown-toggle-split правильного интервала вокруг курсора раскрывающегося списка.

Мы используем этот дополнительный класс, чтобы уменьшить горизонтальность padding по обе стороны от курсора на 25% и удалить margin-left добавляемый для обычных раскрывающихся списков кнопок. Эти дополнительные изменения удерживают курсор в центре разделенной кнопки и обеспечивают область нажатия более подходящего размера рядом с основной кнопкой.

<!-- Example split danger button -->
<div>
  <button type="button">Action</button>
  <button type="button" data-toggle="dropdown" aria-expanded="false">
    <span>Toggle Dropdown</span>
  </button>
  <ul>
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li><hr></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

Размеры

Выпадающие кнопки работают с кнопками всех размеров, включая кнопки по умолчанию и кнопки с разделенным раскрывающимся списком.

<!-- Large button groups (default and split) -->
<div>
  <button type="button" data-toggle="dropdown" aria-expanded="false">
    Large button
  </button>
  <ul>
    ...
  </ul>
</div>
<div>
  <button type="button">
    Large split button
  </button>
  <button type="button" data-toggle="dropdown" aria-expanded="false">
    <span>Toggle Dropdown</span>
  </button>
  <ul>
    ...
  </ul>
</div>

<!-- Small button groups (default and split) -->
<div>
  <button type="button" data-toggle="dropdown" aria-expanded="false">
    Small button
  </button>
  <ul>
    ...
  </ul>
</div>
<div>
  <button type="button">
    Small split button
  </button>
  <button type="button" data-toggle="dropdown" aria-expanded="false">
    <span>Toggle Dropdown</span>
  </button>
  <ul>
    .
 
  ..
  </ul>
</div>

Темные выпадающие списки

Выберите более темные раскрывающиеся списки, чтобы они соответствовали темной панели навигации или индивидуальному стилю, добавив

.dropdown-menu-dark к существующему .dropdown-menu. Никаких изменений в раскрывающихся элементах не требуется.

<div>
  <button type="button" data-toggle="dropdown" aria-expanded="false">
    Dropdown button
  </button>
  <ul aria-labelledby="dropdownMenuButton2">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li><hr></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

И использовать его в навигационной панели:

<nav>
  <div>
    <a href="#">Navbar</a>
    <button type="button" data-toggle="collapse" data-target="#navbarNavDarkDropdown" aria-controls="navbarNavDarkDropdown" aria-expanded="false" aria-label="Toggle navigation">
      <span></span>
    </button>
    <div>
      <ul>
        <li>
          <a href="#" role="button" data-toggle="dropdown" aria-expanded="false">
            Dropdown
          </a>
          <ul aria-labelledby="navbarDarkDropdownMenuLink">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>

Направления

Dropup

Вызов раскрывающихся меню над элементами путем добавления

. dropup к родительскому элементу.

<!-- Default dropup button -->
<div>
  <button type="button" data-toggle="dropdown" aria-expanded="false">
    Dropup
  </button>
  <ul>
    <!-- Dropdown menu links -->
  </ul>
</div>

<!-- Split dropup button -->
<div>
  <button type="button">
    Split dropup
  </button>
  <button type="button" data-toggle="dropdown" aria-expanded="false">
    <span>Toggle Dropdown</span>
  </button>
  <ul>
    <!-- Dropdown menu links -->
  </ul>
</div>

Dropright

Вызов раскрывающихся меню справа от элементов путем добавления .droprightк родительскому элементу.

 <!-- Default dropright button -->
<div>
  <button type="button" data-toggle="dropdown" aria-expanded="false">
    Dropright
  </button>
  <ul>
    <!-- Dropdown menu links -->
  </ul>
</div>

<!-- Split dropright button -->
<div>
  <button type="button">
    Split dropright
  </button>
  <button type="button" data-toggle="dropdown" aria-expanded="false">
    <span>Toggle Dropright</span>
  </button>
  <ul>
    <!-- Dropdown menu links -->
  </ul>
</div>

Dropleft

Вызов раскрывающихся меню слева от элементов путем добавления . dropleft к родительскому элементу.

<!-- Default dropleft button -->
<div>
  <button type="button" data-toggle="dropdown" aria-expanded="false">
    Dropleft
  </button>
  <ul>
    <!-- Dropdown menu links -->
  </ul>
</div>

<!-- Split dropleft button -->
<div>
  <div role="group">
    <button type="button" data-toggle="dropdown" aria-expanded="false">
      <span>Toggle Dropleft</span>
    </button>
    <ul>
      <!-- Dropdown menu links -->
    </ul>
  </div>
  <button type="button">
    Split dropleft
  </button>
</div>

Исторически содержимое выпадающего меню должно было быть ссылками, но в версии 4 это уже не так. Теперь вы можете при желании использовать <button> элементы в раскрывающихся списках вместо просто <a>.

<div>
  <button type="button" data-toggle="dropdown" aria-expanded="false">
    Dropdown
  </button>
  <ul aria-labelledby="dropdownMenu2">
    <li><button type="button">Action</button></li>
    <li><button type="button">Another action</button></li>
    <li><button type="button">Something else here</button></li>
  </ul>
</div>

Вы также можете создавать неинтерактивные раскрывающиеся элементы с помощью .dropdown-item-text. Не стесняйтесь изменять стиль с помощью пользовательских CSS или текстовых утилит.

<ul>
  <li><span>Dropdown item text</span></li>
  <li><a href="#">Action</a></li>
  <li><a href="#">Another action</a></li>
  <li><a href="#">Something else here</a></li>
</ul>

Active (активный)

Добавьте . active к элементам в раскрывающемся списке, чтобы сделать их активными. Чтобы передать активное состояние вспомогательным технологиям, используйте aria-current атрибут — используя page значение для текущей страницы или true для текущего элемента в наборе.

<ul>
  <li><a href="#">Regular link</a></li>
  <li><a href="#" aria-current="true">Active link</a></li>
  <li><a href="#">Another link</a></li>
</ul>

Disabled (отключенный)

Добавьте .disabled к элементам в раскрывающемся списке, чтобы сделать их отключенными.

<ul>
  <li><a href="#">Regular link</a></li>
  <li><a href="#" tabindex="-1" aria-disabled="true">Disabled link</a></li>
  <li><a href="#">Another link</a></li>
</ul>

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

Берегись! Выпадающие списки располагаются благодаря Popper.js (кроме случаев, когда они содержатся в навигационной панели).

<div>
  <button type="button" data-toggle="dropdown" aria-expanded="false">
    Right-aligned menu
  </button>
  <ul>
    <li><button type="button">Action</button></li>
    <li><button type="button">Another action</button></li>
    <li><button type="button">Something else here</button></li>
  </ul>
</div>

Отзывчивое выравнивание

Если вы хотите использовать адаптивное выравнивание, отключите динамическое позиционирование, добавив атрибут data-display="static", и используйте классы адаптивных вариантов.

Чтобы выровнять раскрывающееся меню по правому краю с заданной точкой останова или больше, добавьте .dropdown-menu{ -sm|-md|-lg|-xl|-xxl }-right.

<div>
  <button type="button" data-toggle="dropdown" data-display="static" aria-expanded="false">
    Left-aligned but right aligned when large screen
  </button>
  <ul>
    <li><button type="button">Action</button></li>
    <li><button type="button">Another action</button></li>
    <li><button type="button">Something else here</button></li>
  </ul>
</div>

Чтобы выровнять раскрывающееся меню по левому краю с заданной точкой останова или больше, добавьте .dropdown-menu-right и .dropdown-menu{ -sm|-md|-lg|-xl|-xxl }-left.

<div>
  <button type="button" data-toggle="dropdown" data-display="static" aria-expanded="false">
    Right-aligned but left aligned when large screen
  </button>
  <ul>
    <li><button type="button">Action</button></li>
    <li><button type="button">Another action</button></li>
    <li><button type="button">Something else here</button></li>
  </ul>
</div>

Обратите внимание, что вам не нужно добавлять атрибут data-display="static" к раскрывающимся кнопкам на панели навигации, поскольку Popper. js не используется в панелях навигации.

Содержание меню

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

<ul>
  <li><h6>Dropdown header</h6></li>
  <li><a href="#">Action</a></li>
  <li><a href="#">Another action</a></li>
</ul>

Разделители

Разделите группы связанных пунктов меню разделителем.

<ul>
  <li><a href="#">Action</a></li>
  <li><a href="#">Another action</a></li>
  <li><a href="#">Something else here</a></li>
  <li><hr></li>
  <li><a href="#">Separated link</a></li>
</ul>

Текст

Поместите произвольный текст в раскрывающееся меню с текстом и используйте служебные программы для определения интервалов. Обратите внимание, что вам, вероятно, потребуются дополнительные стили размеров, чтобы ограничить ширину меню.

<div>
  <p>
    Some example text that's free-flowing within the dropdown menu.
  </p>
  <p>
    And this is more example text.
  </p>
</div>

Формы

Поместите форму в раскрывающееся меню или превратите ее в раскрывающееся меню и используйте утилиты полей или заполнения, чтобы дать ей необходимое отрицательное пространство.

<div>
  <form>
    <div>
      <label for="exampleDropdownFormEmail1">Email address</label>
      <input type="email" placeholder="email@example.com">
    </div>
    <div>
      <label for="exampleDropdownFormPassword1">Password</label>
      <input type="password" placeholder="Password">
    </div>
    <div>
      <div>
        <input type="checkbox">
        <label for="dropdownCheck">
          Remember me
        </label>
      </div>
    </div>
    <button type="submit">Sign in</button>
  </form>
  <div></div>
  <a href="#">New around here? Sign up</a>
  <a href="#">Forgot password?</a>
</div>

<form>
  <div>
    <label for="exampleDropdownFormEmail2">Email address</label>
    <input type="email" placeholder="email@example. com">
  </div>
  <div>
    <label for="exampleDropdownFormPassword2">Password</label>
    <input type="password" placeholder="Password">
  </div>
  <div>
    <div>
      <input type="checkbox">
      <label for="dropdownCheck2">
        Remember me
      </label>
    </div>
  </div>
  <button type="submit">Sign in</button>
</form>

Параметры раскрывающегося списка

Используйте data-offset или data-reference, чтобы изменить расположение раскрывающегося списка.

<div>
  <div>
    <button type="button" data-toggle="dropdown" aria-expanded="false" data-offset="10,20">
      Offset
    </button>
    <ul aria-labelledby="dropdownMenuOffset">
      <li><a href="#">Action</a></li>
      <li><a href="#">Another action</a></li>
      <li><a href="#">Something else here</a></li>
    </ul>
  </div>
  <div>
    <button type="button">Reference</button>
    <button type="button" data-toggle="dropdown" aria-expanded="false" data-reference="parent">
      <span>Toggle Dropdown</span>
    </button>
    <ul aria-labelledby="dropdownMenuReference">
      <li><a href="#">Action</a></li>
      <li><a href="#">Another action</a></li>
      <li><a href="#">Something else here</a></li>
      <li><hr></li>
      <li><a href="#">Separated link</a></li>
    </ul>
  </div>
</div>

Применение

С помощью атрибутов данных или JavaScript плагин раскрывающегося списка переключает скрытый контент (раскрывающиеся меню) путем переключения . showкласса на родительский элемент списка. data-toggle="dropdown" атрибут полагался на для закрытия выпадающего меню на уровне приложений, так что это хорошая идея, чтобы всегда использовать его.

На устройствах с сенсорным экраном при открытии раскрывающегося списка mouseoverк непосредственным дочерним <body> элементам элемента добавляются пустые обработчики . Этот, по общему признанию, уродливый хакер необходим, чтобы обойти причуду в делегировании событий iOS, которая в противном случае помешала бы нажатию где-либо за пределами раскрывающегося списка запускать код, закрывающий раскрывающийся список. После закрытия раскрывающегося списка эти дополнительные пустые mouseoverобработчики удаляются.

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

Добавьте data-toggle="dropdown" ссылку или кнопку, чтобы переключить раскрывающийся список.

<div>
  <button type="button" data-toggle="dropdown" aria-expanded="false">
    Dropdown trigger
  </button>
  <ul aria-labelledby="dLabel">
    . ..
  </ul>
</div>

Через JavaScript

Вызов выпадающих списков через JavaScript:

var dropdownElementList = [].slice.call(document.querySelectorAll('.dropdown-toggle'))
var dropdownList = dropdownElementList.map(function (dropdownToggleEl) { 
  return new bootstrap.Dropdown(dropdownToggleEl)
})

Параметры

Параметры можно передавать через атрибуты данных или JavaScript. Для атрибутов данных добавьте имя параметра data-, как в data-offset="".

Имя	Тип	По умолчанию	Описание
offset	номер | строка | функция	0	Смещение раскрывающегося списка относительно его цели. Когда функция используется для определения смещения, она вызывается с объектом, содержащим данные смещения в качестве первого аргумента. Функция должна возвращать объект с такой же структурой. Узел DOM запускающего элемента передается в качестве второго аргумента. Для получения дополнительной информации обратитесь к документации по смещению Popper.js .
flip	логический	true	Разрешить раскрывающемуся списку переворачиваться в случае перекрытия ссылочного элемента. Для получения более подробной информации обратитесь к Popper.js в флип документы .
boundary	строка | элемент	'scrollParent'	Граница ограничения переполнения раскрывающегося меню. Принимает значения 'viewport', 'window', 'scrollParent' или ссылка на HTMLElement (JavaScript только). Для получения дополнительной информации см. Документацию PreventOverflow Popper.js .
reference	строка | элемент	'toggle'	Справочный элемент раскрывающегося меню. Принимает значения 'toggle', 'parent'или в качестве ссылки HTMLElement. Для получения дополнительной информации обратитесь к документации Popper.js referenceObject .
display	строка	'dynamic'	По умолчанию мы используем Popper.js для динамического позиционирования. Отключите это с помощью static.
popperConfig	null | объект	null	Чтобы изменить конфигурацию Popper.js по умолчанию для Bootstrap, см. Конфигурацию Popper.js

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

Методы

Метод	Описание
toggle	Переключает раскрывающееся меню данной панели навигации или навигации с вкладками.
show	Показывает раскрывающееся меню данной панели навигации или навигации с вкладками.
hide	Скрывает раскрывающееся меню данной панели навигации или навигации с вкладками.
update	Обновляет положение раскрывающегося списка элемента.
dispose	Уничтожает раскрывающийся список элемента.
getInstance	Статический метод, который позволяет получить раскрывающийся список, связанный с элементом DOM.

События

Все раскрывающиеся события запускаются в .dropdown-menuродительском элементе и имеют relatedTargetсвойство, значение которого является переключаемым элементом привязки. hide.bs.dropdownи hidden.bs.dropdownсобытия имеют clickEventсвойство (только если исходный тип события click), который содержит объект события для события щелчка.

Метод	Описание
show.bs.dropdown	Срабатывает немедленно при вызове метода экземпляра show.
shown.bs.dropdown	Запускается, когда раскрывающийся список становится видимым для пользователя и переходы CSS завершены.
hide.bs.dropdown	Срабатывает немедленно при вызове метода экземпляра hide.
hidden.bs.dropdown	Запускается, когда раскрывающийся список перестает быть скрытым от пользователя и переходы CSS завершены.

var myDropdown = document.getElementById('myDropdown')
myDropdown.addEventListener('show.bs.dropdown', function () { 
  // do something...
})

Выпадающее меню | WebReference

Bootstrap включает в себя компонент для добавления выпадающих меню. JavaScript входит в JS-файл Bootstrap по умолчанию, так что вы можете использовать его, просто добавив классы CSS. JavaScript в дальнейшем не понадобится.

Пример

Вот пример выпадающего меню.

<link rel=»stylesheet» href=»https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css»> <div> <button type=»button» data-toggle=»dropdown» aria-haspopup=»true» aria-expanded=»false»>О нас</button> <div aria-labelledby=»about-us»> <a href=»#»>Наша история</a> <a href=»#»>Наша команда</a> <a href=»#»>Контакты</a> </div> </div> <script src=»https://code. jquery.com/jquery-3.2.1.slim.min.js»></script> <script src=»https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js»></script> <script src=»https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js»></script>

Объяснение кода

Создание выпадающего меню

Выпадающее меню делается исключительно с помощью HTML, Bootstrap обрабатывает JavaScript за кулисами.

Вот ключевые шаги для создания выпадающего меню Bootstrap:

1. Вставьте все элементы выпадающего меню внутрь элемента с классом .dropdown или другого элемента, который использует position: relative.
2. Добавьте класс .dropdown-toggle и data-toggle=»dropdown» к элементу триггера (то есть к элементу, на который пользователи нажимают, чтобы развернуть выпадающее меню). В приведённом выше примере триггером является элемент <button>.
3. Все пункты выпадающего меню вставьте в <div> с классом .dropdown-menu.
4. Каждый пункт выпадающего меню использует элемент <a> (но также может использовать элемент <button>) с классом . dropdown-item.

Об атрибутах ARIA

Вы можете заметить, что приведённый выше пример содержит некоторые атрибуты ARIA, которые были добавлены в целях доступности. Вот объяснение атрибутов ARIA, используемых совместно с выпадающим меню.

aria-haspopup

Указывает, что элемент содержит всплывающее контекстное меню или меню подуровня. Значением может быть либо true (у элемента есть всплывающее меню), либо false (у элемента нет всплывающего меню).

aria-expanded

Указывает, является ли элемент или другой контролирующий элемент, развёрнутым или свернутым в данный момент. Возможные значения: true, false и undefined (по умолчанию).

aria-labelledby

Определяет элемент (или элементы), который добавляет метки для текущего элемента. Атрибут предоставляет пользователю узнаваемое имя объекта.

Bootstrap 4 против Bootstrap 3

Bootstrap 4 использует другую технику для создания выпадающих меню по сравнению с Bootstrap 3.

Bootstrap 3 применяет выпадающее меню к спискам (используя <ul> и <li>), тогда как в Bootstrap 4 вы можете применить раскрывающееся меню к элементу <ul> или к элементу <div>.

В Bootstrap 4 вы применяете элемент .dropdown к элементу <a> или <button> и применяете класс .dropdown-menu к обёртке.

Всплывающее меню

Вы можете изменить выпадающее меню, чтобы оно стало «всплывающим». Для этого используйте .dropup вместо .dropdown у родительского элемента.

<link rel=»stylesheet» href=»https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css»> <div> <button type=»button» data-toggle=»dropdown» aria-haspopup=»true» aria-expanded=»false»>О нас</button> <div aria-labelledby=»about-us»> <a href=»#»>Наша история</a> <a href=»#»>Наша команда</a> <a href=»#»>Контакты</a> </div> </div> <!— Добавляем немного места, чтобы меню не исчезало из области просмотра —> <style scoped> . dropup {margin-top: 140px;} </style> <script src=»https://code.jquery.com/jquery-3.2.1.slim.min.js»></script> <script src=»https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js»></script> <script src=»https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js»></script>

Выравнивание справа

Вы можете добавить класс .dropdown-menu-right к классу .dropdown-menu, чтобы выровнять меню по правой стороне его родителя.

<link rel=»stylesheet» href=»https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css»> <div> <button type=»button» data-toggle=»dropdown» aria-haspopup=»true» aria-expanded=»false»> Эта широкая кнопка демонстрирует выравнивание </button> <div aria-labelledby=»about-us»> <a href=»#»>Наша история</a> <a href=»#»>Наша команда</a> <a href=»#»>Контакты</a> </div> </div> <script src=»https://code. jquery.com/jquery-3.2.1.slim.min.js»></script> <script src=»https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js»></script> <script src=»https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js»></script>

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

Добавьте заголовок в выпадающее меню путём применения класса .dropdown-header к элементу заголовка (<h2> — <h6>).

<link rel=»stylesheet» href=»https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css»> <div> <button type=»button» data-toggle=»dropdown» aria-haspopup=»true» aria-expanded=»false»>О нас</button> <div aria-labelledby=»about-us»> <h6>О компании</h6> <a href=»#»>Наша история</a> <a href=»#»>Наша команда</a> <h6>Контакты</h6> <a href=»#»>Колл-центр</a> <a href=»#»>Магазины</a> </div> </div> <script src=»https://code. jquery.com/jquery-3.2.1.slim.min.js»></script> <script src=»https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js»></script> <script src=»https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js»></script>

Bootstrap 4 против Bootstrap 3

Bootstrap 3 применяет класс .dropdown-header к элементу <li> (потому что для построения выпадающих меню Bootstrap 3 использовал списки). Bootstrap 4 применяет класс .dropdown-header к элементам заголовка.

Разделители

Добавьте разделители в выпадающее меню, применяя класс .dropdown-divider к элементу <div>.

<link rel=»stylesheet» href=»https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css»> <div> <button type=»button» data-toggle=»dropdown» aria-haspopup=»true» aria-expanded=»false»>О нас</button> <div aria-labelledby=»about-us»> <a href=»#»>Наша история</a> <a href=»#»>Наша команда</a> <div></div> <a href=»#»>Контакты</a> </div> </div> <script src=»https://code. jquery.com/jquery-3.2.1.slim.min.js»></script> <script src=»https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js»></script> <script src=»https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js»></script>

Bootstrap 4 против Bootstrap 3

Bootstrap 3 применяет класс .divider к элементу <li> (потому что для построения выпадающих меню Bootstrap 3 использовал списки). Bootstrap 4 использует вместо этого класс .dropdown-divider и применяет его к элементу <div>.

Отключенные пункты меню

Отключите пункт меню, применив класс .disabled к соответствующему элементу <a>.

<link rel=»stylesheet» href=»https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css»> <div> <button type=»button» data-toggle=»dropdown» aria-haspopup=»true» aria-expanded=»false»>О нас</button> <div aria-labelledby=»about-us»> <a href=»#»>Наша история</a> <a href=»#»>Наша команда</a> <a href=»#»>Контакты</a> </div> </div> <script src=»https://code. jquery.com/jquery-3.2.1.slim.min.js»></script> <script src=»https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js»></script> <script src=»https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js»></script>

Bootstrap 4 против Bootstrap 3

Bootstrap 3 применяет класс .disabled к элементу <li>, Bootstrap 4 применяет его к элементу <a>.

Автор: Йен Диксон

Последнее изменение: 12.03.2020

Выпадающее меню JavaScript

Эта страница содержит код копирования/вставки для создания раскрывающегося меню JavaScript (или «Меню перехода»). В этом меню используются элементы формы HTML и JavaScript, чтобы обеспечить быстрое и отзывчивое меню перехода.

<скрипт> функция jumpto(x){ если (document.form1.jumpmenu.value != «null») { документ.местоположение.href = х } } <имя формы="form1"> form1.jumpmenu.options.selectedIndex].value)»>Перейти к…Домашняя страница QuackitJavaScriptHTMLCSSSQLУчебник по базе данныхУчебное пособие по веб-хостингу Выпадающие меню, подобные этому, иногда называют «меню перехода», потому что оно «переходит» к выбранному URL-адресу, как только вы делаете выбор. (Другие раскрывающиеся меню требуют, чтобы вы нажали кнопку «Перейти» после того, как сделали свой выбор — это безопасный способ, если вы беспокоитесь о пользователях, у которых не включен JavaScript). Приведенный выше код можно разделить на две части: код JavaScript и код HTML. Здесь они разделены: JavaScript Этот код JavaScript состоит из функции, которую мы назвали jumpto . Эта функция использует document.location.href для загрузки URL-адреса, предоставленного меню перехода (которое хранится в параметре x ). Он принимает параметр с именем x , значение, которое мы передаем при вызове функции в нашем HTML. В следующем коде я изменил имя формы на form2 , чтобы избежать конфликта с приведенным выше примером (который использует form1 ). Вы можете назвать свою форму как угодно. <язык сценария="javascript"> функция jumpto(x){ если (document.form2.jumpmenu.value != «null») { документ.местоположение.href = х } } HTML Часть HTML — это то, что отображает фактическое раскрывающееся меню, которое в данном случае является элементом HTML . Здесь вы можете изменить значения на свои собственные URL-адреса. Конечно, вы можете оставить их как есть!

<имя формы="form2"> Перейти к…Домашняя страница QuackitJavaScriptHTMLCSSSQLУчебник по базе данныхУчебное пособие по веб-хостингу Вот оно, ваше собственное выпадающее меню JavaScript! Выпадающий список — Примеры React.js Настраиваемая библиотека React Date Dropdown 26 февраля 2023 г. Выпадающий компонент для реакции 06 декабря 2022 г. Боковая панель React с выпадающим меню 14 ноября 2022 г. Многоуровневое выпадающее меню, вдохновленное Facebook 21 сентября 2022 г. Выпадающая библиотека на основе Reactjs 09 августа 2022 г. React Доступные, отзывчивые вкладки и раскрывающийся список 25 июня 2022 г. Набор расширяемых компонентов React 24 апреля 2022 г. Настраиваемое, минималистичное поле ввода x выбора для React 19 января 2022 г. Плавающий пользовательский интерфейс: библиотека позиционирования JavaScript для всплывающих подсказок, всплывающих окон, раскрывающихся списков и т. д. 02 декабря 2021 г. Компонент React, который обеспечивает функциональность множественного выбора с различными функциями, такими как ограничение выбора. 04 мая 2021 г. Простой компонент Dropdown для React. 02 апреля 2021 г. React Accessible Dropdown Menu Hook. 23 марта 2021 г. Выпадающий компонент без комментариев для реакции. 08 марта 2021 г. Минималистичный раскрывающийся список и компонент автозаполнения с фильтрацией и поддержкой клавиатуры. 29 ноября 2020 г. Настраиваемый раскрывающийся компонент реакции, использующий только CSS. 25 июля 2020 г. Настраиваемая и отзывчивая библиотека боковой панели с выпадающими меню и неограниченным количеством вложенных подменю. 21 июля 2020 г. Простой и легкий компонент раскрывающегося списка множественного выбора с флажками, поиском и выбором всего. 07 мая 2020 г. Минималистичный, простой в использовании и легко настраиваемый раскрывающийся список, созданный с помощью ReactJS. 28 апреля 2020 г. React hook для порталов, который отображает модальные окна, выпадающие списки, всплывающие подсказки и т. д. в или в другом месте. 29 февраля 2020 г. Хороший выпадающий компонент React. 04 ноября 2019 г. Практически любой слой, который можно переключать. Сосредоточьтесь на том, как должен выглядеть ваш слой, и пусть react-laag позаботится о том, где и когда его показывать. 17 октября 2019 г. Набор хуков для создания простых, гибких, совместимых с WAI-ARIA раскрывающихся компонентов React. 10 августа 2019 г. Этот компонент представляет собой комбинацию поля со списком с асинхронной выборкой результатов и модального диалогового окна поиска для дополнительных возможностей фильтрации. 16 января 2019 г. Настраиваемый раскрывающийся список для реакции. 26 декабря 2018 г. Компонент панели навигации, который перемещает элементы панели навигации в раскрывающийся список, если они не помещаются в области содержимого. 03 ноября 2018 г. Раскрывающийся инструментарий React.js без директив. 03 ноября 2018 г. Универсальный инструмент управления фокусом для таких компонентов, как диалоговые окна и раскрывающиеся списки. 13 октября 2018 г. Легкий и быстрый элемент управления для визуализации выбранного компонента, который может отображать данные иерархического дерева. 06 октября 2018 г. Этот проект представляет собой набор компонентов для построения меню. Этот проект хорошо работает для выпадающих меню и меню автозаполнения. 29 сентября 2018 г. Это компонент React для привязки элемента с фиксированной позицией, например раскрывающегося меню, к краю элемента на странице. 02 сентября 2018 г. Простой компонент Dropdown для React, вдохновленный react-select. 20 августа 2018 г. Простое выпадающее меню для React. Обычно используется в качестве меню «Настройки пользователя» на веб-сайтах, где пользователи входят в систему. 29 июля 2018 г. выпадающий компонент реакции. 07 июня 2018 г. Компонент панели навигации, который перемещает элементы панели навигации в раскрывающийся список, если они не помещаются в области содержимого.Навигация по записямHtml textarea input: Тег | htmlbook.ruАдаптивные html шаблоны: Скачать адаптивный шаблон для сайта бесплатноДобавить комментарий Отменить ответВаш адрес email не будет опубликован. Обязательные поля помечены *Комментарий *

Имя *

Email *

Сайт