Menu JS examples

menus.js

// currently
$('button.toggleNav').on('click', function() {
  $('.top-bar__dropdown').toggleClass('MenuIsOpen');
});

// better
// Ensures that you only open the menu adjacent to the button if there are more than one.
// Great for reusing the same code throughout for multiple dropdowns
$('.toggleNav').on('click', function() {
  var $this = $(this);
  var $menu = $this.siblings('.dropNav');  // Requires adding/renaming classname on ul

  $menu.toggleClass('MenuIsOpen');
});

// best
// Ensures that you only open the menu adjacent to the button *and* if you click anywhere off-menu/button it will close the menu
// All the benefits of the previous version, but even better UX!!!
(function() {
  var $trigger = $('.toggleNav');
  var $navs    = $('.dropNav');

  $('body').on('click', function(e) {
    var $target   = $(e.target);
    var isTrigger = $target.closest($trigger).length;

    if ( isTrigger ) {
      e.preventDefault();

      var $thisNav = $target.siblings('.dropNav');

      $thisNav.toggleClass('MenuIsOpen');
    } else {
      $navs.removeClass('MenuIsOpen');
    }
  });
})();