An open face grilled cheese sandwich menu icon. mmmm...
A Pen by Glenn Cueto on CodePen.
<h1>Grilled Cheese Sandwich Menu Icon</h1> | |
<a href="#" class="grilled-cheese-sandwich"> | |
<span class="close">×</span> | |
<span class="cheese"></span> | |
<span class="bread"></span> | |
</a> |
/* | |
* An open face grilled cheese sandwich menu icon... mmmm | |
*/ | |
$('.grilled-cheese-sandwich').on('click', function(e){ | |
e.preventDefault(); | |
$(this).toggleClass('smash'); | |
}); |
$cheese: #FFCA00; | |
$bread: #D08F3B; | |
$burn: #6A491E; | |
$bg: #FFFBE5; | |
$sandwich-size: 80px; | |
$grill-time: 5000ms; | |
$grill-delay: 500ms; | |
body { | |
text-align: center; | |
background: $bg; | |
margin-top: 4%; /* 40px original */; | |
} | |
body { | |
font-family: "Helvetica Neue", Helvetica, sans-serif; | |
} | |
h1 { | |
text-align: center; | |
font-weight: 200; | |
color: #222; | |
} | |
.grilled-cheese-sandwich { | |
width: $sandwich-size; | |
height: $sandwich-size; | |
display: inline-block; | |
position: relative; | |
} | |
.cheese, .bread, .close { | |
width: 100%; | |
display: block; | |
position: absolute; | |
transition: all 200ms ease; | |
} | |
.close { | |
top: -50% /* 16px / 80px */; | |
font-size: 2em ; | |
color: black; | |
opacity: 0; | |
} | |
.cheese { | |
top: 10%; /* 6px / 60px */; | |
height: 6.666666666666667%; /* 4px / 60px */; | |
background-color: $cheese; | |
} | |
.bread { | |
top: 33.333333333%; /* 20 / 60 */; | |
height: 16.666666667%; /* 10 / 60 */; | |
background-color: $bread; | |
border-left: none; | |
border-right: none; | |
border-bottom: 2px dashed $bread; | |
border-top: 2px dashed $bread; | |
} | |
.smash { | |
.close { | |
top: -20% /* 16px / 80px */; | |
opacity: 100; | |
} | |
.cheese { | |
top: 26.666666666666668%; /* 16px / 60px */; | |
height: 18.333333333333334%; /* 8px / 60px */; | |
border-radius: 3px 3px 0 0; | |
} | |
.bread { | |
transition: border $grill-time ease; | |
border-radius: 4px 4px 0 0; | |
border-bottom: 2px dashed $burn; | |
border-top: 2px dashed $cheese; | |
} | |
} |