A navicon menu is a popular element on almost all modern websites. It is sometimes referred to as a hamburger menu or a three-line menu. I would say the “three-line” is now an inoperable term because some websites have adopted more than three horizontal lines and others have come up with a totally different style. Another example of hamburger menu usage is when the icon is revealed on narrower screens. Nevertheless, navicons reveal menu lists when you click on them and thus help in your responsive design layout.
Now, they are many ways of creating navicon or hamburger menus: PNG or JPEG images, SVGs or creating elements such as spans or divs or whatever other html elements and then style them using CSS to resemble a navicon menu . For the purpose of this tutorial, will create our navicon menus using the latter. A word of caution though, the animations will work on modern browsers only. With that in mind, lets create and animate five hamburger menu examples with CSS3 animations and a teeny-weeny bit of jQuery.
HTML Markup
The HTML markup is pretty simple and straight forward. The navicon menus have the same class, menuTrigger, and a unique ID.
<section id="contentArea" class="centerLayout">
<span class="menuTrigger" id="hamburger-one">
<span class="mainLine"></span>
</span>
<span class="menuTrigger" id="hamburger-two">
<span class="mainLine"></span>
</span>
<span class="menuTrigger" id="hamburger-three">
<span class="mainLine"></span>
</span>
<span class="menuTrigger" id="hamburger-four">
<span class="smallboxes smallbox1"></span>
<span class="smallboxes smallbox2"></span>
<span class="smallboxes smallbox3"></span>
<span class="smallboxes smallbox4"></span>
<span class="smallboxes smallbox5"></span>
<span class="smallboxes smallbox6"></span>
<span class="smallboxes smallbox7"></span>
<span class="smallboxes smallbox8"></span>
<span class="smallboxes smallbox9"></span>
</span>
<span class="menuTrigger" id="hamburger-five">
<span class="mainLine"></span>
</span>
</section>
CSS
We’ll start off by styling the navicon menu general class, menuTrigger. We’ll then use the span with class, mainLine , found on our first three navicon menus and the last navicon to create the :before and :after pseudo-elements.
.menuTrigger {
display: inline-block;
width: 50px;
height: 32px;
position: relative;
cursor: pointer;
margin: 0 3%;
vertical-align: middle;
}
.mainLine {
position: absolute;
left: 0;
top: 50%;
width: 100%;
height: 6px;
margin-top: -3px;
background: #fff;
transition: all linear 0.3s;
}
.mainLine:after, .mainLine:before {
content: "";
position: absolute;
left: 0;
display: block;
width: 100%;
height: 6px;
background: #fff;
transform: rotate(0);
transition: all linear 0.3s;
}
.mainLine:before {
top: -13px;
}
.mainLine:after {
top: 13px;
}
We can make the first three navicon menus come to life by adding some simple hover effects by making the pseudo-elements change their positions a bit.
#hamburger-one:hover .mainLine:before {
top: -16px;
}
#hamburger-one:hover .mainLine:after {
top: 16px;
}
#hamburger-two:hover .mainLine:before {
top: -10px;
}
#hamburger-two:hover .mainLine:after {
top: 10px;
}
#hamburger-three:hover .mainLine:before {
top: -10px;
}
#hamburger-three:hover .mainLine:after {
top: 10px;
}
The fourth navicon menu with id, hamburger-four, will have a grid like structure. As you look at the HTML mark up above for hamburger-four, you’ll see nine span with class smallboxes. Using the span, we’ll create our grid navicon menu by absolutely positioning each of the span.
.smallboxes {
display: block;
height: 6px;
width: 6px;
background: #fff;
position: absolute;
transform: translate(0px,0px);
transition: all linear 0.3s;
}
.smallbox1 {
left: 0;
top: 0;
}
.smallbox2 {
left: 15px;
top: 0;
}
.smallbox3 {
left: 30px;
top: 0;
}
.smallbox4 {
left: 0px;
top: 15px;
}
.smallbox5 {
left: 15px;
top: 15px;
}
.smallbox6 {
left: 30px;
top: 15px;
}
.smallbox7 {
left: 0px;
top: 30px;
}
.smallbox8 {
left: 15px;
top: 30px;
}
.smallbox9 {
left: 30px;
top: 30px;
}
The fifth navicon has the same styling like the first three but it’s a bit longer, has a background color and a colored strip at the bottom. The background color is placed on the navicon container.
#hamburger-five {
background: #fff;
height: 55px;
}
We’ll create the colored strip at the bottom of the fifth hamburger menu by adding an :after pseudo-element to #hamburger-five
#hamburger-five:after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 6px;
background: #000;
transition: all linear 0.3s;
}
We’ll re-adjust the mainline and its pseudo-elements.
#hamburger-five .mainLine {
background: #000;
width: 58%;
height: 4px;
left: 50%;
margin-left: -29%;
z-index: 9;
}
#hamburger-five .mainLine:after, #hamburger-five .mainLine:before {
background: #000;
height: 4px;
transition: all linear 0.5s;
}
#hamburger-five .mainLine:after {
top: -9px;
}
#hamburger-five .mainLine:before {
top: 9px;
}
We’ll add a hover effect on the fifth navicon menu to make it more adorable by making the colored strip cover the full height of its container and also make the pseudo-elements change color and their top CSS positions repositioned.
#hamburger-five:hover:after {
height: 100%;
}
#hamburger-five:hover .mainLine {
background: #fff;
}
#hamburger-five:hover .mainLine:before {
background: #fff;
top: 13px;
}
#hamburger-five:hover .mainLine:after {
background: #fff;
top: -13px;
}
Apart from the fifth navicon menu, the rest of the hamburger menus will animate when clicked on. This will be achieved by toggling menuToggle class with jQuery .
$('.menuTrigger').on("click",function(){
$(this).toggleClass('menuToggle')
});
As each of the first three navicon menus are clicked on, they would animate into different forms. We’ll start with the first navicon menu which animates into an X. From the CSS below, when we add menuToggle the mainLine has a transparent background to make it invisible while its pseudo-elements are rotated at angles to make an x-shape using transform rotate();
#hamburger-one.menuToggle .mainLine {
background: transparent;
transition: all 0.3s linear ;
}
#hamburger-one.menuToggle .mainLine:before {
visibility: visible;
top: 0 !important;
transform: rotate(45deg);
}
#hamburger-one.menuToggle .mainLine:after {
visibility: visible;
top: 0 !important;
transform: rotate(-45deg);
}
The second navicon menu has an abstract shape when added the class menuToggle . The .mainLine:before and .mainLine:after have their width scaled using transform scale() and then positions changed to produce the abstract shape.
#hamburger-two.menuToggle .mainLine:before, #hamburger-two.menuToggle .mainLine:after {
transform: scale(0.8,1);
}
#hamburger-two.menuToggle .mainLine:before {
top: -10px;
}
#hamburger-two.menuToggle .mainLine:after {
top: 10px;
}
The third navicon menu produces a minus when added the class menuToggle. The .mainLine:before and .mainLine:after top positions are moved to the .mainLine position to create a minus sign. Then the .mainLine is scaled down after a 0.6s delay, transition: all 0.7s linear 0.6s;
#hamburger-three .mainLine {
transition: all 0.5s linear;
}
#hamburger-three.menuToggle .mainLine:before, #hamburger-three.menuToggle .mainLine:after {
top: 0 !important;
transition: all linear 0.5s;
}
#hamburger-three.menuToggle .mainLine {
background: rgba(255, 255, 255, 0);
transform: scale(0.6);
transition: all 0.7s linear 0.6s;
}
Our fourth hamburger menu creates a compressed grid when added the menuToggle class. This is made possible by translating the positions of each of the smallboxes using transform translate().
#hamburger-four.menuToggle .smallbox1 {
transform: translate(5px,5px);
}
#hamburger-four.menuToggle .smallbox2 {
transform: translate(0px,5px);
}
#hamburger-four.menuToggle .smallbox3 {
transform: translate(-5px,5px);
}
#hamburger-four.menuToggle .smallbox4 {
transform: translate(5px,0px);
}
#hamburger-four.menuToggle .smallbox5 {
transform: translate(0px,0px);
}
#hamburger-four.menuToggle .smallbox6 {
transform: translate(-5px, 0px);
}
#hamburger-four.menuToggle .smallbox7 {
transform: translate(5px, -5px);
}
#hamburger-four.menuToggle .smallbox8 {
transform: translate(0px, -5px);
}
#hamburger-four.menuToggle .smallbox9 {
transform: translate(-5px, -5px);
}
Our simple CSS3 animations on the navicon menus are easy to implement on your next project and I hope you find them useful. Download the files to get the full codes used.
