Off-Canvas Menu

#flexbox #beginners #javascript #codepen

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">
  <ul>
    <li>Home</li>
    <li>Portfolio</li>
    <li>Contact</li>
  </ul>
</div>
  <div class="content">
  <h1>Click the button</h1>
  <button class="btn-menu">
    Menu</button>
</div>
</div>

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;
  }

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;
canvas.classList.toggle('open')

})