DEV Community

Cover image for Off-Canvas Menu

Off-Canvas Menu

・1 min read

Let's build a simple canvas menu with JavaScript, html and css Flexbox.
First let us start with html:

<div class="wrapper">
  <div class="off-canvas">
  <div class="content">
  <h1>Click the button</h1>
  <button class="btn-menu">
Enter fullscreen mode Exit fullscreen mode

After Our Css:

* {
  margin: 0;
  padding: 0;
  boz-sizing: border-box;

.wrapper {
  width: 100vw;
  height: 100vh;
  display: flex;

.content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  background: grey;
  flex: 4 0 0;

.content h1 {
   letter-spacing: .2rem;
 color: white;
  padding: 2rem;

.content button {
margin-left: 2rem;
  font-size: 1.2rem;
  text-transform: uppercase;
  letter-spacing: .2rem;
  padding: 0.5rem;
  border-radius: .4rem;
  color: red;

.off-canvas {
  background: darkgrey;
  flex: 1 0 0;

.off-canvas ul {
  padding: 2rem;
  list-style: none;
  letter-spacing: .1rem;
  line-height: 2rem;
  color: white;

.open  {
 display: none;
Enter fullscreen mode Exit fullscreen mode

And in the end a bit of JavaScript:

const canvas = document.querySelector('.off-canvas')
const content = document.querySelector('.content')
const button = document.querySelector('.btn-menu')

button.addEventListener("click", _ => {
 // var canvasWidth = canvas.clientWidth;

Enter fullscreen mode Exit fullscreen mode

This is our Canvas Menu:

Discussion (0)

Forem Open with the Forem app