Skip to content

Instantly share code, notes, and snippets.

@verticalgrain
Created June 2, 2014 17:13
Show Gist options
  • Save verticalgrain/30ba1f1cab733c8f9415 to your computer and use it in GitHub Desktop.
Save verticalgrain/30ba1f1cab733c8f9415 to your computer and use it in GitHub Desktop.
Animated hamburger navigation icon
/* The navigation button x close effect
/* with help from: http://sarasoueidan.com/blog/navicon-transformicons/
/* + + + + + + + + + + + + + + + + + + + + + + + + + + + */
$button-size : 18px;
$transition: .3s; // adjust this to adjust animation speed
/* Styles for the button itself */
button.lines-button {
position: absolute;
z-index: 101;
width: 44px;
height: 44px;
display: inline-block;
padding: $button-size/2 $button-size/4;
@include transition-duration(.3s);
cursor: pointer;
user-select: none;
top: 240px;
left: 22px;
border: 0px;
outline: none;
@include border-radius(50%);
background: #848b7b;
background: rgba(0,0,0,0.2);
&:hover {
opacity: 1;
}
&:active {
@include transition-duration(0s);
background: rgba(0,0,0,.1);
}
}
/* Styles and a mixin to create the lines of the hamburger */
@mixin line {
display: inline-block;
width: 18px;
height: 3px;
background: white;
@include transition-duration(.3s);
}
.lines {
@include line;
position: relative;
top: -3px;
/*create the upper and lower lines as pseudo-elements of the middle line*/
&:before, &:after {
@include line;
position: absolute;
left: 0;
content: '';
@include transform-origin(1.3, center);
}
&:before { top: $button-size/3; }
&:after { top: -$button-size/3; }
}
/* The hover state on the button - the lines separate slightly */
.lines-button:hover {
@include opacity(1);
.lines {
&:before { top: $button-size/3.5; }
&:after { top: -$button-size/3.5; }
}
}
/* When you click the button, trigger the X animation effect */
.lines-button.closeit {
}
.lines-button.closeit .lines{
&:before,
&:after {
top: 0;
width: 18px;
}
&:before { @include rotate3d(0,0,1,40deg); }
&:after { @include rotate3d(0,0,1,-40deg); }
}
.lines-button.closeit .lines{
&:before, &:after{
-webkit-transform: none;
width: $button-size;
top:0;
}
}
.lines-button.closeit .lines{
/*hide the middle line*/
background: transparent;
/*overlay the lines by setting both their top values to 0*/
&:before, &:after{
@include transform-origin(50% 50%);
top:0;
width: $button-size;
}
// rotate the lines to form the x shape
&:before{
@include rotate3d(0,0,1,45deg);
}
&:after{
@include rotate3d(0,0,1,-45deg);
}
}
/* The button for IE 9 and under
/* + + + + + + + + + + + + + + + + + + + + + + + + + + + */
html.ltie9 {
button.lines-button {
background: transparent url(../../images/icon/ubc-stories-hamburger-nav.png) no-repeat center center;
&:hover {
@include opacity(0.5);
background-color: transparent;
}
.lines {
display: none;
}
}
}
<button class="stories-menu-hamburger lines-button arrow arrow-left" type="button" role="button" aria-label="Toggle Navigation">
<span class="lines"></span>
</button>
$(document).ready(function() {
$('button.lines-button').click(function() {
$(this).toggleClass('closeit');
$('#nav-panel').slideToggle('slow','swing',function() {
console.log('animation complete');
});
})
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment