<a id="hamburger-icon" href="#" title="Menu">
<span class="line line-1"></span>
<span class="line line-2"></span>
<span class="line line-3"></span>
</a>
<h1>Click to see the animation</h1>
<a href="https://twitter.com/stevenfabre" title="Follow me on twitter">@stevenfabre</a>
<a href="http://stevenfabre.com" title="Read my blog">stevenfabre.com</a>@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);
$background: #3d566e;
$color: #ecf0f1;
$height-icon: 50px;
$width-line: 100px;
$height-line: 8px;
$transition-time: 0.4s;
$rotation: 45deg;
$translateY: ($height-icon / 2);
$translateX: 0;
body {
background: $background;
color: $color;
font-family: 'Montserrat', sans-serif;
-webkit-font-smoothing: antialiased;
text-align:center;
}
#hamburger-icon {
width:$width-line;
height:$height-icon;
position:relative;
display:block;
margin: ($height-icon * 2) auto $height-icon auto;
.line {
display:block;
background:$color;
width:$width-line;
height:$height-line;
position:absolute;
left:0;
border-radius:($height-line / 2);
transition: all $transition-time;
-webkit-transition: all $transition-time;
-moz-transition: all $transition-time;
&.line-1 {
top:0;
}
&.line-2 {
top:50%;
}
&.line-3 {
top:100%;
}
}
&:hover, &:focus {
.line-1 {
transform: translateY($height-line / 2 * -1);
-webkit-transform: translateY($height-line / 2 * -1);
-moz-transform: translateY($height-line / 2 * -1);
}
.line-3 {
transform: translateY($height-line / 2);
-webkit-transform: translateY($height-line / 2);
-moz-transform: translateY($height-line / 2);
}
}
&.active {
.line-1 {
transform: translateY($translateY) translateX($translateX) rotate($rotation);
-webkit-transform: translateY($translateY) translateX($translateX) rotate($rotation);
-moz-transform: translateY($translateY) translateX($translateX) rotate($rotation);
}
.line-2 {
opacity:0;
}
.line-3 {
transform: translateY($translateY * -1) translateX($translateX) rotate($rotation * -1);
-webkit-transform: translateY($translateY * -1) translateX($translateX) rotate($rotation * -1);
-moz-transform: translateY($translateY * -1) translateX($translateX) rotate($rotation * -1);
}
}
}
h1 {
text-transform:uppercase;
}
a {
text-decoration:none;
color:#95a5a6;
margin: 0.5em 1.5em;
display:inline-block;
&:hover, &:focus {
color:$color;
}
}$( document ).ready(function() {
var hamburger = $('#hamburger-icon');
hamburger.click(function() {
hamburger.toggleClass('active');
return false;
});
});
External CSS
This Pen doesn't use any external CSS resources.