ARTICLE AD BOX
I have a dropdown menu on my Wordpress website that adds submenu items and it's categories into a dropdown menu. This works for one menu-item, with the help of that #id class. Now i can't get it working for two menu-items. Simply copying the code for the another item didn't work and doesn't seem clean to me. Could anyone help? Thanks in advance.
const popupContainer = document.getElementById('menu-item-2026');
const popupContent = document.getElementById('sub_menu');
popupContainer.addEventListener('mouseover', function() {
popupContent.style.display = 'block';
});
popupContent.addEventListener('mouseover', function() {
popupContent.style.display = 'block';
});
popupContainer.addEventListener('mouseout', function() {
popupContent.style.display = 'none';
});
popupContent.addEventListener('mouseout', function() {
popupContent.style.display = 'none';
});
$('.menu-item-has-children .menu-item-has-children a').on("click", function(e) {
$(this).next('ul').toggle();
e.stopPropagation();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<header id="masthead" class="site-header navbar-static-top <?php echo wp_bootstrap_starter_bg_class(); ?>" role="banner">
<div class="container-fluid pl-0 pr-0">
<nav class="navbar navbar-expand-lg p-3">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#main-nav" aria-controls="" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<?php
wp_nav_menu(array(
'theme_location' => 'primary',
'container' => 'div',
'container_id' => 'main-nav',
'container_class' => 'collapse navbar-collapse justify-content-end',
'menu_id' => false,
'menu_class' => 'navbar-nav',
'depth' => 3,
'fallback_cb' => 'wp_bootstrap_navwalker::fallback',
'walker' => new wp_bootstrap_navwalker()
));
?>
</nav>
</div>
</header><!-- #masthead -->
<div id="content" class="site-content">
<div class="container-fluid">
<div class="row">
<?php endif; ?>
<div class="sub_menu" id="sub_menu">
<?php
$args = array(
'menu' => 'Hoofdmenu',
'submenu' => 'How we support',
);
wp_nav_menu( $args );
?>
</div>
Generated html:
<ul id="menu-hoofdmenu" class="navbar-nav"> <li itemscope="itemscope" id="menu-item-14" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-5 current_page_item active menu-item-14 nav-item"><a title="Home" href="#" class="nav-link" aria-current="page">Home</a></li> <li itemscope="itemscope" id="menu-item-2015" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children dropdown menu-item-2015 nav-item"><a title="Who we serve" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle nav-link" id="menu-item-dropdown-2015">Who we serve</a> <ul class="dropdown-menu" aria-labelledby="menu-item-dropdown-2015" role="menu"> <li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-2058" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2058 nav-item"><a title="Boards & senior leaders" href="#" class="dropdown-item">Boards & senior leaders</a></li> <li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-2057" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2057 nav-item"><a title="CFOs & Financial Directors" href="#" class="dropdown-item">CFOs & Financial Directors</a></li> <li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-2059" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2059 nav-item"><a title="Supply chain and Procurement directors" href="#" class="dropdown-item">Supply chain and Procurement directors</a></li> <li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-2056" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2056 nav-item"><a title="Legal, Risk and Compliance Officers" href="#" class="dropdown-item">Legal, Risk and Compliance Officers</a></li> <li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-2055" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2055 nav-item"><a title="Sustainability Directors" href="#" class="dropdown-item">Sustainability Directors</a></li> <li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-2054" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2054 nav-item"><a title="NGOs & Multi-Stakeholder Partners" href="#" class="dropdown-item">NGOs & Multi-Stakeholder Partners</a></li> </ul> </li> <li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-2026" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children dropdown menu-item-2026 nav-item"><a title="How we support" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle nav-link" id="menu-item-dropdown-2026">How we support</a> <ul class="dropdown-menu" aria-labelledby="menu-item-dropdown-2026" role="menu"> <li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-264" class="sub-menu-heading menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children dropdown menu-item-264 nav-item"><a title="Strategy and governance" href="#" class="dropdown-item">Strategy and governance</a> <ul class="dropdown-menu" aria-labelledby="menu-item-dropdown-2026" role="menu"> <li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-2071" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2071 nav-item"><a title="ESG Strategy development & integration" href="#" class="dropdown-item">ESG Strategy development & integration</a></li> <li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-2070" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2070 nav-item"><a title="Double materiality assessments" href="#" class="dropdown-item">Double materiality assessments</a></li> <li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-2069" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2069 nav-item"><a title="Board governance frameworks and oversight" href="#" class="dropdown-item">Board governance frameworks and oversight</a></li> <li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-2072" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2072 nav-item"><a title="Executive & Board capability building" href="#" class="dropdown-item">Executive & Board capability building</a></li> </ul> </li> <li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-266" class="sub-menu-heading menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children dropdown menu-item-266 nav-item"><a title="Supply chain and risk management" href="#" class="dropdown-item">Supply chain and risk management</a> <ul class="dropdown-menu" aria-labelledby="menu-item-dropdown-2026" role="menu"> <li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-2064" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2064 nav-item"><a title="Human Rights and Environmental Due Diligence" href="#" class="dropdown-item">Human Rights and Environmental Due Diligence</a></li> <li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-2066" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2066 nav-item"><a title="Responsible Sourcing and procurement integration" href="#" class="dropdown-item">Responsible Sourcing and procurement integration</a></li> <li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-2067" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2067 nav-item"><a title="Supplier engagement & capacity building" href="#" class="dropdown-item">Supplier engagement & capacity building</a></li> <li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-2065" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2065 nav-item"><a title="Integrated risk management" href="#" class="dropdown-item">Integrated risk management</a></li> </ul> </li> <li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-2024" class="sub-menu-heading menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children dropdown menu-item-2024 nav-item"><a title="Capability & Collaboration" href="#" class="dropdown-item">Capability & Collaboration</a> <ul class="dropdown-menu" aria-labelledby="menu-item-dropdown-2026" role="menu"> <li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-2060" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2060 nav-item"><a title="Cross-functional training & tools" href="#" class="dropdown-item">Cross-functional training & tools</a></li> <li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-2061" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2061 nav-item"><a title="ESG Programme management support" href="#" class="dropdown-item">ESG Programme management support</a></li> <li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-2062" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2062 nav-item"><a title="Industry collaboration & pre-competitive initiatives" href="#" class="dropdown-item">Industry collaboration & pre-competitive initiatives</a></li> <li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-2063" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2063 nav-item"><a title="Multi-stakeholder intiatives" href="#" class="dropdown-item">Multi-stakeholder intiatives</a></li> </ul> </li> </ul> </li> <li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-67" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-67 nav-item"><a title="Insights" href="#" class="nav-link">Insights</a></li> <li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-15" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-15 nav-item"><a title="About" href="#" class="nav-link">About</a></li> <li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-16" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-16 nav-item"><a title="Contact" href="#" class="nav-link">Contact</a></li> </ul> <div class="sub_menu" id="sub_menu"> <div class="menu-hoofdmenu-container"><ul id="menu-hoofdmenu-1" class="menu"><li class="sub-menu-heading menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-264"><a href="#">Strategy and governance</a> <ul class="sub-menu"> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2071"><a href="#">ESG Strategy development & integration</a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2070"><a href="#">Double materiality assessments</a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2069"><a href="#">Board governance frameworks and oversight</a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2072"><a href="#">Executive & Board capability building</a></li> </ul> </li> <li class="sub-menu-heading menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-266"><a href="#">Supply chain and risk management</a> <ul class="sub-menu"> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2064"><a href="#">Human Rights and Environmental Due Diligence</a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2066"><a href="#">Responsible Sourcing and procurement integration</a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2067"><a href="#">Supplier engagement & capacity building</a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2065"><a href="#">Integrated risk management</a></li> </ul> </li> <li class="sub-menu-heading menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-2024"><a href="#">Capability & Collaboration</a> <ul class="sub-menu"> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2060"><a href="#">Cross-functional training & tools</a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2061"><a href="#">ESG Programme management support</a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2062"><a href="#">Industry collaboration & pre-competitive initiatives</a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2063"><a href="#">Multi-stakeholder intiatives</a></li> </ul> </li> </ul></div> </div>Functions php code:
add_filter( 'wp_nav_menu_objects', 'submenu_limit', 10, 2 ); function submenu_limit( $items, $args ) { if ( empty($args->submenu) ) { return $items; } $parent_id = array_pop( wp_filter_object_list( $items, array( 'title' => $args->submenu ), 'and', 'ID' ) ); $children = submenu_get_children_ids( $parent_id, $items ); foreach ( $items as $key => $item ) { if ( ! in_array( $item->ID, $children ) ) { unset($items[$key]); } } return $items; } function submenu_get_children_ids( $id, $items ) { $ids = wp_filter_object_list( $items, array( 'menu_item_parent' => $id ), 'and', 'ID' ); foreach ( $ids as $id ) { $ids = array_merge( $ids, submenu_get_children_ids( $id, $items ) ); } return $ids; }