Grilled cheese sandwich menu icon

Grilled-cheese-sandwich-menu-icon.markdown

Grilled cheese sandwich menu icon

An open face grilled cheese sandwich menu icon. mmmm...

A Pen by Glenn Cueto on CodePen.

License.

index.html

<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>

script.js

/*
* An open face grilled cheese sandwich menu icon... mmmm
*/
$('.grilled-cheese-sandwich').on('click', function(e){
  e.preventDefault();
  $(this).toggleClass('smash');
});

style.scss

$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;
  }
}