Menu
Стандартный HTML-тег <dialog> в роли меню. Варианты опций:- menuitem
- menuitemradio
- menuitemcheckbox
<cb-menu>
<dialog class="cb-modal">
<menu>
<div class="cb-option" role="menuitem">Опция 1</div>
<div class="cb-option" role="menuitem">Опция 2</div>
<div class="cb-option" role="menuitem">Опция 3</div>
</menu>
</dialog>
<button class="cb-button-board">Меню</button>
</cb-menu>Постоянно открытое
Для этого элементуdialog добавьте класс cb-permanent и атрибут open<dialog class="cb-modal cb-permanent" open>Menubar
Дополнительные подменю. Открывающие кнопки находятся в первом диалоге. Сами диалоги идут друг за другом. Открывающим кнопкам и диалогам необходима связь через атрибут submenu="id1" с уникальным ID для каждого подменю.<cb-menu>
<dialog class="cb-modal">
<menu>
<div class="cb-option cb-select" role="menuitem"
submenu="letters"> Буквы
</div>
<div class="cb-option" role="menuitem">Опция 1</div>
<div class="cb-option" role="menuitem">Опция 2</div>
<div class="cb-option" role="menuitem">Опция 3</div>
<div class="cb-option cb-select" role="menuitem"
submenu="numbers"> Цифры
</div>
</menu>
</dialog>
<dialog class="cb-submodal" submenu="letters">
<menu>
<cb-menu-backnav sticky></cb-menu-backnav>
<div class="cb-option" role="menuitem">Опция a</div>
<div class="cb-option" role="menuitem">Опция b</div>
<div class="cb-option" role="menuitem">Опция c</div>
</menu>
</dialog>
<dialog class="cb-submodal" submenu="numbers">
<menu>
<cb-menu-backnav sticky></cb-menu-backnav>
<div class="cb-option" role="menuitem">Опция 1</div>
<div class="cb-option" role="menuitem">Опция 2</div>
<div class="cb-option" role="menuitem">Опция 3</div>
</menu>
</dialog>
<button class="cb-button-board">Menubar</button>
</cb-menu>Выбранная опция
Опциям с ролью menuitemradio или menuitemcheckbox предусмотрена подсветка активной опции.- Добавьте класс cb-marker на элемент menu
<cb-menu>
<dialog class="cb-modal">
<menu>
<div class="cb-option" role="menuitemradio">Опция 1</div>
<div class="cb-option" role="menuitemradio" aria-checked="true">Опция 2</div>
<div class="cb-option" role="menuitemradio">Опция 3</div>
</menu>
</dialog>
<button class="cb-button-board">Меню</button>
</cb-menu>- Альтернативный вариант — добавьте в опцию тег cb-checkbox, cb-toggle или cb-radio
<cb-menu>
<dialog class="cb-modal">
<menu>
<div class="cb-option cb-jcsb" role="menuitemradio">Опция 1 <cb-radio></cb-radio></div>
<div class="cb-option cb-jcsb" role="menuitemradio">Опция 2 <cb-radio></cb-radio></div>
<div class="cb-option cb-jcsb" role="menuitemradio">Опция 3 <cb-radio></cb-radio></div>
<div class="cb-option cb-jcsb" role="menuitemcheckbox">Опция 4 <cb-checkbox></cb-checkbox></div>
<div class="cb-option cb-jcsb" role="menuitemcheckbox">Опция 5 <cb-toggle ></cb-toggle></div>
</menu>
</dialog>
<button class="cb-button-board">Меню</button>
</cb-menu>Направление
Чтобы изменить направление открытия, добавьте элементу dialog один из четырех классов: cb-to-top cb-to-right cb-to-bottom cb-to-left
<cb-menu>
<dialog class="cb-modal cb-to-left">
<menu>
<div class="cb-option" role="menuitem">Опция 1</div>
<div class="cb-option" role="menuitem">Опция 2</div>
<div class="cb-option" role="menuitem">Опция 3</div>
</menu>
</dialog>
<button class="cb-button-board">Меню</button>
</cb-menu>
Можно создать свою анимацию переопределив CSS переменные:
.cb-to-top {
--menu-direction: 'top out';
transform-origin: 50% 100%;
--horiz: 0.9;
--vert: 0.7;
}
.cb-to-right {
--menu-direction: 'right out';
transform-origin: 0% 50%;
--horiz: 0.7;
--vert: 0.9;
}
.cb-to-bottom {
--menu-direction: 'bottom out';
transform-origin: 50% 0;
--horiz: 0.9;
--vert: 0.7;
}
.cb-to-left {
--menu-direction: 'left out';
transform-origin: 100% 50%;
--horiz: 0.7;
--vert: 0.9;
}- трансформации по осям --horiz и --vert от 0 до 1.
- параметр "out" в переменной --menu-direction открывает меню рядом с кнопкой, если его убрать меню откроется поверх кнопки.
JavaScript
const menu = document.querySelector('cb-menu')menu.button = HTMLElement
Назначить кнопку, по клику которой откроется меню.
menu.button = {x: y:}
Назначить координаты, где откроется меню.
menu.dialogElement
Элемент
dialogmenu.contentElemen
Ссылка на элемент
menu с опциями.Создать меню
cb.crMenu(className, optionsHTML = '', buttonHTML = '')События
beforeOpen
Вызывается перед открытием.
menu.addEventListener('beforeOpen', callback)open
Вызывается после открытия.
menu.addEventListener('open' callback)pickItem
Опция выбрана. Объект события
detail ссылается на опцию item.menu.addEventListener('pickItem', e => {
const {item} = e.detail
console.log(item)
})