fixed menu display to support default bootstrap menus with minimal styling
This commit is contained in:
parent
9d3d8ede63
commit
311b918077
7 changed files with 92 additions and 95 deletions
|
|
@ -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,71 +139,58 @@ nav#top-navbar-grid-outer {
|
|||
text-decoration-color: $primary !important;
|
||||
color: $gray-300;
|
||||
}
|
||||
}
|
||||
&.menu-item-has-children {
|
||||
@extend .dropdown;
|
||||
& > a.top-navbar-grid-main-menu-item-link {
|
||||
@extend .dropdown-toggle;
|
||||
cursor: pointer;
|
||||
&.shown {
|
||||
&.active {
|
||||
color: $primary;
|
||||
}
|
||||
}
|
||||
.dropdown-toggle {
|
||||
cursor: pointer;
|
||||
div.icon.baseline {
|
||||
transform: rotate(0deg);
|
||||
transition: transform 150ms ease;
|
||||
svg {
|
||||
top: inherit;
|
||||
height: .75em;
|
||||
width: .75em;
|
||||
}
|
||||
}
|
||||
&.show {
|
||||
color: $primary;
|
||||
text-decoration: none !important;
|
||||
&:hover {
|
||||
text-decoration: none !important;
|
||||
}
|
||||
div.icon.baseline {
|
||||
transform: rotate(180deg);
|
||||
transition: transform 150ms ease;
|
||||
}
|
||||
}
|
||||
ul.sub-menu {
|
||||
&::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 {
|
||||
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;
|
||||
.dropdown-menu.dropdown-menu-dark {
|
||||
background-color: shade-color($gray-800, 50%);
|
||||
li.menu-item {
|
||||
padding: 8px 0 8px 0 !important;
|
||||
a.top-navbar-grid-main-menu-item-link {
|
||||
text-align: left;
|
||||
padding: 4px 0 !important;
|
||||
.top-navbar-grid-main-menu-item-link {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: .25rem 1rem 0 1rem;
|
||||
clear: both;
|
||||
font-weight: inherit;
|
||||
white-space: nowrap;
|
||||
border: 0;
|
||||
text-decoration: none;
|
||||
&: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;
|
||||
// }
|
||||
// }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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');
|
||||
}
|
||||
});
|
||||
});
|
||||
|
|
@ -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) => {
|
||||
|
|
|
|||
|
|
@ -52,4 +52,5 @@ function inline_svg( $svg_name, $atts = array() ) {
|
|||
return $svg_content;
|
||||
};
|
||||
|
||||
|
||||
?>
|
||||
|
|
@ -95,7 +95,8 @@ namespace WP_RDNYC;
|
|||
'container_id' => 'top-navbar-grid-main-menu-outer',
|
||||
'menu_class' => 'top-navbar-grid-main-menu',
|
||||
'menu_item_class' => 'top-navbar-grid-main-menu-item',
|
||||
'link_class' => 'top-navbar-grid-main-menu-item-link'
|
||||
'link_class' => 'top-navbar-grid-main-menu-item-link',
|
||||
'walker' => new RDNYC_Menu_Walker()
|
||||
]);
|
||||
// echo '</section>';
|
||||
}
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@ $seventythreek_aria_label = ! empty( $args['aria_label'] ) ? 'aria-label="' . es
|
|||
<label id="<?php echo esc_attr( $seventythreek_unique_id ) . '-label'; ?>" for="<?php echo esc_attr( $seventythreek_unique_id ); ?>" aria-hidden class="form-label d-none"><?php _e( 'Search…', 'seventythreek' ); // phpcs:ignore: WordPress.Security.EscapeOutput.UnsafePrintingFunction -- core trusts translations ?></label>
|
||||
<input type="search" id="<?php echo esc_attr( $seventythreek_unique_id ); ?>" class="form-control me-2 tek-search-input" value="<?php echo get_search_query(); ?>" name="s" aria-labelledby="<?php echo esc_attr( $seventythreek_unique_id ) . '-label'; ?>" placeholder="Search blog…" />
|
||||
<button type="submit" class="btn btn-outline-light" title="Search">
|
||||
<?php echo inline_svg( 'mdi-magnify', array( 'div_class' => 'icon baseline' ) ); ?>
|
||||
<?php echo inline_svg( 'bsi-search', array( 'div_class' => 'icon baseline' ) ); ?>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
|
|
|||
|
|
@ -8,6 +8,8 @@
|
|||
|
||||
namespace WP_RDNYC;
|
||||
|
||||
use \Walker_Nav_Menu;
|
||||
|
||||
add_filter( 'body_class', function( $classes ) {
|
||||
|
||||
if ( is_singular( ['post', 'page'] ) ) {
|
||||
|
|
@ -41,7 +43,7 @@ add_filter( 'nav_menu_link_attributes' , function( $atts, $item, $args ) {
|
|||
if ( 'navbar-main-menu' === $args->theme_location ) {
|
||||
$atts['class'] = (empty($atts['class'])) ? '' : $atts['class'];
|
||||
if ( in_array('current_page_item', $item->classes) ) {
|
||||
$atts['class'] .= ' active';
|
||||
$atts['class'] .= ' active ';
|
||||
}
|
||||
if (property_exists($args, 'link_class')) {
|
||||
$atts['class'] .= ' ' . $args->link_class;
|
||||
|
|
@ -49,3 +51,41 @@ add_filter( 'nav_menu_link_attributes' , function( $atts, $item, $args ) {
|
|||
}
|
||||
return $atts;
|
||||
}, 2, 3 );
|
||||
|
||||
|
||||
/**
|
||||
* custom walker to handle nav main menu dropdowns (one level deep, bs5 doesn't have native submenu support)
|
||||
*/
|
||||
class RDNYC_Menu_Walker extends Walker_Nav_Menu {
|
||||
|
||||
function start_lvl(&$output, $depth = 0, $args = array()) {
|
||||
$output .= "\n<ul class=\"dropdown-menu dropdown-menu-dark dropdown-menu-end\">\n";
|
||||
}
|
||||
|
||||
function start_el(&$output, $item, $depth = 0, $args = array(), $id = 0) {
|
||||
$item_html = '';
|
||||
parent::start_el($item_html, $item, $depth, $args);
|
||||
|
||||
if ( $item->is_dropdown && $depth === 0 ) {
|
||||
$item_html = str_replace( '<a', '<a class="dropdown-toggle top-navbar-grid-main-menu-item-link" data-bs-toggle="dropdown"', $item_html );
|
||||
$item_html = str_replace( '</a>', inline_svg( 'bsi-chevron-down', array( 'div_class' => 'icon baseline ms-1' ) ) . '</a>', $item_html );
|
||||
}
|
||||
|
||||
$output .= $item_html;
|
||||
}
|
||||
|
||||
function display_element($element, &$children_elements, $max_depth, $depth = 0, $args, &$output) {
|
||||
if ( $element->current )
|
||||
$element->classes[] = 'active';
|
||||
|
||||
$element->is_dropdown = !empty( $children_elements[$element->ID] );
|
||||
|
||||
if ( $element->is_dropdown ) {
|
||||
if ( $depth === 0 ) {
|
||||
$element->classes[] = 'dropdown';
|
||||
}
|
||||
}
|
||||
|
||||
parent::display_element($element, $children_elements, $max_depth, $depth, $args, $output);
|
||||
}
|
||||
}
|
||||
Loading…
Reference in a new issue