Pure css hamburger menu | hamburger menu with css only
Introduction
First we’ll see what is a hamburger menu. A hamburger menu is a navigation bar that pops up when the hamburger symbol is clicked. The hamburger symbol is a symbol of three parallel lines that resemble a hamburger.
Why with CSS Only?
Generally, you need to use JavaScript to make a hamburger menu since JavaScript is generally used to add functionality or modify page content. However, today I’ll prove how to make a hamburger menu without JavaScript and with CSS only.
How?
So the question might be how is this possible with CSS only? Before moving on to our code, let me share how is this possible. This is done with a checkbox. We use checkbox as an indicator or receiver to inform that the user has clicked the menu. Based on that, we style CSS to change the menu size when checked.
HTML
First, paste the HTML code below.
<nav role=“navigation”>
<div id=“openMenu”>
<input type=“checkbox” />
<span></span>
<span></span>
<span></span>
<ul id=“menu”>
<a href=“#”><li>Home</li></a>
<a href=“#”><li>About</li></a>
<a href=“#”><li>Services</li></a>
<a href=“#”><li>Contact Us</li></a>
</ul>
</div>
</nav>
Your output would be:
CSS
Then, paste the CSS Code below.
body
{
margin: 0;
padding: 0;
background: royalblue;
color: #cdcdcd;
font-family: arial;
}
#openMenu
{
display: block;
position: relative;
top: 50px;
left: 50px;
z-index: 1;
-webkit-user-select: none;
user-select: none;
}
#openMenu a
{
text-decoration: none;
color: royalblue;
transition: color 0.3s ease;
}
#openMenu a:hover
{
color: mediumseagreen;
}
#openMenu input
{
display: block;
width: 40px;
height: 32px;
position: absolute;
top: -7px;
left: -5px;
cursor: pointer;
opacity: 0;
z-index: 2;
-webkit-touch-callout: none;
}
#openMenu span
{
display: block;
width: 33px;
height: 4px;
margin-bottom: 5px;
position: relative;
background: #cdcdcd;
border-radius: 3px;
z-index: 1;
transform-origin: 4px 0px;
transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
opacity 0.55s ease;
}
#openMenu span:first-child
{
transform-origin: 0% 0%;
}
#openMenu span:nth-last-child(2)
{
transform-origin: 0% 100%;
}
#openMenu input:checked ~ span
{
opacity: 1;
transform: rotate(45deg) translate(-2px, -1px);
background: royalblue;
}
#openMenu input:checked ~ span:nth-last-child(3)
{
opacity: 0;
transform: rotate(0deg) scale(0.2, 0.2);
}
#openMenu input:checked ~ span:nth-last-child(2)
{
transform: rotate(-45deg) translate(0, -1px);
}
#menu
{
position: absolute;
width: 300px;
margin: -100px 0 0 -50px;
padding: 50px;
padding-top: 125px;
background: #ededed;
list-style-type: none;
-webkit-font-smoothing: antialiased;
transform-origin: 0% 0%;
transform: translate(-100%, 0);
transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
}
#menu li
{
padding: 10px 0;
font-size: 22px;
}
#openMenu input:checked ~ ul
{
transform: none;
}
Your final output would be:
And that’s it. You’ve successfully made a hamburger menu with CSS Only!
Check out more…..
JavaScript music drum kit project
written by @codingporium
Thanks for reading! Do contact me via the methods below if you have to say anything: