CODEWITHSUNDEEP
javascriptjquery
rustyshackleford
rustyshackleford

Reputation: 731

Closing a secondary navigation menu with jQuery

I just took some contracting work and part of it involves using jQuery, which I've never used before. This seems pretty trivial, but I haven't been able to get our secondary navigation menu to close when somebody clicks outside of the menu. Here is the code:

    $(".products-list li").on("click",function(){// for selected product item

    $('.products-list li').removeClass('active');

    $(this).addClass('active');

});



$("#navigation-menus").on("click",function(){ // for menus close outside click

    $('#navigation-menus').removeClass('open');

    console.log('The function is being called');

    $('.navigation-panel').removeClass('open');

    $('.menus-main-list').removeClass('open');

});





$("#menu-product").hover(function (){

    $('#navigation-menus').addClass('open');

    $('#product-menu-list-2').removeClass('open');

    $('#product-menu-list-1').addClass('open');



});






$("#menu-information").hover(function (){

    $('#navigation-menus').addClass('open');

    $('#product-menu-list-1').removeClass('open');

    $('#product-menu-list-2').addClass('open');

});



$(".menus-main-list").hover(function (){

    $('.menus-main-list').removeClass('open');

    $(this).addClass('open');

});

Here's the HTML. By the way, I just got here and I didn't write any of this. Part of my job is to clean this up. It's kind of a mess.

<nav id="navigation-menus" class="">

<div class="navigation-panel" id="product-menu-list-1">

<ul>

<li class="menus-main-list menus-blue">

  <a href="#">

      <svg width="60" height="60" version="1.1" xmlns="http://www.w3.org/2000/svg" style="width: 60px; height: 60px; stroke-dasharray: 188.531, 183;" focusable="false"><circle cx="30" cy="30" r="29"></circle></svg>

      <span class="test-icon  icon-vehicle" style="width: 60px; height: 60px; line-height: 60px; font-size: 30px;"></span>

      <span class="test-nav-menu-item"></span>

  </a>

  <div class="nm-submenus-list">

     <ul>

        <li><a href="x.html"><span class="test-nav-menu-item"></span></a></li>

        <li><a href="x.html"><span class="test-nav-menu-item"></span></a></li>

        <li><a href="x.html"><span class="test-nav-menu-item"></span></a></li>

        <li><a href="x.html"><span class="test-nav-menu-item"></span></a></li>

        <li><a href="x.html"><span class="test-nav-menu-item"></span></a></li>

    </ul>

</div>

</li>

<li class="menus-main-list menus-blue">

  <a href="#">

      <svg width="60" height="60" version="1.1" xmlns="http://www.w3.org/2000/svg" style="width: 60px; height: 60px; stroke-dasharray: 188.531, 183;" focusable="false"><circle cx="30" cy="30" r="29"></circle></svg>

      <span class="test-icon  icon-vehicle" style="width: 60px; height: 60px; line-height: 60px; font-size: 30px;"></span>

      <span class="test-nav-menu-item">Services</span>

  </a>

  <div class="nm-submenus-list">

     <ul>

        <li><a href="x.html"><span class="test-nav-menu-item"></span></a></li>

        <li><a href="x.html"><span class="test-nav-menu-item"></span></a></li>

              <li><a href="x.html"><span class="test-nav-menu-item"></span></a></li>

    </ul>

</div>

</li>

<li class="menus-main-list menus-blue">

  <a href="#">

      <svg width="60" height="60" version="1.1" xmlns="http://www.w3.org/2000/svg" style="width: 60px; height: 60px; stroke-dasharray: 188.531, 183;" focusable="false"><circle cx="30" cy="30" r="29"></circle></svg>

      <span class="test-icon  icon-vehicle" style="width: 60px; height: 60px; line-height: 60px; font-size: 30px;"></span>

      <span class="test-nav-menu-item">Education</span>

  </a>

  <div class="nm-submenus-list">

     <ul>

        <li><a href="x.html"><span class="test-nav-menu-item"></span></a></li>

        <li><a href="x.html"><span class="test-nav-menu-item"></span></a></li>

        <li><a href="x.html"><span class="test-nav-menu-item"></span></a></li>

        <li><a href="x.html"><span class="test-nav-menu-item"></span></a></li>

              <li><a href="x.html"><span class="test-nav-menu-item"></span></a></li>

        <li><a href="x.html"><span class="test-nav-menu-item"></span></a></li>

    </ul>

</div>

</li>

</ul>



</div>



<div class="navigation-panel" id="product-menu-list-2" style="display:none;">

<ul>

<li class="menus-main-list menus-blue">

  <a href="about_us.html">

      <svg width="60" height="60" version="1.1" xmlns="http://www.w3.org/2000/svg" style="width: 60px; height: 60px; stroke-dasharray: 188.531, 183;" focusable="false"><circle cx="30" cy="30" r="29"></circle></svg>

      <span class="test-icon  icon-vehicle" style="width: 60px; height: 60px; line-height: 60px; font-size: 30px;"></span>

      <span class="test-nav-menu-item">About Us</span>

  </a>



</li>

<li class="menus-main-list menus-blue">

  <a href="social_media.html">

      <svg width="60" height="60" version="1.1" xmlns="http://www.w3.org/2000/svg" style="width: 60px; height: 60px; stroke-dasharray: 188.531, 183;" focusable="false"><circle cx="30" cy="30" r="29"></circle></svg>

      <span class="test-icon  icon-vehicle" style="width: 60px; height: 60px; line-height: 60px; font-size: 30px;"></span>

      <span class="test-nav-menu-item">Social Media</span>

  </a>



</li>

<li class="menus-main-list menus-blue">

  <a href="reviews.html">

      <svg width="60" height="60" version="1.1" xmlns="http://www.w3.org/2000/svg" style="width: 60px; height: 60px; stroke-dasharray: 188.531, 183;" focusable="false"><circle cx="30" cy="30" r="29"></circle></svg>

      <span class="test-icon  icon-vehicle" style="width: 60px; height: 60px; line-height: 60px; font-size: 30px;"></span>

      <span class="test-nav-menu-item">Reviews</span>

  </a>



</li>

<li class="menus-main-list menus-blue">

  <a href="community-involvement.html">

      <svg width="60" height="60" version="1.1" xmlns="http://www.w3.org/2000/svg" style="width: 60px; height: 60px; stroke-dasharray: 188.531, 183;" focusable="false"><circle cx="30" cy="30" r="29"></circle></svg>

      <span class="test-icon  icon-vehicle" style="width: 60px; height: 60px; line-height: 60px; font-size: 30px;"></span>

      <span class="test-nav-menu-item">Community Involvement</span>

  </a>



</li>

</ul>



</div>

I'd be really grateful for any help.

Upvotes: 0

Views: 48

Answers (1)

RickTakes
RickTakes

Reputation: 1197

Adding a tab index to your menu will give you access to focus and focusout events that you will fire when you click out side of the menu. You can then fire a function when the menu loses focus to close it.

A negative value (usually tabindex="-1" means that the element should be focusable, but should not be reachable via sequential keyboard navigation. Mostly useful to create accessible widgets with JavaScript.

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex

https://developer.mozilla.org/en-US/docs/Web/Events/focusout

Upvotes: 1

Related Questions