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
|
@ -63,3 +63,4 @@ $navbar-dark-active-color: $white;
|
|||
$navbar-dark-disabled-color: rgba($white, 0.45);
|
||||
$navbar-dark-toggler-border-color: rgba($white, 0.3);
|
||||
$component-active-bg: $primary;
|
||||
// $custom-dropdown-menu-background:
|
|
@ -23,11 +23,11 @@
|
|||
@import "../../node_modules/bootstrap/scss/forms";
|
||||
@import "../../node_modules/bootstrap/scss/buttons";
|
||||
@import "../../node_modules/bootstrap/scss/transitions";
|
||||
// @import "../../node_modules/bootstrap/scss/dropdown";
|
||||
@import "../../node_modules/bootstrap/scss/dropdown";
|
||||
// @import "../../node_modules/bootstrap/scss/button-group";
|
||||
@import "../../node_modules/bootstrap/scss/nav";
|
||||
@import "../../node_modules/bootstrap/scss/navbar";
|
||||
// @import "../../node_modules/bootstrap/scss/card";
|
||||
// @import "../../node_modules/bootstrap/scss/nav";
|
||||
// @import "../../node_modules/bootstrap/scss/navbar";
|
||||
@import "../../node_modules/bootstrap/scss/card";
|
||||
// @import "../../node_modules/bootstrap/scss/accordion";
|
||||
// @import "../../node_modules/bootstrap/scss/breadcrumb";
|
||||
// @import "../../node_modules/bootstrap/scss/pagination";
|
||||
|
|
|
@ -93,17 +93,19 @@ nav#top-navbar-grid-outer {
|
|||
}
|
||||
}
|
||||
div#top-navbar-grid-main-menu-outer {
|
||||
@extend .d-none;
|
||||
@include media-breakpoint-down(lg) {
|
||||
display: none;
|
||||
&.show, &.collapsing {
|
||||
@extend .d-grid;
|
||||
display: grid;
|
||||
grid-column-start: 1;
|
||||
grid-column-end: 3;
|
||||
grid-row-start: 3;
|
||||
grid-row-end: 4;
|
||||
justify-items: center;
|
||||
}
|
||||
@extend .d-lg-grid;
|
||||
}
|
||||
@include media-breakpoint-up(lg) {
|
||||
display: grid;
|
||||
grid-column-start: 2;
|
||||
grid-column-end: 3;
|
||||
grid-row-start: 2;
|
||||
|
@ -114,7 +116,7 @@ nav#top-navbar-grid-outer {
|
|||
ul#menu-navbar-main-menu {
|
||||
@extend .d-grid;
|
||||
grid-template-columns: 1fr;
|
||||
list-style-type: none;
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 1em 0 0 0;
|
||||
@extend .d-lg-inline;
|
||||
|
@ -139,6 +141,74 @@ nav#top-navbar-grid-outer {
|
|||
color: $gray-300;
|
||||
}
|
||||
}
|
||||
&.menu-item-has-children {
|
||||
@extend .dropdown;
|
||||
& > a.top-navbar-grid-main-menu-item-link {
|
||||
@extend .dropdown-toggle;
|
||||
&:hover {
|
||||
@extend .text-decoration-none;
|
||||
}
|
||||
&.shown {
|
||||
color: $primary;
|
||||
}
|
||||
}
|
||||
ul.sub-menu {
|
||||
display: none;
|
||||
color: $gray-300;
|
||||
list-style: none;
|
||||
min-width: 10rem;
|
||||
background-color: tint-color($spaceblue-800, 5%);
|
||||
&.show {
|
||||
display: block;
|
||||
}
|
||||
@include media-breakpoint-down(lg) {
|
||||
position: relative;
|
||||
color: $gray-300;
|
||||
// background-color: shade-color($gray-900, 50%);
|
||||
padding: 0.25em 1em 0 1em;
|
||||
margin: 0;
|
||||
background-clip: border-box;
|
||||
word-wrap: break-word;
|
||||
border: 1px solid $gray-700;
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
@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;
|
||||
z-index: 1000;
|
||||
inset: -1em 0px auto auto;
|
||||
transform: translate(0px, 40px);
|
||||
padding: .5rem 0;
|
||||
font-size: 1rem;
|
||||
text-align: left;
|
||||
background-clip: padding-box;
|
||||
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;
|
||||
clear: both;
|
||||
font-weight: inherit;
|
||||
white-space: nowrap;
|
||||
border: 0;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
// &:hover {
|
||||
// ul.sub-menu {
|
||||
// display: block;
|
||||
// }
|
||||
// }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
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) => {
|
||||
|
|
68
header.php
68
header.php
|
@ -89,7 +89,7 @@ namespace WP_RDNYC;
|
|||
// echo '<section>';
|
||||
wp_nav_menu([
|
||||
'theme_location' => 'navbar-main-menu',
|
||||
'depth' => 1,
|
||||
'depth' => 2,
|
||||
'menu' => 'navbar-main-menu',
|
||||
'container' => 'div',
|
||||
'container_id' => 'top-navbar-grid-main-menu-outer',
|
||||
|
@ -102,69 +102,3 @@ namespace WP_RDNYC;
|
|||
?>
|
||||
|
||||
</nav>
|
||||
|
||||
|
||||
|
||||
<nav class="navbar navbar-expand-lg navbar-dark d-none">
|
||||
|
||||
<div id="navbarInnerContainer">
|
||||
|
||||
<h1>
|
||||
<!-- my-0 py-0 -->
|
||||
<?php
|
||||
printf( '<a class="navbar-brand" href="%1$s" rel="home">',
|
||||
esc_url( home_url( '/' ) )
|
||||
);
|
||||
|
||||
echo inline_svg( 'svg-rdnyc-logo',
|
||||
array(
|
||||
'svg_class' => 'img header-logo',
|
||||
'svg_title' => 'Recovery Dharma New York City',
|
||||
'svg_role_img' => true,
|
||||
'svg_aria_hidden' => false
|
||||
)
|
||||
);
|
||||
|
||||
echo "</a>";
|
||||
?>
|
||||
</h1>
|
||||
|
||||
<!-- collapsed navbar-toggler -->
|
||||
<!-- <button class="hamburger hamburger--squeeze" id="navbarSupportedContentToggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="hamburger-box">
|
||||
<span class="hamburger-inner"></span>
|
||||
</span>
|
||||
</button> -->
|
||||
|
||||
<?php
|
||||
// using widget to include social icons, so they can be edited by wordpress users
|
||||
if ( is_active_sidebar( 'navbar-socialicon-widget' ) ) :
|
||||
dynamic_sidebar( 'navbar-socialicon-widget' );
|
||||
endif;
|
||||
?>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="collapse navbar-collapse" id="navbarSupportedContent">
|
||||
|
||||
<?php
|
||||
// main navigation menu
|
||||
if ( has_nav_menu( 'navbar-main-menu' ) ) {
|
||||
// echo '<section>';
|
||||
wp_nav_menu([
|
||||
'theme_location' => 'navbar-main-menu',
|
||||
'depth' => 1,
|
||||
'menu' => 'navbar-main-menu',
|
||||
// 'container' => 'div',
|
||||
// 'container_id' => 'section-navbar-main-menu',
|
||||
'menu_class' => 'navbar-nav',
|
||||
'menu_item_class' => 'nav-item',
|
||||
'link_class' => 'nav-link'
|
||||
]);
|
||||
// echo '</section>';
|
||||
}
|
||||
?>
|
||||
|
||||
</div>
|
||||
|
||||
</nav>
|
||||
|
|
25
package-lock.json
generated
25
package-lock.json
generated
|
@ -11,9 +11,9 @@
|
|||
"dependencies": {
|
||||
"@fontsource/overpass": "^4.x",
|
||||
"@fontsource/permanent-marker": "^4.x",
|
||||
"@mdi/svg": "^5.x",
|
||||
"@popperjs/core": "^2.x",
|
||||
"bootstrap": "^5.x",
|
||||
"bootstrap-icons": "^1.5.0",
|
||||
"hamburgers": "^1.x",
|
||||
"regenerator": "^0.14.7"
|
||||
},
|
||||
|
@ -1586,11 +1586,6 @@
|
|||
"resolved": "https://registry.npmjs.org/@fontsource/permanent-marker/-/permanent-marker-4.5.0.tgz",
|
||||
"integrity": "sha512-pQD7//FSAXNShAa8AfY5B9SKP3CiLLepx8iQlBfp3QdUNbQ4q8vVMrx8le7y6nrhr3+5peeNPYf9bin9+ZYkow=="
|
||||
},
|
||||
"node_modules/@mdi/svg": {
|
||||
"version": "5.9.55",
|
||||
"resolved": "https://registry.npmjs.org/@mdi/svg/-/svg-5.9.55.tgz",
|
||||
"integrity": "sha512-gO0ZpKIeCn9vFg46QduK9MM+n1fuCNwSdcdlBTtbafnnuvwLveK2uj+byhdLtg/8VJGXDhp+DJ35QUMbeWeULA=="
|
||||
},
|
||||
"node_modules/@nodelib/fs.scandir": {
|
||||
"version": "2.1.5",
|
||||
"resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
|
||||
|
@ -2200,6 +2195,14 @@
|
|||
"@popperjs/core": "^2.9.2"
|
||||
}
|
||||
},
|
||||
"node_modules/bootstrap-icons": {
|
||||
"version": "1.5.0",
|
||||
"resolved": "https://registry.npmjs.org/bootstrap-icons/-/bootstrap-icons-1.5.0.tgz",
|
||||
"integrity": "sha512-44feMc7DE1Ccpsas/1wioN8ewFJNquvi5FewA06wLnqct7CwMdGDVy41ieHaacogzDqLfG8nADIvMNp9e4bfbA==",
|
||||
"engines": {
|
||||
"node": ">=10"
|
||||
}
|
||||
},
|
||||
"node_modules/brace-expansion": {
|
||||
"version": "1.1.11",
|
||||
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
|
||||
|
@ -8869,11 +8872,6 @@
|
|||
"resolved": "https://registry.npmjs.org/@fontsource/permanent-marker/-/permanent-marker-4.5.0.tgz",
|
||||
"integrity": "sha512-pQD7//FSAXNShAa8AfY5B9SKP3CiLLepx8iQlBfp3QdUNbQ4q8vVMrx8le7y6nrhr3+5peeNPYf9bin9+ZYkow=="
|
||||
},
|
||||
"@mdi/svg": {
|
||||
"version": "5.9.55",
|
||||
"resolved": "https://registry.npmjs.org/@mdi/svg/-/svg-5.9.55.tgz",
|
||||
"integrity": "sha512-gO0ZpKIeCn9vFg46QduK9MM+n1fuCNwSdcdlBTtbafnnuvwLveK2uj+byhdLtg/8VJGXDhp+DJ35QUMbeWeULA=="
|
||||
},
|
||||
"@nodelib/fs.scandir": {
|
||||
"version": "2.1.5",
|
||||
"resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
|
||||
|
@ -9374,6 +9372,11 @@
|
|||
"integrity": "sha512-1Ge963tyEQWJJ+8qtXFU6wgmAVj9gweEjibUdbmcCEYsn38tVwRk8107rk2vzt6cfQcRr3SlZ8aQBqaD8aqf+Q==",
|
||||
"requires": {}
|
||||
},
|
||||
"bootstrap-icons": {
|
||||
"version": "1.5.0",
|
||||
"resolved": "https://registry.npmjs.org/bootstrap-icons/-/bootstrap-icons-1.5.0.tgz",
|
||||
"integrity": "sha512-44feMc7DE1Ccpsas/1wioN8ewFJNquvi5FewA06wLnqct7CwMdGDVy41ieHaacogzDqLfG8nADIvMNp9e4bfbA=="
|
||||
},
|
||||
"brace-expansion": {
|
||||
"version": "1.1.11",
|
||||
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
|
||||
|
|
|
@ -13,9 +13,9 @@
|
|||
"dependencies": {
|
||||
"@fontsource/overpass": "^4.x",
|
||||
"@fontsource/permanent-marker": "^4.x",
|
||||
"@mdi/svg": "^5.x",
|
||||
"@popperjs/core": "^2.x",
|
||||
"bootstrap": "^5.x",
|
||||
"bootstrap-icons": "^1.5.0",
|
||||
"hamburgers": "^1.x",
|
||||
"regenerator": "^0.14.7"
|
||||
},
|
||||
|
|
Loading…
Reference in a new issue