Animated Navigation Icons with jQuery and CSS3

Category: Animation , Javascript | June 16, 2014
Views Total:4,482 views
Official Page:Go to website
Last Update:June 16, 2014


Animated Navigation Icons with jQuery and CSS3


A set of navigation icons with smooth transition effects when clicked on, built with CSS3 transitions & transforms and a little jQuery script. No images required. Created by hugo.

How to use it:

Build the basic styles for the navigation icons.

.menu1 {
  cursor: pointer;
  display: inline-block;
  font-size: 10px;
  height: 6em;
  margin: 2%;
  position: relative;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  width: 6em;
  -webkit-tap-highlight-color: transparent;
.menu1 span {
  background: #222222;
  border-radius: 2em;
  height: 0.8em;
  position: absolute;
  -webkit-transition: 0.2s ease-in-out;
  transition: 0.2s ease-in-out;
  width: 100%;
  -webkit-tap-highlight-color: transparent;

Create a toggle menu that will be transform into a close button when clicked on.

<div class="icon menu1"> <span></span> <span></span> <span></span> </div>
<div class="icon menu1 open"> <span></span> <span></span> <span></span> </div>

The CSS/CSS3 rules for the animated toggle icon.

.menu1 span { left: 0; }
.menu1 span:nth-child(1) { top: 1em; }
.menu1 span:nth-child(2) { top: 2.6em; }
.menu1 span:nth-child(3) { top: 4.2em; }
.open.menu1 span:nth-child(1) {
  -webkit-transform: rotate(45deg) translate(1.1em, 1.1em);
  -ms-transform: rotate(45deg) translate(1.1em, 1.1em);
  transform: rotate(45deg) translate(1.1em, 1.1em);
.open.menu1 span:nth-child(2) { opacity: 0; }
.open.menu1 span:nth-child(3) {
  -webkit-transform: rotate(-45deg) translate(1.1em, -1.1em);
  -ms-transform: rotate(-45deg) translate(1.1em, -1.1em);
  transform: rotate(-45deg) translate(1.1em, -1.1em);

Include the latest version of jQuery javascript library at the end of the page.

<script src=""></script>

The Javascript to enable the animation on the toggle icon.

$('.icon').on('click', function() {

You Might Be Interested In:

Leave a Reply