Выпадающее меню на 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 protected]">
    </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 в дальнейшем не понадобится.

Пример

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

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:

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

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, чтобы выровнять меню по правой стороне его родителя.

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

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

Bootstrap 4 против Bootstrap 3

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

Разделители

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

Bootstrap 4 против Bootstrap 3

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

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

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

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"> . Здесь вы можете изменить значения на свои собственные URL-адреса. Конечно, вы можете оставить их как есть!

<имя формы="form2">

Имя *

Email *

Сайт

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

Обзор

Доступность

Примеры

Одна кнопка

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

Размеры

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

Направления

Dropup

Dropright

Dropleft

Active (активный)

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

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

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

Разделители

Текст

Формы

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

Применение

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

Через JavaScript

Параметры

Методы

События

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

Пример

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

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

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

Bootstrap 4 против Bootstrap 3

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

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

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

Bootstrap 4 против Bootstrap 3

Разделители

Bootstrap 4 против Bootstrap 3

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

Bootstrap 4 против Bootstrap 3

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

Рубрики