How to Create an Off-Canvas Menu

An off-canvas menu is a popular navigation pattern for mobile-responsive websites.

This type of menu is hidden off-screen and can be revealed by a button or icon.

In this tutorial, we will show you how to create an off-canvas menu using HTML, CSS, and JavaScript.

Step 1: HTML Structure

First, we will create the basic HTML structure for the off-canvas menu. This includes a container element for the menu, a button or icon to trigger the menu, and a list of menu items.

Here is an example of the HTML structure:

<div class="off-canvas-container">
  <button class="menu-button">Menu</button>
  <nav class="off-canvas-menu">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</div>

Step 2: CSS Styles

Next, we will add some CSS styles to position and style the off-canvas menu. We will use CSS transforms to slide the menu in and out of view.

Here is an example of the CSS styles:

.off-canvas-container {
position: relative;
}

.off-canvas-menu {
position: absolute;
top: 0;
left: -100%%;
width: 80%%;
height: 100%%;
background-color: #f5f5f5;
transition: left 0.3s ease-out;
}

.off-canvas-menu.open {
left: 0;
}

Step 3: JavaScript Functionality

Finally, we will add some JavaScript to toggle the open class on the menu when the button is clicked.

This will reveal the menu by sliding it in from the left.

Here is an example of the JavaScript functionality:

var menuButton = document.querySelector('.menu-button');
var menu = document.querySelector('.off-canvas-menu');

menuButton.addEventListener('click', function() {
  menu.classList.toggle('open');
});

And that’s it! With these simple steps, you have created a functional off-canvas menu.

You can customize the look and feel of the menu with additional CSS styles and add more functionality as needed.