How to Build a Responsive Off-Canvas Menu With CSS and a Touch of JavaScript

In this tutorial, we’ll go through a simple yet effective method for creating a responsive off-canvas menu with HTML, CSS, and JavaScript.

To get an initial idea of what we’ll be building, take a look at the related CodePen demo (check out the larger version to see how the layout changes):

info

This tutorial won't primarily focus on how to make the off-canvas menu fully accessible, so this would certainly be a valid next step to make it even more robust.

1. Begin With Markup

Our markup will consist of two wrapper elements:

the .top-banner element
the .top-nav element

Here’s the HTML code:

<section class="top-banner">
  <div class="top-banner-overlay">
    <!-- content here -->
  </div>
</section>

<nav class="top-nav">
  <div class="menu-wrapper">
    <!-- content here -->
  </div>
  <div class="fixed-menu">
    <!-- content here -->
  </div>
</nav>

2. Next We Need Some CSS

With the markup ready, next let’s examine the most important styles which are required for our menu.

info

For the sake of readability, this CSS code isn’t optimized—you’ll notice duplicate properties which you may want to strip out in your own version.

The .top-banner element will look like this:

Regarding its styles, we'll do the following:

Set its width equal to the window width minus the width of the .fixed-menu element.
Set its height equal to the window height.
Define it as a flex container. This will force its overlay to cover the full parent height.
Use flexbox to vertically center the overlay’s content.

Here are the styles we’ll need to achieve all that:

/*CUSTOM VARIABLES HERE*/

.top-banner {
  position: relative;
  left: 150px;
  display: flex;
  width: calc(100% - 150px);
  height: 100vh;
  background: url(IMAGE_PATH) no-repeat center / cover;
}

.top-banner-overlay {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 350px;
  padding: 20px;
  transition: all .7s;
  color: var(--white);
  background: rgba(0, 0, 0, .7);
}

Styling the `.top-nav` Element

The .top-nav element will look like this:

In this case, we’ll do the following:

Specify the direct child elements as fixed positioned elements that will cover the window height.
Use flexbox to vertically align the .fixed-menu element.
Hide the .menu-wrapper element by default. To do so, we won't give it a property value such as display: none. In fact, we'll use the translate() function to move it 200px to the left. Keep in mind that the element’s width is 350px, so part of it will still be within the viewport. However, it won't be visible because the element is positioned underneath the .fixed-menu element.
Hide the menu list.

Have a look at the corresponding CSS styles below:

/*CUSTOM VARIABLES HERE*/

.top-nav .menu-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 350px;
  padding: 20px;
  transform: translateX(-200px);
  transition: transform .7s;
  background: var(--menu-color);
}

.top-nav .menu-wrapper .menu {
  opacity: 0;
  transition: opacity .4s;
}

.top-nav .fixed-menu {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  width: 150px;
  padding: 20px;
  background: var(--fixed-menu-color);
}

3. Now for Some JavaScript

At this point, we’ll use some straightforward JavaScript code to manipulate the state of the off-canvas menu.

We can toggle the menu in the following ways:

Each time we click on the .menu-toggle button, the menu’s visibility will change. If it’s hidden, it’ll appear with a nice slide-in effect, and the overlay will be pushed simultaneously to the right. Optionally, we can do a lot more things during this state. In our example, we'll add a box shadow to the ::before pseudo-element of the overlay and reveal the menu list using a fade-in effect. On the contrary, if the menu is visible, it'll disappear with a slide-out effect, and the overlay will be pushed simultaneously to the left.

Another possible way to close the menu is through the .menu-close button that is part of the .menu-wrapper element.
By default, we can also toggle the menu through the keyboard by focusing the toggle buttons and pressing the Enter or Tab keys. We'll also add a scenario for closing the menu by pressing the Esc key.

Here’s the JavaScript code which implements this behavior:

const topNav = document.querySelector(".top-nav");
const menuToggle = topNav.querySelector(".menu-toggle");
const menuClose = topNav.querySelector(".menu-close");
const menuWrapper = topNav.querySelector(".menu-wrapper");
const topBannerOverlay = document.querySelector(".top-banner-overlay");
const isOpenedClass = "is-opened";
const isMovedClass = "is-moved";

menuToggle.addEventListener("click", () => {
  menuWrapper.classList.toggle(isOpenedClass);
  topBannerOverlay.classList.toggle(isMovedClass);
});

menuClose.addEventListener("click", () => {
  menuWrapper.classList.remove(isOpenedClass);
  topBannerOverlay.classList.remove(isMovedClass);
});

document.addEventListener("keydown", (e) => {
  if (e.key == 'Escape' && menuWrapper.classList.contains(isOpenedClass)) {
    menuClose.click();
  }  
});

And below you’ll find the associated CSS styles:

.top-banner-overlay.is-moved {
  transform: translateX(350px);
}

.top-banner-overlay.is-moved::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 100%;
  width: 20px;
  box-shadow: 3px 0 10px rgba(0, 0, 0, .75);
}

.top-nav .menu-wrapper.is-opened {
  transform: translateX(150px);
}

.top-nav .menu-wrapper.is-opened .menu {
  opacity: 1;
  transition-delay: .6s;
}

4. Going Responsive

At this point, we'll examine how to make our off-canvas responsive.

When the viewport is up to 900px:

The top banner will have a height equal to the window height minus the height of the .fixed-menu element.
The top banner overlay will stop having the window height—it'll be vertically centered inside the banner.
Also, the fixed header will stop having the window height. In fact, it'll have a fixed height of 50px.
The navigation layout will switch to horizontal.
The menu will be full-screen and continue to be off-screen by default.
Upon menu toggle click, the banner overlay will be moved off-screen to the right.

The page layout on screens up to 900px

Alternatively, keeping the banner overlay always on the screen and overlapping the menu while in view is also an option. Comment out the properties below marked with the number 2 and run the pen to see the difference.

As we’re using a desktop-first approach, these are the most important styles that we have to add/overwrite:

@media (max-width: 900px) {
  body {
    font-size: 16px;
    overflow-x: hidden;
  }

  .top-banner {
    top: 50px;
    left: auto;
    width: 100%;
    height: calc(100vh - 50px);
    transform: none;
    align-items: center;
  }
  
  .top-banner-overlay {
    position: relative; /*2*/
    left: 0; /*2*/
    max-width: 100%;
  }

  .top-banner-overlay.is-moved {
    left: 100%; /*2*/
    transform: none;
  }

  .top-nav .menu-wrapper {
    width: 100%;
    transform: translateX(-100%);
    padding-top: 70px;
  }

  .top-nav .menu-wrapper.is-opened {
    transform: none;
  }

  .top-nav .menu-wrapper .menu-close {
    top: 70px;
  }

  .top-nav .fixed-menu {
    bottom: auto;
    flex-direction: row;
    align-items: center;
    width: 100%;
    height: 50px;
    padding: 0 20px;
  }

  .top-nav .fixed-menu .menu-toggle {
    margin: 0;
    order: 3;
  }

  .top-nav .socials {
    display: flex;
    margin-left: auto;
    margin-right: 20px;
  }
}

5. Clear Transitions on Window Resize

We're almost done! Similar to what we've done in another off-canvas tutorial, let's make one more adjustment: we'll clear all transitions each time we resize the browser window. This way, during the resizing phase, we'll avoid seeing the off-canvas for a moment before moving back to its default off-screen position.

Here's the extra code that we'll need:

const body = document.body;
const noTransitionClass = "no-transition";
let resize;

window.addEventListener("resize", () => {
  body.classList.add(noTransitionClass);
  clearTimeout(resize);
  resize = setTimeout(() => {
    body.classList.remove(noTransitionClass);
  }, 500);
});

And the related style:

1	.no-transition * {
2	transition: none !important;
3	}

Conclusion

That’s it, folks! We managed to build a useful off-canvas menu that will appear nicely on different screens with relatively straightforward code. You can build on the demo and make it more accessible by adding extra ARIA attributes like the aria-labelledby attribute and the dialog role.

I hope you enjoyed the final result and you’ll use it as inspiration for creating even more powerful off-canvas menus. And of course, if you build any, don’t forget to share them with us!

How to Build a Responsive Off-Canvas Menu With CSS and a Touch of JavaScript

1. Begin With Markup

2. Next We Need Some CSS

Styling the top-banner Element

Styling the `.top-nav` Element

3. Now for Some JavaScript

Toggle Menu

4. Going Responsive

5. Clear Transitions on Window Resize

Conclusion

Learn More Off-Canvas Techniques

How to Build a Responsive Off-Canvas Menu With CSS and a Touch of JavaScript

1. Begin With Markup

2. Next We Need Some CSS

Styling the top-banner Element

Styling the .top-nav Element

3. Now for Some JavaScript

Toggle Menu

4. Going Responsive

5. Clear Transitions on Window Resize

Conclusion

Learn More Off-Canvas Techniques

Styling the `.top-nav` Element