While working on a new responsive menu, I soon realized the need to be able to close any menu that might be open should the user choose another one. In a wide layout it would look particularly messy and confusing to have multiple menus shown. In a mobile layout that wouldn’t be so bad since there’s an accordion effect. However, the more real estate you can give back to the user the better!
Fortunately, jQuery has a handy selector that will grab all the li elements at the same level as the currently clicked/tapped element:
$(this).siblings().each(function() { // Animate close TweenLite.to($(this).find("ul > li"), speedFactor / 2, { height: 0, opacity: 0, ease: Power3.easeIn }); TweenLite.to($(this).find(".menuArrow"), speedFactor / 2, { rotation: -90, ease: Power3.easeInOut }); TweenLite.set($(this).find("ul > li"), { display: "none", delay: speedFactor / 2 }); // Indicate menu is closed $(this).data("menuOpen", false); });
Similar functionality can and should also be applied to the page as a whole so that pointing somewhere else would close all menus. Or, for that matter, when the user selects an item. Here are the results: