143 lines
3.0 KiB
JavaScript
143 lines
3.0 KiB
JavaScript
/**
|
|
* Menu
|
|
*/
|
|
|
|
'use strict';
|
|
|
|
(function () {
|
|
// ? This JS is for menu demo purpose only
|
|
|
|
// Vertical
|
|
const menu1 = document.querySelector('#menu-1'),
|
|
menu1Btn = document.querySelector('#menu-1-toggle-collapsed');
|
|
|
|
if (menu1) {
|
|
new Menu(menu1);
|
|
}
|
|
if (menu1Btn) {
|
|
menu1Btn.onclick = function () {
|
|
menu1.classList.toggle('menu-collapsed');
|
|
};
|
|
}
|
|
|
|
// Horizontal
|
|
const menu2 = document.querySelector('#menu-2');
|
|
if (menu2) {
|
|
new Menu(menu2, {
|
|
orientation: 'horizontal'
|
|
});
|
|
}
|
|
|
|
// Horizontal (Show dropdown on hover)
|
|
const menu3 = document.querySelector('#menu-3');
|
|
if (menu3) {
|
|
new Menu(menu3, {
|
|
orientation: 'horizontal',
|
|
showDropdownOnHover: true
|
|
});
|
|
}
|
|
|
|
// No animation
|
|
const menu5 = document.querySelector('#menu-5'),
|
|
menu5Btn = document.querySelector('#menu-5-toggle-collapsed');
|
|
if (menu5) {
|
|
new Menu(menu5, {
|
|
animate: false
|
|
});
|
|
}
|
|
|
|
if (menu5Btn) {
|
|
menu5Btn.onclick = function () {
|
|
menu5.classList.toggle('menu-collapsed');
|
|
};
|
|
}
|
|
const menu6 = document.querySelector('#menu-6');
|
|
if (menu6) {
|
|
new Menu(menu6, {
|
|
orientation: 'horizontal',
|
|
animate: false,
|
|
closeChildren: true
|
|
});
|
|
}
|
|
|
|
// No accordion
|
|
const menu7 = document.querySelector('#menu-7'),
|
|
menu7Btn = document.querySelector('#menu-7-toggle-collapsed');
|
|
if (menu7) {
|
|
new Menu(menu7, {
|
|
accordion: false
|
|
});
|
|
}
|
|
if (menu7Btn) {
|
|
menu7Btn.onclick = function () {
|
|
menu7.classList.toggle('menu-collapsed');
|
|
};
|
|
}
|
|
|
|
const menu8 = document.querySelector('#menu-8');
|
|
if (menu8) {
|
|
new Menu(menu8, {
|
|
orientation: 'horizontal',
|
|
accordion: false
|
|
});
|
|
}
|
|
|
|
// Elements
|
|
const menus9List = document.querySelectorAll('.menus-9'),
|
|
menu9Btn = document.querySelector('#menus-9-toggle-collapsed');
|
|
if (menus9List) {
|
|
menus9List.forEach(e => {
|
|
new Menu(e);
|
|
});
|
|
}
|
|
if (menu9Btn) {
|
|
menu9Btn.onclick = function () {
|
|
menus9List.forEach(e => {
|
|
e.classList.toggle('menu-collapsed');
|
|
});
|
|
};
|
|
}
|
|
|
|
// Colors (vertical)
|
|
const menus10List = document.querySelectorAll('.menus-10'),
|
|
menu10Btn = document.querySelector('#menus-10-toggle-collapsed');
|
|
if (menus10List) {
|
|
menus10List.forEach(e => {
|
|
new Menu(e);
|
|
});
|
|
}
|
|
if (menu10Btn) {
|
|
menu10Btn.onclick = function () {
|
|
menus10List.forEach(e => {
|
|
e.classList.toggle('menu-collapsed');
|
|
});
|
|
};
|
|
}
|
|
|
|
// Colors (horizontal)
|
|
const menus11List = document.querySelectorAll('.menus-11');
|
|
if (menus11List) {
|
|
menus11List.forEach(e => {
|
|
new Menu(e, {
|
|
orientation: 'horizontal'
|
|
});
|
|
});
|
|
}
|
|
|
|
// With background (For Docs)
|
|
const menus12List = document.querySelectorAll('.menus-12'),
|
|
menu12Btn = document.querySelector('#menus-12-toggle-collapsed');
|
|
if (menus12List) {
|
|
menus12List.forEach(e => {
|
|
new Menu(e);
|
|
});
|
|
}
|
|
if (menu12Btn) {
|
|
menu12Btn.onclick = function () {
|
|
menus12List.forEach(e => {
|
|
e.classList.toggle('menu-collapsed');
|
|
});
|
|
};
|
|
}
|
|
})();
|