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)