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

improved menu styling and handling. menu buttons that might have links now work (link is ignored)

Browse source
This commit is contained in:
Adam Piontek 2021-07-26 19:11:33 -04:00
parent c0dc4aaa13
commit 9d3d8ede63
2 changed files with 23 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -145,54 +145,51 @@ nav#top-navbar-grid-outer {
@extend .dropdown; @extend .dropdown;
& > a.top-navbar-grid-main-menu-item-link { & > a.top-navbar-grid-main-menu-item-link {
@extend .dropdown-toggle; @extend .dropdown-toggle;
&:hover { cursor: pointer;
@extend .text-decoration-none;
}
&.shown { &.shown {
color: $primary; color: $primary;
text-decoration: none !important;
&:hover {
text-decoration: none !important;
}
} }
} }
ul.sub-menu { ul.sub-menu {
display: none; display: none;
margin: 0;
color: $gray-300; color: $gray-300;
list-style: none; list-style: none;
min-width: 10rem; min-width: 10rem;
background-color: tint-color($spaceblue-800, 5%); background-color: tint-color($spaceblue-800, 5%);
border-radius: 0.25rem;
font-size: 1rem;
&.show { &.show {
display: block; display: block;
} }
@include media-breakpoint-down(lg) { @include media-breakpoint-down(lg) {
position: relative; position: relative;
color: $gray-300; margin-top: 0.25em;
// background-color: shade-color($gray-900, 50%);
padding: 0.25em 1em 0 1em; padding: 0.25em 1em 0 1em;
margin: 0;
background-clip: border-box; background-clip: border-box;
word-wrap: break-word;
border: 1px solid $gray-700; border: 1px solid $gray-700;
border-radius: 0.25rem; word-wrap: break-word;
} }
@include media-breakpoint-up(lg) { @include media-breakpoint-up(lg) {
margin: 0;
border: 1px solid rgba(0,0,0,0.15);
border-color: rgba(0, 0, 0, 0.15);
border-radius: 0.25rem;
box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.15);
position: absolute; position: absolute;
z-index: 1000;
inset: -1em 0px auto auto;
transform: translate(0px, 40px);
padding: .5rem 0; padding: .5rem 0;
font-size: 1rem;
text-align: left;
background-clip: padding-box; 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 { li.menu-item {
padding: 8px 0 8px 0 !important; padding: 8px 0 8px 0 !important;
a.top-navbar-grid-main-menu-item-link { a.top-navbar-grid-main-menu-item-link {
text-align: left; text-align: left;
display: block; display: block;
width: 100%; width: 100%;
padding: .25rem 1rem; padding: .25rem 1rem 0 1rem;
clear: both; clear: both;
font-weight: inherit; font-weight: inherit;
white-space: nowrap; white-space: nowrap;

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

@ -1,13 +1,15 @@
/** /**
* main nav menu helper * main nav menu helper
*/ */
var mainMenuDropdownList = [].slice.call(document.querySelectorAll('li.menu-item.menu-item-has-children')); 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
mainMenuDropdownList.forEach((el) => {
el.addEventListener("click", (e) => {
// get relevant elements and note if menu is already shown // get relevant elements and note if menu is already shown
var thisMenuLink = el.querySelector('a.top-navbar-grid-main-menu-item-link'); var thisSubMenu = thisMenuLink.parentElement.querySelector('ul.sub-menu');
var thisSubMenu = el.querySelector('ul.sub-menu');
var thisElShown = thisSubMenu.classList.contains('show'); var thisElShown = thisSubMenu.classList.contains('show');
// un-show all menus // un-show all menus