Tips&Tricks How to create stunning animated navigation icons
Love CSS animations and transforms? In this simple tutorial I’ll show you how to use these 2 things to create beautiful animated navigation icons – icon transforms from “hamburger” to “x” icon.
You can use this tutorial in combination with our simple offcanvas navigation menu – this icon fits perfectly as an offcanvas toggle icon.
Introduction
Before we start you should see what we’re trying to achieve here. This is a live demo of our project on codepen. To see the icons in action just click on them.
See the Pen Animated HTML, CSS, jQuery navigation icons by Alen (@alenvuletic) on CodePen.
This icons are built on HTML, CSS and jQuery as you can see in codepen. Besides that we’ve included animate.css for CSS animations. The whole CSS is written in LESS language, so if you want to see the compiled version just click on the “View compiled” button in codepen CSS section. CSS and JS files are documented with useful comments which tells you which code is important to include if you want for your icons to work properly. Also there are some variables that you can change – for example to change the colour of the buttons or to change the animation.
The HTML
The HTML for this tutorial is very simple. We’ll just add an “.icon” div with 3 “spans” in it. These “spans” will be bars in our “hamburger” icon.
Also we have to include the animate.css stylesheet. Later we’ll pull CSS animations from that stylesheet. To do that just add this line of code to your <head></head>.
The JavaScript
To make everything work we have to add some JavaScript code. We’ll create toggle that will add / remove “.icon–active” class on “.icon” div when we click on it. Later we’ll use that class in CSS to style the icon when it’s active.
Also we have to add some classes on “.icon” div to call CSS animations from animate.css. We will do that with this code:
Now you are able to change animation through your JS file, just change the value of “animation” variable. In comment you can find list of animations names you can use. Also if you want to disable animation just comment out the code above.
The CSS
In this article I’ll include only important CSS code that is necessary for icons to work properly. Firstly we’ll style the icon’s default state.
Now we have to add some styles to the style icon when it has the “.icon–active” class.
Conclusion
To finish off if you’ve implemented everything as it is in our codepen on top of the article you should get beautifully animated navigation icons.
It’s over to you! Now you can play around with animations and shapes and be creative. I’d love to hear what you think of my post on how to create animated navigation icons.
