
To create the CSS Hamburger Menu follow the steps below and watch the video tutorial:
Demo:
Step1.
Add HTML
Create the hamburger-menu container, add input checkbox and the vertical menu:
<div class="hamburger-menu">
<div class="menu-toggle">
<input id="toggle" type="checkbox">
<label class="toggle" for="toggle"></label>
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
<div class="vertical-menu">
<a href="#" class="home">Home</a>
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
<a href="#">Link 4</a>
</div>
</div>
</div>
Step2.
Add CSS
Set the colour and position of the background and elements:
body {
margin:0;
padding:0;
}
Style and the hamburger icon:
.menu-toggle {
margin:30px;
}
input#toggle {
display: none;
}
.toggle {
position: absolute;
width:35px;
height: 30px;
background-color: transparent;
z-index:5;
top:8px;
left:30px;
cursor: pointer;
}
.bar1, .bar2, .bar3 {
position: absolute;
cursor: pointer;
width: 35px;
height: 5px;
background-color: #001219;
border-radius:5px;
transition: 0.4s;
border-radius:5px;
}
.bar1 {
top:10px;
}
.bar2 {
top:20px;
}
.bar3 {
top:30px;
}
Animate the hamburger icon:
#toggle:checked ~ .bar1 {
transform: rotate(-45deg) translate(-7px, 7px);
}
#toggle:checked ~ .bar2 {
opacity:0;
}
#toggle:checked ~ .bar3 {
transform: rotate(45deg) translate(-8px, -8px);
}
Style the vertical menu:
.vertical-menu {
width: 300px;
position: absolute;
top:0;
left:0;
text-align: center;
z-index:-1;
visibility: hidden;
opacity:0;
transition: opacity .4s;
}
.vertical-menu a {
background-color: #e9d8a6;
display: block;
padding: 12px;
text-decoration: none;
font-family: tahoma;
color: #001219;
}
.vertical-menu a:hover {
background-color: #005f73;
color: white;
}
#toggle:checked ~ .vertical-menu {
visibility: visible;
opacity:1;
}
a.home {
background-color: #0a9396;
}
Watch also video tutorial:
Enjoy coding!
Read also:
CSS & JavaScript Sliding Push Menu/ Navigation