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') }) This is our Canvas Menu:
Top comments (0)