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.
What's in the Sample
- Header with logo and menu icon
- Content area
- nav - styles the navigation element
- nav.open - moves the navigation on and off the canvas
- #menu - styles the menu icon
- 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