navbar menu working with 1-level depth submenus
This commit is contained in:
parent
df1f2a31f6
commit
c0dc4aaa13
8 changed files with 133 additions and 94 deletions
assets/js
27
assets/js/_main-nav-menu-helper.js
Normal file
27
assets/js/_main-nav-menu-helper.js
Normal 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');
|
||||
}
|
||||
});
|
||||
});
|
|
@ -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) => {
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue