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="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

The Javascript to enable the animation on the toggle icon.

$('.icon').on('click', function() {
    $(this).toggleClass('open');
});