If you’re a developer or a designer, you’re probably familiar with the trend of using hamburger (or three-line) menus as fully responsive and mobile friendly navigation solutions. The trend has grown considerably over time and is becoming even more popular as mobile friendly and mobile first design becomes the norm. In fact, it feels like hamburger menus or three line icons have become a universally recognizes symbol for “navigation menu.” So how do you make yours stand out from the pack? Add some smooth animations, of course! What follows are two different ways to create unique hamburger menus that have animated effects when they’re clicked.
Three Lines to One Line Effect
One cool way to animate your hamburger menu icon is to have the three lines transform into one line when it’s clicked, then have it go back to three lines when it’s clicked again. This can be achieved pretty easily by creating each line of the hamburger menu from HTML and CSS, then creating classes that can be toggled with a jQuery toggle event that will effectively hide the top and bottom menu line when they’re clicked.
Here’s the HTML to start you off:
What's the one thing every developer wants? More screens! Enhance your coding experience with an external monitor to increase screen real estate.
<div class="icon-group"> <div class="icon"></div> </div>
As you can see, this icon is created purely from divs. Here’s the CSS you’ll need to use to make those divs look like a three line icon (and to give them some nice style as well!).
.icon-group {
position: relative;
width: 65px;
height: 40px;
transform: translate(-50%, -50%);
position: absolute;
left: 50%;
top: 50%;
}
.icon-group:hover {
cursor: pointer;
}
.icon {
margin-top: 20px;
position: absolute;
width: 100%;
height: 0.5em;
background: #DB324D;
}
.icon:before, .icon:after {
position: absolute;
width: 100%;
height: 0.5em;
background: #DB324D;
transition: margin-top 150ms;
content: "";
display: block;
margin-top: -20px;
}
.icon:after {
margin-top: 20px;
}
.icon-group.collapsed .icon:before {
margin-top: 0;
}
.icon-group.collapsed .icon:after {
margin-top: 0;
}
Your menu icon should now look like this:
To add the animations, you’ll need to include the following JavaScript:
$(document).ready(function(){
$('.icon-group').on('click', function(){
$(this).toggleClass('collapsed');
});
});
The code above will toggle the .collapsed class when the .icon-group icon is clicked — this class, when added to the .icon-group div, will actually toggle the top and bottom lines of the icon (this is because of the way we’ve defined them in the CSS — check out .collapsed in the CSS above!). The menu, when clicked, should look like just one line:
Three Lines to X Effect
Another interesting way to animate your three-line hamburger icon menu is to have the three lines transform into an X when it’s clicked. This can be achieved in almost the same was as the previous effect, by having jQuery toggle a particular class when the menu is clicked. To make the lines appear to cross, all you need to employ is the transform property.
Start by creating the elements of your hamburger three-line menu as HTML elements within an <a> tag.
Then style it using the following CSS so that it actually looks like a three-line menu icon:
.hamburgler {
width: 300px;
height: 300px;
display: block;
-webkit-transition: .3s ease all;
transition: .3s ease all;
}
.hamburgler.no-hamburgler {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.bun,
.meat {
display: block;
width: 100%;
background: #fcd455;
height: 20%;
-webkit-transition: .3s ease all;
transition: .3s ease all;
border-radius: 50px;
}
.no-hamburgler .top {
height: 38%;
width: 20%;
margin-left: 40%;
border-radius: 50px 50px 0 0;
}
.no-hamburgler .bottom {
height: 38%;
width: 20%;
margin-left: 40%;
border-radius: 0 0 50px 50px;
}
.meat {
margin: 20% 0;
}
.no-hamburgler .meat {
margin: 2% 0;
}
Your three-line hamburger menu should look like this:
Use the following JavaScript code to make sure your icon forms an X when it’s clicked:
$(document).ready(function() {
$('.hamburgler').click(function(e) {
e.preventDefault();
$(this).toggleClass('no-hamburgler');
});
Make sure you include the e.preventDefault(); function or the hamburgler menu will act as a regular link when you click it and could potentially reload the page.
Adding these animations to your hamburger menu icons can really make your icons stand out. In a world where practically everyone is implementing hamburger menus in their designs, it definitely doesn’t hurt to stand out a bit.
