navbar menu working with 1-level depth submenus

This commit is contained in:
Adam Piontek 2021-07-26 18:02:36 -04:00
parent df1f2a31f6
commit c0dc4aaa13
8 changed files with 133 additions and 94 deletions

View file

@ -0,0 +1,27 @@
/**
* main nav menu helper
*/
var mainMenuDropdownList = [].slice.call(document.querySelectorAll('li.menu-item.menu-item-has-children'));
mainMenuDropdownList.forEach((el) => {
el.addEventListener("click", (e) => {
// get relevant elements and note if menu is already shown
var thisMenuLink = el.querySelector('a.top-navbar-grid-main-menu-item-link');
var thisSubMenu = el.querySelector('ul.sub-menu');
var thisElShown = thisSubMenu.classList.contains('show');
// un-show all menus
document.querySelectorAll('li.menu-item.menu-item-has-children').forEach((otherEl) => {
var otherMenuLink = otherEl.querySelector('a.top-navbar-grid-main-menu-item-link');
var otherSubMenu = otherEl.querySelector('ul.sub-menu');
if (otherMenuLink) { otherMenuLink.classList.remove('shown'); }
if (otherSubMenu) { otherSubMenu.classList.remove('show'); }
});
// finally, if menu was not shown, show it
if (!thisElShown) {
thisMenuLink.classList.add('shown');
thisSubMenu.classList.add('show');
}
});
});

View file

@ -2,8 +2,10 @@
import '../css/app.scss'
// Import svg files for webpack handling
import "../raw/rdnyc-logo.svg"; // rdnyc logo
import '../raw/rdnyc-logo.svg'; // rdnyc logo
// other:
// import '../../node_modules/bootstrap-icons/icons/chevron-down.svg';
// import '../../node_modules/bootstrap-icons/icons/chevron-up.svg';
// import "../../node_modules/@mdi/svg/svg/magnify.svg"; // search form button icon
// import "../../node_modules/@mdi/svg/svg/home.svg";
// import "../../node_modules/@mdi/svg/svg/information.svg";
@ -20,6 +22,8 @@ import 'bootstrap/js/dist/dropdown';
// import navbar burger code
import "./_hamburger-helper";
// import navbar dropdown menu helper code
import "./_main-nav-menu-helper";
// highlight any code blocks tagged with class 'to-highlight'
document.addEventListener('DOMContentLoaded', (event) => {