How to Create an Off-Canvas Menu

Introduction

This example has default styling for screens up to 450px wide. At this screen width and below, the navagation in the sample is hidden until the user clicks the hamburger menu icon (☰). When the hamburger menu icon is clicked, the navigation slides into place. The user clicks outside the navigation to hide it again.

If the screen size of the device displaying the page is larger then 450px wide, the navigation in the sample is displayed as inline text items below the header and the hamburger menu icon is not displayed on the page.

NOTE: Resize the page in your browser to test the navigation at different viewport sizes.

What's in the Sample

Sample Sections:

  • Header with logo and menu icon
  • Navigation
  • Content area

CSS Used:

  • nav - styles the navigation element
  • nav.open - moves the navigation on and off the canvas
  • #menu - styles the menu icon

JavaScript Used:

  • A click event listener is added to the menu icon
  • The "open" class is added/removed to/from the navigation to show/hide the navigation

Sample

This is the content of the site.