Blog

Part 1: How to create an Animated Hamburger Button with CSS and jQuery for your Responsive Website

Web design has evolved over the years into a more complex art form. Careful thought and consideration needs to be placed into developing a site that works across all platforms and screen dimensions. One of the most important aspects of responsive web design is the navigation. It typically needs to be hidden and accessed via a button in order to streamline the design and make room for important content. Now-a-days, everyone is familiar with the 3 dash navigation symbol that have been duly nicknamed ‘hamburger buttons’, this is the standard in navigation buttons. In the beginning we would just use images as our hamburger buttons but now we like to use pure CSS over images whenever possible. This resulted in the development of a pure CSS hamburger button that we took a step further by adding a nice open and close transition animation. In this tutorial we will teach you how to create an animated hamburger button with CSS and jQuery for your responsive website.

Step 1: Create the HTML Structure for your Hamburger Button

In the first step we will set up the main HTML structure for the navigation button otherwise known as a hamburger button.

HTML

<a id="nav_btn"><span>Toggle Menu</span></a>

Items to Note:

  • Take note of the CSS ID ‘nav_btn’ added to the HTML element, it will be referenced throughout this tutorial.
  • Any call to action text (Toggle Menu) can be used, just note that it will be hidden and not actually visible.
  • Any HTML element can be utilized.

Step 2: Use Pure CSS to Style your Hamburger Button

In the next step we will reference the ID used on the hamburger button in Step 1 and style it with CSS.

CSS

#nav_btn{
display: block;
float: right;
padding: 20px;
cursor: pointer;
}
#nav_btn span, #nav_btn span::before, #nav_btn span::after{
width: 28px;
height: 4px;
float: left;
display: block;
background: #000;
position: relative;
text-indent: -9000px;
}
#nav_btn span{ margin: 8px 0; }
#nav_btn span::before, #nav_btn span::after{
content: '';
position: absolute;
}
#nav_btn span::before{ top: -8px; }
#nav_btn span::after{ bottom: -8px; }

Items to Note:

  • Make sure that you are referencing the same ID placed on your HTML element.
  • Adjust the padding on #nav_btn if necessary.
  • We feel that we have developed a pretty standard size for the button but if you need to change the height, you will then also need to adjust the margin as well as the positioning for the span tags.
  • Adjust the background color to adapt to your website’s design.

Step 3: Set up the CSS Transitions for your Hamburger Button Animations

Now that we have the core HTML structure and CSS styling complete for our navigation button, we will now need to add the CSS transitions that will be used along with jQuery (next step) to power the animation. The animation that we are applying to our hamburger button will transform it into an X when clicked on and then back to the hamburger button when clicked again.

CSS

#nav_btn span, #nav_btn span:before, #nav_btn span:after{
-webkit-transition: all 100ms ease-in-out;
-moz-transition: all 100ms ease-in-out;
-ms-transition: all 100ms ease-in-out;
-o-transition: all 100ms ease-in-out;
transition: all 100ms ease-in-out;
}
#nav_btn.active span{ background-color: transparent; }
#nav_btn.active span::before, #nav_btn.active span::after{ top: 0; }
#nav_btn.active span:before{
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
#nav_btn.active span::after{
transform: translateY(-10px) rotate(-45deg);
-webkit-transform: translateY(-10px) rotate(-45deg);
top: 10px;
}

Items to Note:

  • Make sure that you are referencing the same ID placed on your HTML element.
  • The first block of CSS can be added to the already pre-existing CSS. (Reference the complete code at the end of the tutorial.)
  • Do not adjust anything in the code for this step.
  • Nothing will animate yet until Step 4 is completed.

Step 4: Use jQuery to trigger the CSS Animations for your Hamburger Button

The final step in this tutorial is brining your CSS animations to life by using a simple jQuery click function to toggle the ‘active’ class on and off.

jQuery

$(document).ready(function() {
	$('#nav_btn').click(function(e) {
		$(this).toggleClass("active");
		e.preventDefault();
	});
});

Items to Note:

  • Make sure that you are referencing the same ID placed on your HTML element.
  • This step relies on the jQuery JavaScript library in order to function; you must either link directly to jQuery or download the latest version and upload it to your server.
  • This jQuery is temporary and only being used to actually trigger the CSS animations; it will be updated in Part 2 of this tutorial series.

Download jQuery

You can download the latest version of jQuery below:

Download jQuery

Full Code

HTML

<id="nav_btn"><span>Toggle Menu</span></a>

CSS

#nav_btn{
display: block;
float: right;
padding: 20px;
cursor: pointer;
}
#nav_btn span, #nav_btn span::before, #nav_btn span::after{
width: 28px;
height: 4px;
float: left;
display: block;
background: #000;
position: relative;
text-indent: -9000px;
}
#nav_btn span{ margin: 8px 0; }
#nav_btn span::before, #nav_btn span::after{
content: '';
position: absolute;
}
#nav_btn span::before{ top: -8px; }
#nav_btn span::after{ bottom: -8px; }
#nav_btn span, #nav_btn span:before, #nav_btn span:after{
-webkit-transition: all 100ms ease-in-out;
-moz-transition: all 100ms ease-in-out;
-ms-transition: all 100ms ease-in-out;
-o-transition: all 100ms ease-in-out;
transition: all 100ms ease-in-out;
}
#nav_btn.active span{ background-color: transparent; }
#nav_btn.active span::before, #nav_btn.active span::after{ top: 0; }
#nav_btn.active span:before{
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
#nav_btn.active span::after{
transform: translateY(-10px) rotate(-45deg);
-webkit-transform: translateY(-10px) rotate(-45deg);
top: 10px;
}

jQuery

$(document).ready(function() {
	$('#nav_btn').click(function(e) {
		$(this).toggleClass("active");
		e.preventDefault();
	});
});

LIVE DEMO

View Demo

PART 2: How to Show and Hide your Navigation using Media Queries and jQuery for your Responsive Website

In part 2 of this tutorial we will teach you how to show and hide your newly designed pure CSS hamburger button and navigation using Media Queries and jQuery for your responsive website.

Coming Soon

Troubleshooting

If you are having problems getting this tutorial to work please reread the tutorial and try again, if you still cannot get it to work please leave us a comment below and we will respond as soon as possible. Please do not email us with problems regarding this tutorial, only comments will be responded to.