javascript - Closing a secondary navigation menu with jQuery -
i took contracting work , part of involves using jquery, i've never used before. seems pretty trivial, haven't been able our secondary navigation menu close when clicks outside of menu. here code:
$(".products-list li").on("click",function(){// selected product item $('.products-list li').removeclass('active'); $(this).addclass('active'); }); $("#navigation-menus").on("click",function(){ // menus close outside click $('#navigation-menus').removeclass('open'); console.log('the function 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 html. way, got here , didn't write of this. part of job clean up. it's kind of 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 grateful help.
adding tab index menu give access focus , focusout events fire when click out side of menu. can fire function when menu loses focus close it.
a negative value (usually tabindex="-1" means element should focusable, should not reachable via sequential keyboard navigation. useful create accessible widgets javascript.
https://developer.mozilla.org/en-us/docs/web/html/global_attributes/tabindex
https://developer.mozilla.org/en-us/docs/web/events/focusout
Comments
Post a Comment