Mobile Navigation Menu

Mobile Nav

Build a hamburger menu that slides or fades in on mobile using jQuery class toggles and CSS transitions.

Example

$(function() {
  const $nav = $("#mobile-nav");
  const $overlay = $("<div>").addClass("nav-overlay").hide().appendTo("body");
  $("#hamburger").on("click", function() {
    $nav.toggleClass("open");
    $overlay.toggle();
    $(this).attr("aria-expanded", $nav.hasClass("open"));
  });
  $overlay.on("click", () => { $nav.removeClass("open"); $overlay.hide(); });
  // Close on escape
  $(document).on("keydown", e => { if (e.key === "Escape") { $nav.removeClass("open"); $overlay.hide(); } });
});

JAVASCRIPT

Full Editor

Pro Tip

Always close mobile nav on Escape key and overlay click — keyboard and accessibility requirements.

Related Resources

jQuery Reference

Complete tag & property list

jQuery How-To Guides

Step-by-step practical guides

jQuery Exercises

Practice what you've learned