Add another javascript dropdown submenu

Question

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 &amp; senior leaders" href="#" class="dropdown-item">Boards &amp; 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 &amp; Financial Directors" href="#" class="dropdown-item">CFOs &amp; 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 &amp; Multi-Stakeholder Partners" href="#" class="dropdown-item">NGOs &amp; 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 &amp; integration" href="#" class="dropdown-item">ESG Strategy development &amp; 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 &amp; Board capability building" href="#" class="dropdown-item">Executive &amp; 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 &amp; capacity building" href="#" class="dropdown-item">Supplier engagement &amp; 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 &amp; Collaboration" href="#" class="dropdown-item">Capability &amp; 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 &amp; tools" href="#" class="dropdown-item">Cross-functional training &amp; 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 &amp; pre-competitive initiatives" href="#" class="dropdown-item">Industry collaboration &amp; 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 &amp; 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 &amp; 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 &amp; 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 &amp; 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 &amp; 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 &amp; 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;
}

Please post the relevant RENDERED HTML in the snippet I made. This is not a PHP question — mplungjan
– mplungjan, Commented yesterday
Are you aware that the given code contains an error? Is that part of your problem? There is no element with id="menu-item-2026". — mykaf
– mykaf, Commented yesterday
I strongly suggest include the complete menu in the page in one go. Then my code should work if it matches my HTML, if not, show the full menu and I will change my code. The php you posted is not the wp_nav_menu( $args ); — mplungjan
– mplungjan, Commented yesterday
@jelle I have updated my answer to reflect your HTML, but also see the caveats — mplungjan
– mplungjan, Commented yesterday

mplungjan · Accepted Answer · 2025-12-30 15:15:04Z

You need to delegate and no need for jQuery I use the :scope selector for the first time

:scope means "this element" so ':scope > ul' selects ONLY the direct child submenu of this <li>

I have updated the HTML and the JS to match your HTML.

I have also tried to tighten some of the selectors to match WP

Please note that if you already have a WP theme with JS that wants to toggle your menu, then my script will likely interfere and perhaps your question is one for SuperUser or the WP tag

document.addEventListener('DOMContentLoaded', function () {
  const nav = document.querySelector('.main-nav') || document;
  const selector = 'li.menu-item-has-children > ul.sub-menu';

  // Hide all submenus initially
  nav.querySelectorAll(selector).forEach(function (ul) {
    ul.hidden = true;
  });

  // Hover open/close 
  nav.querySelectorAll('li.menu-item-has-children').forEach(function (li) {
    const sub = li.querySelector(':scope > ul.sub-menu');
    if (!sub) return;

    li.addEventListener('mouseenter', function () {
      sub.hidden = false;
    });

    li.addEventListener('mouseleave', function () {
      sub.hidden = true;
    });
  });

  // Click toggle (touch + nested)
  nav.addEventListener('click', function (e) {
    const a = e.target.closest('li.menu-item-has-children > a');
    if (!a) return;

    const sub = a.nextElementSibling;
    if (!sub || sub.tagName !== 'UL' || !sub.classList.contains('sub-menu')) return;

    sub.hidden = !sub.hidden;

    // Toggle only, do not navigate on first tap
    e.preventDefault();
    e.stopPropagation();
  });

  // Optional: click outside closes all
  document.addEventListener('click', function (e) {
    if (nav.contains(e.target)) return;

    nav.querySelectorAll(selector).forEach(function (ul) {
      ul.hidden = true;
    });
  });
});

<nav class="main-nav" aria-label="Hoofdmenu">
  <ul class="menu">
    <li class="menu-item menu-item-has-children">
      <a href="/how-we-support/">How we support</a>

      <!-- WordPress-rendered submenu -->
      <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 &amp; 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 &amp; 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>

    <li class="menu-item"><a href="/about/">About</a></li>
    <li class="menu-item"><a href="/contact/">Contact</a></li>
  </ul>
</nav>

thanks, but i think it doesn't work because 'ul.sub-menu' is a seperate div in relation to the main menu. i added code of the whole menu structure

chrwahl · Accepted Answer · 2025-12-30 16:35:07Z

Always be aware when using JavaScript for displaying/hiding stuff on mouseover and mouseout. Often this can be done using CSS and the :hover pseudo-class.

nav li>ul {
  display: none;
}

nav li:hover>ul {
  display: block;
}

<nav>
  <ul>
    <li>
      <a href="/how-we-support/">How we support</a>
      <ul>
        <li><a href="#">Cross-functional training &amp; tools</a></li>
        <li><a href="#">ESG Programme management support</a></li>
        <li><a href="#">Industry collaboration &amp; pre-competitive initiatives</a></li>
        <li><a href="#">Multi-stakeholder intiatives</a></li>
      </ul>
    </li>
    <li><a href="/about/">About</a></li>
    <li><a href="/contact/">Contact</a></li>
  </ul>
</nav>

If you would like to keep the sub menu open and have the main menu item being an anchor you can create a clickable icon with a hidden checkbox:

nav li>ul {
  display: none;
}

nav li:has(input:checked)>ul {
  display: block;
}

nav li>label {
  cursor: pointer;
  margin-left: 1em;
}

nav li>label:after {
  content: '⏵';
}

nav li>label:has(input:checked):after {
  content: '⏷';
}

nav li>label>input {
  display: none;
}

<nav>
  <ul>
    <li>
      <a href="/how-we-support/">How we support</a>
      <label><input type="checkbox" /></label>
      <ul>
        <li><a href="#">Cross-functional training &amp; tools</a></li>
        <li><a href="#">ESG Programme management support</a></li>
        <li><a href="#">Industry collaboration &amp; pre-competitive initiatives</a></li>
        <li><a href="#">Multi-stakeholder intiatives</a></li>
      </ul>
    </li>
    <li><a href="/about/">About</a></li>
    <li><a href="/contact/">Contact</a></li>
  </ul>
</nav>

Collectives™ on Stack Overflow

Add another javascript dropdown submenu

2 Answers 2

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Related