Threelines Menu Button

css.css

.box-shadow-menu {
  position: relative;
  padding-left: 1.25em;
}
.box-shadow-menu:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.25em;
  width: 1em;
  height: 0.15em;
  background: black;
  box-shadow: 
    0 0.25em 0 0 black,
    0 0.5em 0 0 black;
}

.border-menu {
  position: relative;
  padding-left: 1.25em;
}
.border-menu:before {
  content: "";
  position: absolute;
  top: 0.25em;
  left: 0;
  width: 1em;
  height: 0.125em;
  border-top: 0.375em double #000;
  border-bottom: 0.125em solid #000;
}

.svg-menu img {
  width: 1.25em;
}

.gradient-menu {
  padding-left: 1.25em;
  position: relative;
}
.gradient-menu:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.21em;
  bottom: 0.21em;
  width: 1em;
  background: linear-gradient(
    top, 
    black, black 20%, 
    white 20%, white 40%, 
    black 40%, black 60%, 
    white 60%, white 80%, 
    black 80%, black 100%
  );
}

body {
  padding: 20px 20px 100px 0;
  font: bold 36px Sans-Serif;
}
h2 {
  color: #f06d06;
  font-size: 18px;
  margin: 30px 0 0;
}
button {
  font-size: 16px;
}

index.html

<button>Toggle Font Size</button>

<h2>Unicode</h2>
<div>&#9776; Menu </div>

<h2>Pseudo Element w/ box-shadow</h2>
<div class="box-shadow-menu">Menu</div>

<h2>Pseudo Element w/ border</h2>
<div class="border-menu">Menu</div>

<h2>Pseudo Element w/ Gradient</h2>
<div class="gradient-menu">Menu</div>

<h2>SVG <small>(could be any image format...)</h2>
<div class="svg-menu">
  <img src="http://f.cl.ly/items/1U2c3b1215383h3a2T2r/icon-menu.svg"/>
  Menu
</div>

js.js

/*

SEE: 
 
Tim Kadlec:
http://timkadlec.com/2012/08/mobile-navigation-icons/

Jordan Moore:
http://mobile.smashingmagazine.com/2012/10/08/the-semantic-responsive-design-navicon/
http://codepen.io/jordanmoore/pen/BIzCe
http://codepen.io/jordanmoore/full/CKfGw

Jermey Keith:
http://adactio.com/journal/5666/

Stuart Robson:
http://alwaystwisted.com/post.php?s=2012-05-14-create-a-responsive-mobile-first-menu

Andy Clarke:
http://stuffandnonsense.co.uk/blog/about/we_need_a_standard_show_navigation_icon_for_responsive_web_design

*/

var toggle = 0;

$("button").on("click", function() {
  
  if (toggle) {
    $("body").css("font-size", "36px");
    toggle = 0;
  } else {
    $("body").css("font-size", "16px");
    toggle = 1;
  }
  
});