Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Grilled cheese sandwich menu icon
<h1>Grilled Cheese Sandwich Menu Icon</h1>
<a href="#" class="grilled-cheese-sandwich">
<span class="close">&times;</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;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.