Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
<style>
:root {
--barHeight: 20%;
}
#hamburger {
width: 30px;
height: 30px;
overflow: hidden;
position: relative;
border: 10px solid transparent;
box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.2);
border-radius: 3px;
}
#hamburger > div {
width: 100%;
height: var(--barHeight);
background: #333;
transition: 0.5s all ease;
position: relative;
position: absolute;
transform: rotate(0);
}
#hamburger > div:nth-child(1) {
top:0;
}
#hamburger > div:nth-child(2) {
top: calc( 50% - ( var(--barHeight) / 2 ) );
}
#hamburger > div:nth-child(3) {
bottom:0;
}
/* opened */
#hamburger.open > div:nth-child(1) {
transform: rotate(45deg);
top: calc( 50% - ( var(--barHeight) / 2 ) );
}
#hamburger.open > div:nth-child(2) {
transform: translateX(-100%);
transition: 0.25s transform ease;
}
#hamburger.open > div:nth-child(3) {
transform: rotate(-45deg) ;
bottom: calc( 50% - ( var(--barHeight) / 2 ) );;
}
</style>
<div id='hamburger'>
<div></div>
<div></div>
<div></div>
</div>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(window).load(function() {
$('#hamburger').on('click',function(){
$('#hamburger').toggleClass('open')
})
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment