Hamburger icon animation

Intermediate CSS / Beginner jQuery tutorial: With CSS and just two lines of jQuery, you can toggle your hamburger icon to animate into a cross symbol. This tutorial also includes how to achieve this using the Bootstrap 3 navigation template.

Demo

  1. Before we start, make sure you are using the HTML5 doctype when creating your web page.
    <!DOCTYPE html>
    <html>
    <head>
    
  2. Create your hamburger icon in HTML. For the Bootstrap version, I have added an extra class name that numbers the bars (e.g. “icon-bar-one”) in the hamburger icon to help differentiate them in the CSS and select them individually. For the standard HTML version, I have used the same class names for simplicity but feel free to use your own.
     
    HTML:

    <button type="button" class="navbar-toggle">
       <span class="icon-bar"></span>
       <span class="icon-bar"></span>
       <span class="icon-bar"></span>
    </button>
    

     
    HTML with Bootstrap:

    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
       <span class="sr-only">Toggle navigation</span>
       <span class="icon-bar icon-bar-one"></span>
       <span class="icon-bar icon-bar-two"></span>
       <span class="icon-bar icon-bar-three"></span>
    </button>
    
  3. In order to use jQuery, you need to load the library’s script on your page. It is recommended to run your scripts near the end of your HTML before the </body> rather than in the <head> section. Web pages load asynchronously so doing this will reduce page load times because your scripts are being requested after the page load and not during page load. You can download the script from the jQuery website.
    <script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
    </body>
    </html>
  4. It is advised to keep all your JavaScript in .js files but for the sake of simplicity in this tutorial I have added my code in the HTML directly underneath he line were I load in the jQuery library. This jQuery function will add “toggle” functionality to your hamburger button which will add and remove the class “open” (you can change this to any class name you prefer) every time it is clicked.
    <script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
    <script>
    $('.navbar-toggle').click(function () {
        $(this).toggleClass('open');
    });
    </script>
    </body>
    </html>
  5. toggle-classYou can test this code by opening the Developer Tools of your web browser (F12 on most browsers). Keep an eye on the class name changing when you click on the button.
  6. Now you don’t have to touch jQuery any more and it’s time for the CSS3 magic. First, I’m going start with some basic CSS for the appearance of the button itself. With Boostrap Version 3, sometimes you have to overwrite existing CSS from Bootstrap which is why I have included padding: 0; margin: 0; border: none;.Bootstrap also add a blue outline on the focus state of the hamburger icon so I have removed that for my example but it is advised to have focus states in your CSS for accessibility.
    .navbar-toggle {
        padding: 0;
        margin: 0;
        height: 50px;
        width: 50px;
        border: none;
        background: #262c30;
        border-radius: 5px;
    }
    .navbar-toggle:focus {outline: none;}
  7. For the individual bar in the hamburger icon, I have given them a absolute position, set the opacity as 1 (this is going to change when the button is clicked), set the width & height and color of the bars.

    CSS3 transitions allows you to change property values smoothly (from one value to another), over a given duration. Transition consists of the following properties: transition-delay, transition-duration, transition-property and transition-timing-function. The example below only includes two properties which means the other properties will be default e.g. I didn’t specify the transition-property so the default will be “all” and I didn’t specify a transition-delay so my animation will be immediate. At the time of this tutorial being written, transition doesn’t need any prefixes, however this may change.

    .navbar-toggle .icon-bar {
    	display:block;
    	position:absolute;
    	opacity:1;
    	width:30px;
    	height: 2px;
    	right:10px;
    	background:#29cc65;
    	transition:.2s ease-in-out;
    }
  8. This is when things differentiate a bit between Bootstrap and non-Bootstrap. I can be a bit clever when selecting the individual icon bars in CSS and use nth-of-type. The :nth-of-type(n) selector matches every element that is the nth child, of a particular type, of its parent.

    However, in Bootstrap there is a span tag that reads “Toggle navigation” for screen readers (accessibility) before your icon bars (which are also spans) so this doesn’t work. You could just increase the number by one to ignore this screen reader message. Or you can simply add a class name to differentiate between each icon bar (see step 2) and use that second class name in your CSS.
     
    HTML:

    .navbar-toggle .icon-bar:nth-of-type(1) {
    	top:16px;
    }
    .navbar-toggle .icon-bar:nth-of-type(2) {
    	top:23px;
    }
    .navbar-toggle .icon-bar:nth-of-type(3) {
    	top:31px;
    }
    

    HTML with Bootstrap:

    .navbar-toggle .icon-bar.icon-bar-one {
    	top:16px;
    }
    .navbar-toggle .icon-bar.icon-bar-two {
    	top:23px;
    }
    .navbar-toggle .icon-bar.icon-bar-three {
    	top:31px;
    }
    
  9. The last step, I am going to define the property values that will be changing when a user click on the icon and the “open” class is activated. The CSS is going to see that these property values have changed and transition to that state. In the animation, the top and bottom bar are going to move position and rotate into an “X” symbol whilst middle bar fades away and reduces the width into 0.
     
    HTML:

    .navbar-toggle.open .icon-bar:nth-of-type(1) {
    	top:23px;
    	-webkit-transform:rotate(135deg);
    	-moz-transform:rotate(135deg);
    	-o-transform:rotate(135deg);
    	transform:rotate(135deg);
    }
    .navbar-toggle.open .icon-bar:nth-of-type(2) {
    	opacity:0;
    	width:0;
    }
    .navbar-toggle.open .icon-bar:nth-of-type(3) {
    	top:23px;
    	-webkit-transform:rotate(-135deg);
    	-moz-transform:rotate(-135deg);
    	-o-transform:rotate(-135deg);
    	transform: rotate(-135deg);
    }
    

    HTML with Bootstrap:

    .navbar-toggle.open .icon-bar.icon-bar-one {
    	top:23px;
    	-webkit-transform:rotate(135deg);
    	-moz-transform:rotate(135deg);
    	-o-transform:rotate(135deg);
    	transform:rotate(135deg);
    }
    .navbar-toggle.open .icon-bar.icon-bar-two {
    	opacity:0;
    	width:0;
    }
    .navbar-toggle.open .icon-bar.icon-bar-one {
    	top:23px;
    	-webkit-transform:rotate(-135deg);
    	-moz-transform:rotate(-135deg);
    	-o-transform:rotate(-135deg);
    	transform: rotate(-135deg);
    }
    

And now you have an animating hamburger icon! You can see the demo of this result here. I would greatly appreciate any feedback and feel free to request a tutorial.

Share
  •  
  •  
  •  
  •  
  •  
  •  
  •  

Leave a Reply

Your email address will not be published. Required fields are marked *