Animated Navigation Icons with CSS3 Transforms

Navicon Transformicons provides a simple way to create Animated Navigation Icons with CSS3 Transforms.

Demo

Download

How to use it:

Include Navicon Transformicons stylesheet in your document.

<link rel="stylesheet" href="css/style.css">

Add buttons on your web page using Html button element.

<button type="button" role="button" aria-label="Toggle Navigation" class="lines-button arrow arrow-left"> <span class="lines"></span> </button>
<button type="button" role="button" aria-label="Toggle Navigation" class="lines-button arrow arrow-up"> <span class="lines"></span> </button>
<button type="button" role="button" aria-label="Toggle Navigation" class="lines-button minus"> <span class="lines"></span> </button>
<button type="button" role="button" aria-label="Toggle Navigation" class="lines-button x"> <span class="lines"></span> </button>
<button type="button" role="button" aria-label="Toggle Navigation" class="lines-button x2"> <span class="lines"></span> </button>
<button type="button" role="button" aria-label="Toggle Navigation" class="grid-button rearrange"> <span class="grid"></span> </button>
<button type="button" role="button" aria-label="Toggle Navigation" class="grid-button collapse"> <span class="grid"></span> </button>

The javascript.

<script>
    var anchor = document.querySelectorAll('button');
    [].forEach.call(anchor, function(anchor){
      var open = false;
      anchor.onclick = function(event){
        event.preventDefault();
        if(!open){
          this.classList.add('close');
          open = true;
        }
        else{
          this.classList.remove('close');
          open = false;
        }
      }
    }); 
  </script>