Простое выпадающее меню
Установка
npm install dobrosite-simple-menu
После чего подключите файл node_modules/dobrosite-simple-menu/lib/ds-simple-menu.js
к своим
страницам.
Использование
Разметка может быть любой, но должна включать в себя два блока:
- само меню;
- кнопку показа/скрытия меню.
Пример:
<button id="nav-main-button">Меню</button>
<nav class="nav-main" aria-labelledby="nav-main-button">...</nav>
<script>
$('.nav-main').dsSimpleMenu()
</script>
Обратите внимание на атрибут aria-labelledby — он должен содержать идентификатор кнопки меню.
Если нет возможности задать атрибут aria-labelledby
, можно указать кнопку в настройках через
параметр toggleButton
:
<button class="nav-button">Меню</button>
<nav class="nav-main">...</nav>
<script>
$('.nav-main').dsSimpleMenu({toggleButton: $('.nav-button')})
</script>
Что делает сценарий
При открытии меню:
- элементу меню добавляется атрибут
aria-expanded="true"
; - кнопке меню добавляется атрибут
aria-pressed="true"
.
При закрытии меню эти атрибуты устанавливаются в false
.
Настройки
Свойства
disableBodyScroll
Boolean (по умолчанию false)
Если true
, то при открытом меню body будет задан стиль overflow: hidden
чтобы предотвратить
прокрутку страницы.
scrollToTop
Boolean (по умолчанию false)
Если true
, то при открытии меню страница будет прокручена к началу.
toggleButton
jQuery (по умолчанию null)
Позволяет передать объект jQuery, определяющий какие элементы при активации должны открывать и закрывать меню.
События
Всем обработчикам событий в качестве первого аргумента передаётся объект Menu.
onClose
Function
Вызывается при закрытии меню.
onOpen
Function
Вызывается при открытии меню.
API
Menu
Menu::close()
Закрывает меню. Если меню было открыто, порождает событие onClose.
Menu::open()
Открывает меню. Если меню было закрыто, порождает событие onOpen.
Menu::toggle()
Переключает состояние меню.