Vizune Designs - Hamburger icon animation

Create your hamburger icon in HTML. 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.

<div id="navbar">
  <button type="button" class="navbar-toggle" 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>
</div>

At the end of the <body> tag, add a <script> tag which will encapsulate the toggle functionality in JavaScript. 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. We need to add / remove a class name on the hamburger icon when it is clicked.
```
<script>
  $('.navbar-toggle').click(function () {
    $(this).toggleClass('open');
  });
</script>
</body>
</html>
```

Now you don’t have to touch JavaScript any more and it’s time for the CSS3 magic. First, I’m going start with the appearance of the button itself.

.navbar-toggle {
    padding: 0;
    margin: 0;
    height: 50px;
    width: 50px;
    border: none;
    background: #262c30;
    border-radius: 5px;
}
.navbar-toggle:focus {outline: none;}

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 uses two of those properties which are transition-duration and transition-property.
```
.navbar-toggle .icon-bar {
  display: block;
  position: absolute;
  opacity: 1;
  width: 30px;
  height: 2px;
  right: 10px;
  background: #29cc65;
  transition: .2s ease-in-out;
}
```
I can select the individual icon bars in CSS by using nth-of-type. The :nth-of-type(n) selector matches every element that is the nth child, of a particular type, of its parent.
There is a <span> tag used for accessibility (which will be explained in step 7) so we need to select the first icon bar with ":nth-of-type(2)" because it is the 2nd span in the button. The CSS below handles the positioning of the other two bars.
```
.navbar-toggle .icon-bar:nth-of-type(2) {
	top:23px;
}
.navbar-toggle .icon-bar:nth-of-type(3) {
	top:31px;
}
```
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.
```
.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);
}
```
And finally we need to styling the first span text inside the button. The button needs text inside to add more context on what it does for visitors to the site that use screen reader software. This tends to be people that have eye sight difficulties. The user will tab through the webpage and software reads out the content.
```
.sr-only {
	position:absolute;
	width:1px;
	height:1px;
	padding:0;
	margin:-1px;
	overflow:hidden;
	clip:rect(0,0,0,0);
	white-space:nowrap;
	border-width: 0;
}
```
And now you have an animating hamburger icon! You can see the demo of this result here.