<link href='https://fonts.googleapis.com/css?family=Source+Code+Pro:200,300' rel='stylesheet' type='text/css'>
<h1>CLICK THE NAVICON</h1>
<div class="menu">
<span class="menu-global menu-top"></span>
<span class="menu-global menu-middle"></span>
<span class="menu-global menu-bottom"></span>
</div>@import "compass/css3";
body {
background: darken(#34c4e8, 10%);
padding: 60px;
}
h1 {
color: lighten(#34c4e8, 30%);
font-family: 'Source Code Pro', sans-serif;
font-weight: 200;
margin: 0 0 40px;
text-align: center;
}
.menu {
cursor: pointer;
margin: 0 auto;
padding-left: 1.25em;
position: relative;
width: 40px;
height: 40px;
}
.menu-global {
backface-visibility: hidden;
position: absolute;
left: 0;
border-top: 7px solid white;
width: 100%;
transition: 0.55s;
}
.menu-top {
top: 0;
}
.menu-middle {
top: 18px;
}
.menu-bottom {
top: 36px;
}
.menu-top-click {
backface-visibility: hidden;
top: 15px;
transform: rotate(50deg);
transition: 0.55s 0.5s;
}
.menu-middle-click {
opacity: 0;
}
.menu-bottom-click {
backface-visibility: hidden;
top: 15px;
transform: rotate(-410deg);
transition: 0.55s 0.5s;
}var Menu = {
el: {
ham: $('.menu'),
menuTop: $('.menu-top'),
menuMiddle: $('.menu-middle'),
menuBottom: $('.menu-bottom')
},
init: function() {
Menu.bindUIactions();
},
bindUIactions: function() {
Menu.el.ham
.on(
'click',
function(event) {
Menu.activateMenu(event);
event.preventDefault();
}
);
},
activateMenu: function() {
Menu.el.menuTop.toggleClass('menu-top-click');
Menu.el.menuMiddle.toggleClass('menu-middle-click');
Menu.el.menuBottom.toggleClass('menu-bottom-click');
}
};
Menu.init();
External CSS
This Pen doesn't use any external CSS resources.