adam/wp-rdnyc
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

fixed menu display to support default bootstrap menus with minimal styling

Browse source
This commit is contained in:
Adam Piontek 2021-07-26 20:51:08 -04:00
parent 9d3d8ede63
commit 311b918077
7 changed files with 92 additions and 95 deletions

104
assets/css/_nav-bar-help.scss
View file

@ -15,7 +15,6 @@ nav#top-navbar-grid-outer {
@include media-breakpoint-up(md) {
grid-template-rows: calc(5.3rem / 2) calc(5.3rem / 2) auto;
}
// grid-auto-rows: calc(4.3rem / 2);
div#top-navbar-grid-brand-outer {
grid-column-start: 1;
grid-column-end: 2;
@ -130,7 +129,7 @@ nav#top-navbar-grid-outer {
@include media-breakpoint-up(lg) {
padding: 0 0 0 1.5em !important;
}
a.top-navbar-grid-main-menu-item-link {
.top-navbar-grid-main-menu-item-link {
@extend .fw-bold;
@extend .text-uppercase;
@extend .text-decoration-none;
@ -140,72 +139,59 @@ nav#top-navbar-grid-outer {
text-decoration-color: $primary !important;
color: $gray-300;
}
&.active {
color: $primary;
}
}
&.menu-item-has-children {
@extend .dropdown;
& > a.top-navbar-grid-main-menu-item-link {
@extend .dropdown-toggle;
cursor: pointer;
&.shown {
color: $primary;
text-decoration: none !important;
&:hover {
text-decoration: none !important;
}
.dropdown-toggle {
cursor: pointer;
div.icon.baseline {
transform: rotate(0deg);
transition: transform 150ms ease;
svg {
top: inherit;
height: .75em;
width: .75em;
}
}
ul.sub-menu {
&.show {
color: $primary;
&:hover {
text-decoration: none !important;
}
div.icon.baseline {
transform: rotate(180deg);
transition: transform 150ms ease;
}
}
&::after {
display: none;
margin: 0;
color: $gray-300;
list-style: none;
min-width: 10rem;
background-color: tint-color($spaceblue-800, 5%);
border-radius: 0.25rem;
font-size: 1rem;
&.show {
}
}
.dropdown-menu.dropdown-menu-dark {
background-color: shade-color($gray-800, 50%);
li.menu-item {
padding: 4px 0 !important;
.top-navbar-grid-main-menu-item-link {
display: block;
}
@include media-breakpoint-down(lg) {
position: relative;
margin-top: 0.25em;
padding: 0.25em 1em 0 1em;
background-clip: border-box;
border: 1px solid $gray-700;
word-wrap: break-word;
}
@include media-breakpoint-up(lg) {
position: absolute;
padding: .5rem 0;
background-clip: padding-box;
border: 1px solid rgba(0,0,0,0.15);
box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.15);
z-index: 1000;
inset: 1.5em 0px auto auto;
text-align: left;
li.menu-item {
padding: 8px 0 8px 0 !important;
a.top-navbar-grid-main-menu-item-link {
text-align: left;
display: block;
width: 100%;
padding: .25rem 1rem 0 1rem;
clear: both;
font-weight: inherit;
white-space: nowrap;
border: 0;
text-decoration: none;
width: 100%;
padding: .25rem 1rem 0 1rem;
&:hover {
text-decoration: none !important;
color: $gray-900;
background-color: $primary;
}
&.active {
color: $gray-900;
background-color: shade-color($primary, 25%);
&:hover {
text-decoration: none !important;
background-color: $primary;
}
}
}
}
// &:hover {
// ul.sub-menu {
// display: block;
// }
// }
}
}
}
}
}

29
assets/js/_main-nav-menu-helper.js
View file

@ -1,29 +0,0 @@
/**
* main nav menu helper
*/
var mainMenuDropdownList = [].slice.call(document.querySelectorAll('li.menu-item.menu-item-has-children > a.top-navbar-grid-main-menu-item-link'));
mainMenuDropdownList.forEach((thisMenuLink) => {
thisMenuLink.addEventListener("click", (e) => {
e.preventDefault(); // Cancel the native event
e.stopPropagation(); // Don't bubble/capture the event any further
// get relevant elements and note if menu is already shown
var thisSubMenu = thisMenuLink.parentElement.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');
}
});
});

6
assets/js/main.js
View file

@ -4,8 +4,8 @@ import '../css/app.scss'
// Import svg files for webpack handling
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/bootstrap-icons/icons/chevron-down.svg';
import '../../node_modules/bootstrap-icons/icons/search.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";
@ -22,8 +22,6 @@ 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) => {