CSS Big Mac

css-big-mac.markdown

CSS Big Mac

A tribute to the Hamburger Menu (made famous by Facebook's mobile app) and one kick ass sandwich, the Big Mac.

A Pen by Josh Bader on CodePen.

License.

index.html

<ul class="nav">
  <li>The Big Mac</li>
  <li><a href="#">Two All-Beef Patties</a></li>
  <li><a href="#">Special Sauce</a></li>
  <li><a href="#">Lettuce</a></li>
  <li><a href="#">Cheese</a></li>
  <li><a href="#">Pickles</a></li>
  <li><a href="#">Onions</a></li>
  <li><a href="#">Sesame Seed Bun</a></li>
</ul>

<div class="wrapper">
  
  <div class="menu">
    <a href="#">&#9776;</a>
    <div class="logo">
      <i></i>
    </div>
  </div>

  <div class="bigmac">
    <div class="patties"></div>
    <div class="sauce"></div>
    <div class="lettuce"></div>
    <div class="cheese"></div>
    <div class="pickles"></div>
    <div class="onions"></div>
    <div class="seeds">
      <i></i>
      <i></i>
      <i></i>
      <i></i>
    </div>
    <div class="bun"></div>
  </div>

</div>

script.js

$('.menu a, .nav a').on('click', function() {
  $('.wrapper').toggleClass('active');
});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

@import url( https://fonts.googleapis.com/css?family=Raleway:200,600 );

html, body { height: 100%; }

body {
  margin: 0;
  overflow: hidden;
  font: 14px/1.6em 'Raleway', sans-serif;
  background: #222;
}

.wrapper {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  background-color: #bf192f;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#bf192f), to(#6d1018));
  background-image: -webkit-linear-gradient(top, #bf192f, #6d1018);
  background-image: -moz-linear-gradient(top, #bf192f, #6d1018);
  background-image: linear-gradient(to bottom, #bf192f, #6d1018);
  -webkit-transition: all 500ms;
  -moz-transition: all 500ms;
  transition: all 500ms;
}

.wrapper.active {
  left: 200px;
}

.bigmac {
  width: 250px;
  height: 240px;
  margin: -100px 0 0 -125px;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 0;
}

.bigmac:after {
  content: '';
  width: 318px;
  height: 400px;
  position: absolute;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  transform: rotate(-45deg);
  top: 65px;
  left: 95px;
  z-index: -1;
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0.3)), to(rgba(0,0,0,0)));
  background-image: -webkit-linear-gradient(top, rgba(0,0,0,0.3), rgba(0,0,0,0));
  background-image: -moz-linear-gradient(top, rgba(0,0,0,0.3), rgba(0,0,0,0));
  background-image: linear-gradient(to bottom, rgba(0,0,0,0.3), rgba(0,0,0,0));
  border-radius: 0 0 50px 50px;
}

.patties, .patties:after {
  width: 100%;
  height: 20px;
  position: absolute;
  top: 85px;
  background-color: #54240e;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#7a3b1e), to(#54240e));
  background-image: -webkit-linear-gradient(top, #7a3b1e, #54240e);
  background-image: -moz-linear-gradient(top, #7a3b1e, #54240e);
  background-image: linear-gradient(to bottom, #7a3b1e, #54240e);
  border-radius: 5px;
}

.patties:after {
  content: '';
  top: 80px;
}

.sauce {
  width: 100%;
  height: 5px;
  position: absolute;
  top: 115px;
  background-color: #f6cba0;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#f5e6bb), to(#f6cba0));
  background-image: -webkit-linear-gradient(top, #f5e6bb, #f6cba0);
  background-image: -moz-linear-gradient(top, #f5e6bb, #f6cba0);
  background-image: linear-gradient(to bottom, #f5e6bb, #f6cba0);
  border-radius: 2px;
}

.lettuce, .lettuce:after {
  width: 100%;
  height: 10px;
  position: absolute;
  top: 105px;
  background-color: #a9b23f;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#dfe686), to(#a9b23f));
  background-image: -webkit-linear-gradient(top, #dfe686, #a9b23f);
  background-image: -moz-linear-gradient(top, #dfe686, #a9b23f);
  background-image: linear-gradient(to bottom, #dfe686, #a9b23f);
  border-radius: 2px;
}

.lettuce:after {
  content: '';
  top: 80px;
}

.cheese {
  width: 100%;
  height: 5px;
  position: absolute;
  top: 195px;
  background-color: #fad002;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#f7dc56), to(#fad002));
  background-image: -webkit-linear-gradient(top, #f7dc56, #fad002);
  background-image: -moz-linear-gradient(top, #f7dc56, #fad002);
  background-image: linear-gradient(to bottom, #f7dc56, #fad002);
  border-radius: 2px;
}

.cheese:after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2;
  z-index: 1;
  border-top: 30px solid #fad002;
  border-right: 80px solid transparent;
  border-bottom: 0 solid transparent;
  border-left: 20px solid transparent;
}

.pickles, .pickles:after {
  width: 80px;
  height: 10px;
  position: absolute;
  top: 105px;
  left: 20px;
  z-index: 1;
  background-color: #827316;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#827316), to(#47380d));
  background-image: -webkit-linear-gradient(top, #827316, #47380d);
  background-image: -moz-linear-gradient(top, #827316, #47380d);
  background-image: linear-gradient(to bottom, #827316, #47380d);
  border-radius: 2px;
}

.pickles:after {
  content: '';
  top: 80px;
  left: 130px;
}

.onions, .onions:after {
  width: 100%;
  height: 5px;
  position: absolute;
  top: 80px;
  background-color: #fdf1cb;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#fdf1cb));
  background-image: -webkit-linear-gradient(top, #fff, #fdf1cb);
  background-image: -moz-linear-gradient(top, #fff, #fdf1cb);
  background-image: linear-gradient(to bottom, #fff, #fdf1cb);
  border-radius: 2px;
}

.onions:after {
  content: '';
  top: 80px;
}

.seeds i, .seeds i:before, .seeds i:after {
  width: 10px;
  height: 5px;
  position: absolute;
  top: 20px;
  left: 25px;
  z-index: 1;
  background-color: #fdf1cb;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#fdf1cb));
  background-image: -webkit-linear-gradient(top, #fff, #fdf1cb);
  background-image: -moz-linear-gradient(top, #fff, #fdf1cb);
  background-image: linear-gradient(to bottom, #fff, #fdf1cb);
  border-radius: 2px;
  box-shadow: 2px 3px 0 rgba(0,0,0,0.1);
}

.seeds i:before, .seeds i:after {
  content: '';
  top: 10px;
}

.seeds i:after {
  top: -10px;
}

.seeds i:nth-child(2) {
  left: 80px;
}

.seeds i:nth-child(3) {
  left: 135px;
}

.seeds i:nth-child(4) {
  left: 185px;
}

.bun, .bun:before, .bun:after {
  width: 100%;
  height: 40px;
  position: absolute;
  top: 120px;
  background-color: #f6b96d;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#f6b96d), to(#b2772f));
  background-image: -webkit-linear-gradient(top, #f6b96d, #b2772f);
  background-image: -moz-linear-gradient(top, #f6b96d, #b2772f);
  background-image: linear-gradient(to bottom, #f6b96d, #b2772f);
  border-radius: 3px;
}

.bun:before {
  content: '';
  height: 80px;
  top: -120px;
  border-radius: 60px 60px 3px 3px;
}

.bun:after {
  content: '';
  top: 80px;
  border-radius: 2px 2px 5px 5px;
}

.menu {
  width: 100%;
  position: absolute;
  top: 0;
  z-index: 1;
  background-color: #222;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#333), to(#222));
  background-image: -webkit-linear-gradient(top, #333, #222);
  background-image: -moz-linear-gradient(top, #333, #222);
  background-image: linear-gradient(to bottom, #333, #191919);
}

.menu a {
  padding: 8px;
  color: #eee;
  font-size: 27px;
  line-height: 40px;
  text-indent: 8px;
  text-decoration: none;
  text-shadow: 0 -1px 0 #000;
}

.logo {
  width: 36px;
  height: 28px;
  margin: -14px 0 0 -18px;
  position: absolute;
  top: 50%;
  left: 50%;
  overflow: hidden;
}

.logo i, .logo i:after {
  display: block;
  width: 13px;
  height: 50px;
  text-indent: -9999px;
  border-top: 5px solid #fad002;
  border-right: 3px solid #fad002;
  border-left: 3px solid #fad002;
  border-radius: 50%;
}

.logo i:after {
  content: '';
  position: absolute;
  top: 0px;
  left: 17px;
}

.nav {
  list-style: none;
  padding: 0;
  margin: 0;
  color: #eee;
}

.nav li {
  padding: 0 8px;
  line-height: 40px;
  border-bottom: 1px solid #333;
}

.nav li:first-child {
  color: #fad002;
  font-size: 16px;
  text-transform: uppercase;
}

.nav a {
  color: #eee;
  text-decoration: none;
}