Expanding on the work of Bennet Feeley http://codepen.io/bennettfeely/details/twbyA
Forked from Hugo Darby-Brown's Pen Animated Navicons .
A Pen by Secret Sam on CodePen.
<h1>Animated Navicons</h1> | |
<section> | |
<div class="icon menu1"> | |
<span></span> | |
<span></span> | |
<span></span> | |
</div> | |
<div class="icon menu1 open"> | |
<span></span> | |
<span></span> | |
<span></span> | |
</div> | |
</section> | |
<section> | |
<div class="icon menu2"> | |
<span></span> | |
<span></span> | |
</div> | |
<div class="icon menu2 open"> | |
<span></span> | |
<span></span> | |
</div> | |
</section> | |
<section> | |
<div class="icon menu3"> | |
<span></span> | |
<span></span> | |
<span></span> | |
</div> | |
<div class="icon menu3 open"> | |
<span></span> | |
<span></span> | |
<span></span> | |
</div> | |
</section> | |
<section> | |
<div class="icon menu4"> | |
<span></span> | |
<span></span> | |
<span></span> | |
<span></span> | |
<span></span> | |
</div> | |
<div class="icon menu4 open"> | |
<span></span> | |
<span></span> | |
<span></span> | |
<span></span> | |
<span></span> | |
</div> | |
</section> | |
<section> | |
<div class="icon menu5"> | |
<span></span> | |
<span></span> | |
<span></span> | |
<span></span> | |
</div> | |
<div class="icon menu5 open"> | |
<span></span> | |
<span></span> | |
<span></span> | |
<span></span> | |
</div> | |
</section> | |
$('.icon').on('click', function() { | |
$(this).toggleClass('open'); | |
}); |
@import "compass/css3"; | |
$icon-settings: ( | |
font-size: 10px, // changes size of icons | |
border-radius: 2em, | |
color: #222, | |
transition-duration: 0.2s, | |
timing-function: ease-in-out | |
); | |
@function setting($key) { | |
@if map-has-key($icon-settings, $key) { | |
@return map-get($icon-settings, $key); | |
} | |
@warn "Unknown `#{$key}` in $icon-settings."; | |
@return null; | |
} | |
/* ========= Menu Icon Base ======== */ | |
%icon { | |
cursor: pointer; | |
display: inline-block; | |
font-size: setting(font-size); | |
height: 6em; | |
margin: 2%; | |
position: relative; | |
user-select: none; | |
width: 6em; | |
-webkit-tap-highlight-color: rgba(0,0,0,0); | |
span { | |
background: setting(color); | |
border-radius: setting(border-radius); | |
height: 0.8em; | |
position: absolute; | |
transition: setting(transition-duration) setting(timing-function); | |
width: 100%; | |
-webkit-tap-highlight-color: rgba(0,0,0,0); | |
} | |
} | |
/* ============ Menu1 ============ */ | |
%menu1 { | |
@extend %icon; | |
span{ | |
left: 0; | |
&:nth-child(1) { | |
top: 1em; | |
} | |
&:nth-child(2) { | |
top: 2.6em; | |
} | |
&:nth-child(3) { | |
top: 4.2em; | |
} | |
} | |
&.open span{ | |
&:nth-child(1) { | |
transform: rotate(45deg) translate(1.1em, 1.1em); | |
} | |
&:nth-child(2) { | |
opacity: 0; | |
} | |
&:nth-child(3) { | |
transform: rotate(-45deg) translate(1.1em , -1.1em); | |
} | |
} | |
} | |
/* ============ Menu2 ============ */ | |
%menu2 { | |
@extend %icon; | |
span{ | |
left: 0; | |
&:nth-child(1) { | |
top: 2.5em; | |
} | |
&:nth-child(2) { | |
transform: rotate(90deg); | |
top: 2.5em; | |
} | |
} | |
&.open span { | |
&:nth-child(2) { | |
transform: rotate(0deg); | |
} | |
} | |
} | |
/* ============ Menu3 ============ */ | |
%menu3 { | |
@extend %icon; | |
span{ | |
left: 0; | |
&:nth-child(1) { | |
top: 1em; | |
} | |
&:nth-child(2) { | |
top: 2.6em; | |
} | |
&:nth-child(3) { | |
top: 4.2em; | |
} | |
} | |
&.open span { | |
&:nth-child(1) { | |
transform: translateY(1.6em); | |
} | |
&:nth-child(3) { | |
transform: translateY(-1.6em); | |
} | |
} | |
} | |
/* ============ Menu4 ============ */ | |
%menu4 { | |
@extend %icon; | |
span { | |
width: 50%; | |
&:nth-child(1) { | |
border-radius: setting(border-radius) 0 0 setting(border-radius); | |
left: 0; | |
top: 1em; | |
} | |
&:nth-child(2){ | |
border-radius: 0 setting(border-radius) setting(border-radius) 0; | |
top: 1em; | |
right: 0; | |
} | |
&:nth-child(3) { | |
left: 0; | |
top: 2.6em; | |
width: 100%; | |
} | |
&:nth-child(4) { | |
border-radius: setting(border-radius) 0 0 setting(border-radius); | |
left: 0; | |
top: 4.2em; | |
} | |
&:nth-child(5){ | |
border-radius: 0 setting(border-radius) setting(border-radius) 0; | |
right: 0; | |
top: 4.2em; | |
} | |
} | |
&.open span{ | |
&:nth-child(1) { | |
transform: rotate(45deg) translate(0.8em); | |
} | |
&:nth-child(2){ | |
transform: rotate(-45deg) translate(-0.9em); | |
} | |
&:nth-child(3) { | |
opacity: 0; | |
} | |
&:nth-child(4) { | |
transform: rotate(-45deg) translate(0.8em); | |
} | |
&:nth-child(5){ | |
transform: rotate(45deg) translate(-0.9em); | |
} | |
} | |
} | |
/* ============ Menu5 ============ */ | |
%menu5 { | |
@extend %icon; | |
span { | |
width: 100%; | |
&:nth-child(1) { | |
left: 0; | |
top: 1em; | |
} | |
&:nth-child(2){ | |
border-radius: 0 setting(border-radius) setting(border-radius) 0; | |
right: 0; | |
top: 2.6em; | |
width: 50%; | |
} | |
&:nth-child(3) { | |
border-radius: setting(border-radius) 0 0 setting(border-radius); | |
left: 0; | |
top: 2.6em; | |
width: 50%; | |
} | |
&:nth-child(4) { | |
left: 0; | |
top: 4.2em; | |
} | |
} | |
&.open span{ | |
&:nth-child(1) { | |
opacity: 0; | |
} | |
&:nth-child(2){ | |
border-radius: setting(border-radius); | |
transform: rotate(45deg); | |
width: 100%; | |
} | |
&:nth-child(3) { | |
border-radius: setting(border-radius); | |
transform: rotate(-45deg); | |
width: 100%; | |
} | |
&:nth-child(4) { | |
opacity: 0 | |
} | |
} | |
} | |
// --- Demo styles | |
*, *:after, *:before { | |
box-sizing: border-box; | |
} | |
body { | |
background: #ecf0f1; | |
overflow-Y: scroll; | |
text-align: center; | |
} | |
h1 { | |
color: #222; | |
font-family: 'Roboto', sans-serif; | |
font-size: 4em; | |
} | |
section { | |
margin: 0 auto; | |
} | |
@for $i from 1 through 5 { | |
.menu#{$i} { | |
@extend %menu#{$i} | |
} | |
} | |