<body>
<h1>Hamburger Menu <span>(with cheese)</span></h1>
<h2>Click the hamburger to toggle menu</h2>
<div class="wrapper">
<ul class="hamburger">
<li class="item" id="bun_top">
<a class="link" href="$">Top Bun</a>
<svg class="svg" width="139px" height="58px" viewBox="0 0 139 58" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g sketch:type="MSLayerGroup" transform="translate(-1.000000, 0.000000)">
<path d="M134.4,53.6 C110.85,59.25 20.55,56.95 6.55,53.6 C-2.25,51.5 2.95,23.45 8.95,17.45 C31.55,-5.15 114.3,-5.25 134.35,19.6 C139.75,26.2 142.7,51.65 134.4,53.6 L134.4,53.6 Z" id="Shape" fill="#F49B2F" sketch:type="MSShapeGroup"></path>
<ellipse id="Oval" fill="#F4D658" sketch:type="MSShapeGroup" transform="translate(24.002450, 9.498350) rotate(-11.204304) translate(-24.002450, -9.498350) " cx="24.00245" cy="9.49835" rx="3.04987388" ry="1.74992764"></ellipse>
<ellipse id="Oval" fill="#F4D658" sketch:type="MSShapeGroup" transform="translate(36.046100, 5.847250) rotate(-11.204304) translate(-36.046100, -5.847250) " cx="36.0461" cy="5.84725" rx="3.04987388" ry="1.74992764"></ellipse>
<ellipse id="Oval" fill="#F4D658" sketch:type="MSShapeGroup" transform="translate(53.050595, 9.495435) rotate(-11.204304) translate(-53.050595, -9.495435) " cx="53.050595" cy="9.495435" rx="3.04987388" ry="1.74992764"></ellipse>
<ellipse id="Oval" fill="#F4D658" sketch:type="MSShapeGroup" transform="translate(63.294125, 5.839575) rotate(-11.204304) translate(-63.294125, -5.839575) " cx="63.294125" cy="5.839575" rx="3.04987388" ry="1.74992764"></ellipse>
<ellipse id="Oval" fill="#F4D658" sketch:type="MSShapeGroup" transform="translate(70.702830, 9.498910) rotate(-0.870916) translate(-70.702830, -9.498910) " cx="70.70283" cy="9.49891" rx="3.05004735" ry="1.75002717"></ellipse>
<ellipse id="Oval" fill="#F4D658" sketch:type="MSShapeGroup" transform="translate(75.257400, 2.500250) rotate(11.011040) translate(-75.257400, -2.500250) " cx="75.2574" cy="2.50025" rx="3.05002983" ry="1.75001711"></ellipse>
<ellipse id="Oval" fill="#F4D658" sketch:type="MSShapeGroup" transform="translate(54.792070, 2.499110) rotate(-11.204304) translate(-54.792070, -2.499110) " cx="54.79207" cy="2.49911" rx="3.04987388" ry="1.74992764"></ellipse>
<ellipse id="Oval" fill="#F4D658" sketch:type="MSShapeGroup" transform="translate(84.294520, 11.298340) rotate(12.280840) translate(-84.294520, -11.298340) " cx="84.29452" cy="11.29834" rx="3.04994769" ry="1.74996999"></ellipse>
<ellipse id="Oval" fill="#F4D658" sketch:type="MSShapeGroup" transform="translate(87.304270, 2.498950) rotate(-0.916746) translate(-87.304270, -2.498950) " cx="87.30427" cy="2.49895" rx="3.05008541" ry="1.75004901"></ellipse>
<ellipse id="Oval" fill="#F4D658" sketch:type="MSShapeGroup" transform="translate(69.293440, 14.895420) rotate(-11.204304) translate(-69.293440, -14.895420) " cx="69.29344" cy="14.89542" rx="3.04987388" ry="1.74992764"></ellipse>
<ellipse id="Oval" fill="#F4D658" sketch:type="MSShapeGroup" transform="translate(50.041855, 16.692815) rotate(-11.204304) translate(-50.041855, -16.692815) " cx="50.041855" cy="16.692815" rx="3.04987388" ry="1.74992764"></ellipse>
<ellipse id="Oval" fill="#F4D658" sketch:type="MSShapeGroup" transform="translate(30.042855, 16.694815) rotate(-11.204304) translate(-30.042855, -16.694815) " cx="30.042855" cy="16.694815" rx="3.04987388" ry="1.74992764"></ellipse>
<ellipse id="Oval" fill="#F4D658" sketch:type="MSShapeGroup" transform="translate(42.098060, 13.096580) rotate(-33.257823) translate(-42.098060, -13.096580) " cx="42.09806" cy="13.09658" rx="3.04995882" ry="1.74997637"></ellipse>
<ellipse id="Oval" fill="#F4D658" sketch:type="MSShapeGroup" transform="translate(93.359340, 16.700005) rotate(8.041784) translate(-93.359340, -16.700005) " cx="93.35934" cy="16.700005" rx="3.05010377" ry="1.75005954"></ellipse>
<ellipse id="Oval" fill="#F4D658" sketch:type="MSShapeGroup" transform="translate(100.650780, 4.054410) rotate(13.126025) translate(-100.650780, -4.054410) " cx="100.65078" cy="4.05441" rx="3.05008482" ry="1.75004867"></ellipse>
<ellipse id="Oval" fill="#F4D658" sketch:type="MSShapeGroup" transform="translate(103.653455, 13.101835) rotate(-8.551447) translate(-103.653455, -13.101835) " cx="103.653455" cy="13.101835" rx="3.05005322" ry="1.75003054"></ellipse>
<ellipse id="Oval" fill="#F4D658" sketch:type="MSShapeGroup" transform="translate(114.707825, 7.637975) rotate(19.591001) translate(-114.707825, -7.637975) " cx="114.707825" cy="7.637975" rx="3.04996721" ry="1.74998119"></ellipse>
</g>
</g>
</svg>
</li>
<li class="item" id="tomato">
<a class="link" href="$">Tomatoes</a>
<svg width="140px" height="32px" viewBox="0 0 140 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g sketch:type="MSLayerGroup" transform="translate(-1.000000, -7.000000)">
<path d="M140.3,31.75 C139.15,38.15 119.3,39.95 95.9,35.8 C72.5,31.65 54.5,23.1 55.65,16.7 C55.85,15.65 56.4,12.75 57.6,11.9 C63.4,7.9 80.6,9.15 100.05,12.6 C119.85,16.15 136.75,21.05 140.45,26.9 C141.05,27.95 140.45,30.75 140.3,31.75 L140.3,31.75 Z"
id="Shape" fill="#E83F40" sketch:type="MSShapeGroup"></path>
<ellipse id="Oval" fill="#EA5659" sketch:type="MSShapeGroup" transform="translate(98.551830, 21.202770) rotate(10.078342) translate(-98.551830, -21.202770) " cx="98.55183" cy="21.20277" rx="43.0013364" ry="11.8003667"></ellipse>
<path d="M117.45,31.8 C112.7,31.9 103.45,26.65 97.8,25.7 C92.1,24.75 81.65,26.7 77.2,25.1 C72.75,23.45 83.55,21.6 82,19.9 C80.5,18.2 64.4,14.15 66.4,13.05 C68.4,11.95 84.3,16.05 89.1,15.95 C93.8,15.85 94.3,11.35 100,12.3 C105.7,13.25 104.75,17.65 109.2,19.3 C113.65,20.95 130.05,22.2 131.55,23.95 C133.05,25.65 116.55,24.25 114.55,25.35 C112.55,26.45 122.15,31.7 117.45,31.8 L117.45,31.8 Z"
id="Shape" fill="#E83F40" sketch:type="MSShapeGroup"></path>
<ellipse id="Oval" fill="#EA5659" sketch:type="MSShapeGroup" transform="translate(96.851240, 18.903260) rotate(10.136758) translate(-96.851240, -18.903260) " cx="96.85124" cy="18.90326" rx="1.30001258" ry="0.650006292"></ellipse>
<ellipse id="Oval" fill="#EA5659" sketch:type="MSShapeGroup" transform="translate(101.304960, 19.706940) rotate(10.049134) translate(-101.304960, -19.706940) " cx="101.30496" cy="19.70694" rx="1.30005482" ry="0.65002741"></ellipse>
<ellipse id="Oval" fill="#EA5659" sketch:type="MSShapeGroup" transform="translate(101.044890, 22.247370) rotate(9.986073) translate(-101.044890, -22.247370) " cx="101.04489" cy="22.24737" rx="1.29993409" ry="0.649967044"></ellipse>
<ellipse id="Oval" fill="#EA5659" sketch:type="MSShapeGroup" transform="translate(96.401845, 21.447835) rotate(10.037851) translate(-96.401845, -21.447835) " cx="96.401845" cy="21.447835" rx="1.30000948" ry="0.650004738"></ellipse>
<path d="M87.1,22.85 C87.2,29.35 68.05,34.9 44.3,35.3 C20.55,35.65 1.25,30.7 1.15,24.2 C1.15,23.1 1.15,20.15 2.15,19.15 C7.1,14.1 24.2,12.1 44,11.8 C64.15,11.5 81.6,13.1 86.35,18.15 C87.15,19 87.05,21.9 87.1,22.85 L87.1,22.85 Z" id="Shape" fill="#E83F40"
sketch:type="MSShapeGroup"></path>
<ellipse id="Oval" fill="#EA5659" sketch:type="MSShapeGroup" transform="translate(44.099475, 20.454725) rotate(-0.876645) translate(-44.099475, -20.454725) " cx="44.099475" cy="20.454725" rx="43.0007331" ry="11.7502003"></ellipse>
<path d="M64.65,27.3 C60,28.3 49.95,24.9 44.2,25.05 C38.45,25.2 28.55,29.1 23.85,28.35 C19.15,27.6 29.4,23.7 27.6,22.35 C25.8,20.95 9.25,20.05 11,18.6 C12.75,17.1 29.15,18.15 33.8,17.15 C38.45,16.15 38.1,11.65 43.85,11.5 C49.6,11.35 49.5,15.85 54.2,16.6 C58.9,17.35 75.2,15.5 77.05,16.9 C78.85,18.3 62.4,20.05 60.65,21.5 C58.85,22.95 69.3,26.3 64.65,27.3 L64.65,27.3 Z"
id="Shape" fill="#E83F40" sketch:type="MSShapeGroup"></path>
<ellipse id="Oval" fill="#EA5659" sketch:type="MSShapeGroup" cx="42" cy="18.55" rx="1.3" ry="0.65"></ellipse>
<ellipse id="Oval" fill="#EA5659" sketch:type="MSShapeGroup" cx="46.5" cy="18.45" rx="1.3" ry="0.65"></ellipse>
<ellipse id="Oval" fill="#EA5659" sketch:type="MSShapeGroup" cx="46.75" cy="21.05" rx="1.3" ry="0.65"></ellipse>
<ellipse id="Oval" fill="#EA5659" sketch:type="MSShapeGroup" cx="42.05" cy="21.1" rx="1.3" ry="0.65"></ellipse>
</g>
</g>
</svg>
</li>
<li class="item" id="lettuce">
<a class="link" href="$">Lettuce</a>
<svg width="162px" height="37px" viewBox="0 0 162 37" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g sketch:type="MSLayerGroup">
<path d="M142.3,27.3 L109.9,35.4 L50.1,28.35 L43.2,36.65 L9.4,32.9 L9.4,19.15 L18.8,14.15 L117.8,16.2 L125.85,22.6 L142.3,27.3 Z" id="Shape" fill="#518735" sketch:type="MSShapeGroup"></path>
<path d="M161.2,28.2 L143,30.7 L96.25,23.7 L34,31.95 L0.25,28.2 L0.25,14.45 L16.15,9.45 L157.4,11.5 L158.95,17.9 L161.2,28.2 Z" id="Shape" fill="#56A234" sketch:type="MSShapeGroup"></path>
<path d="M161.2,19.45 L143,21.95 L96.25,14.95 L34,23.2 L0.25,19.45 L0.25,5.7 L16.15,0.7 L157.4,2.75 L158.95,9.15 L161.2,19.45 Z" id="Shape" fill="#7CBB52" sketch:type="MSShapeGroup"></path>
</g>
</g>
</svg>
</li>
<li class="item" id="pickle">
<a class="link" href="$">Gerkins</a>
<svg width="114px" height="31px" viewBox="0 0 114 31" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g sketch:type="MSLayerGroup" transform="translate(-1.000000, -2.000000)">
<path d="M45.15,28.95 C41.65,30.6 33.65,30.6 29.1,31.15 C24.55,31.7 16.85,33.55 13.05,32.75 C9.25,31.95 8.8,28.4 7.15,26.55 C5.5,24.7 2.3,21.9 1.45,19.7 C-0.9,13.55 8.95,16.15 12.45,14.5 C16,12.85 21.85,8.25 26.35,7.9 C30.9,7.55 36.4,9.2 40.25,10 C44.05,10.8 54.95,6.5 53.35,13.6 C52.8,16 50.25,19 49.1,21.2 C47.95,23.35 48.65,27.3 45.15,28.95 L45.15,28.95 Z"
id="Shape" fill="#6C844A" sketch:type="MSShapeGroup"></path>
<path d="M44.85,25.85 C41.35,27.5 33.35,27.5 28.8,28.05 C24.25,28.6 16.55,30.45 12.75,29.65 C8.95,28.85 8.5,25.3 6.85,23.45 C5.2,21.6 0.35,18.8 1.15,16.6 C2,14.45 8.65,13.05 12.15,11.4 C15.7,9.75 21.55,5.15 26.05,4.8 C30.6,4.45 36.1,6.1 39.95,6.9 C43.75,7.7 51.45,8.65 53.05,10.5 C54.7,12.35 49.95,15.9 48.8,18.1 C47.65,20.2 48.35,24.2 44.85,25.85 L44.85,25.85 Z"
id="Shape" fill="#9EA555" sketch:type="MSShapeGroup"></path>
<ellipse id="Oval" fill="#B9C16A" sketch:type="MSShapeGroup" transform="translate(23.441545, 14.899615) rotate(-5.411269) translate(-23.441545, -14.899615) " cx="23.441545" cy="14.899615" rx="1.64992801" ry="0.899960732"></ellipse>
<ellipse id="Oval" fill="#B9C16A" sketch:type="MSShapeGroup" transform="translate(30.150820, 14.299040) rotate(-5.370800) translate(-30.150820, -14.299040) " cx="30.15082" cy="14.29904" rx="1.64998376" ry="0.899991144"></ellipse>
<ellipse id="Oval" fill="#B9C16A" sketch:type="MSShapeGroup" transform="translate(30.556310, 18.150830) rotate(-5.405025) translate(-30.556310, -18.150830) " cx="30.55631" cy="18.15083" rx="1.65007672" ry="0.900041849"></ellipse>
<ellipse id="Oval" fill="#B9C16A" sketch:type="MSShapeGroup" transform="translate(23.853860, 18.790805) rotate(-5.365095) translate(-23.853860, -18.790805) " cx="23.85386" cy="18.790805" rx="1.64996833" ry="0.899982724"></ellipse>
<path d="M102.3,30.65 C98.45,31.3 90.75,29.2 86.25,28.45 C81.75,27.75 73.8,27.5 70.35,25.7 C66.9,23.9 67.4,20.35 66.35,18.15 C65.25,15.95 62.9,12.35 62.7,10.05 C62.1,3.5 70.85,8.65 74.7,7.95 C78.55,7.3 85.4,4.45 89.9,5.3 C94.35,6.15 99.25,9.25 102.7,11.05 C106.15,12.85 117.8,11.6 114.35,18.05 C113.2,20.25 109.9,22.45 108.2,24.2 C106.5,26 106.1,30 102.3,30.65 L102.3,30.65 Z"
id="Shape" fill="#6C844A" sketch:type="MSShapeGroup"></path>
<path d="M102.8,27.6 C98.95,28.25 91.25,26.1 86.75,25.4 C82.25,24.7 74.3,24.45 70.85,22.65 C67.4,20.85 67.9,17.35 66.85,15.1 C65.75,12.9 61.8,8.85 63.2,7 C64.6,5.15 71.35,5.6 75.2,4.9 C79.05,4.25 85.9,1.4 90.4,2.25 C94.85,3.1 99.75,6.2 103.2,8 C106.65,9.8 113.8,12.75 114.85,15 C115.95,17.2 110.4,19.4 108.7,21.15 C107.05,22.9 106.65,26.9 102.8,27.6 L102.8,27.6 Z"
id="Shape" fill="#9EA555" sketch:type="MSShapeGroup"></path>
<ellipse id="Oval" fill="#B9C16A" sketch:type="MSShapeGroup" transform="translate(85.144115, 11.340385) rotate(10.050134) translate(-85.144115, -11.340385) " cx="85.144115" cy="11.340385" rx="1.64990711" ry="0.899949333"></ellipse>
<ellipse id="Oval" fill="#B9C16A" sketch:type="MSShapeGroup" transform="translate(91.757450, 12.502675) rotate(10.142398) translate(-91.757450, -12.502675) " cx="91.75745" cy="12.502675" rx="1.65004502" ry="0.900024556"></ellipse>
<ellipse id="Oval" fill="#B9C16A" sketch:type="MSShapeGroup" transform="translate(91.102605, 16.357650) rotate(10.142398) translate(-91.102605, -16.357650) " cx="91.102605" cy="16.35765" rx="1.65004502" ry="0.900024556"></ellipse>
<ellipse id="Oval" fill="#B9C16A" sketch:type="MSShapeGroup" transform="translate(84.447760, 15.139870) rotate(10.084986) translate(-84.447760, -15.139870) " cx="84.44776" cy="15.13987" rx="1.64991771" ry="0.899955116"></ellipse>
</g>
</g>
</svg>
</li>
<li class="item" id="cheese">
<a class="link" href="$">Cheese</a>
<svg width="151px" height="44px" viewBox="0 0 151 44" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g sketch:type="MSLayerGroup" transform="translate(-1.000000, 0.000000)">
<path d="M146.85,21 C130.85,22.15 99.5,27.8 48.1,43.4 C36.75,46.85 -5.5,21.1 3.1,14.25 C24.5,-2.85 103.1,6.3 103.1,6.3 C103.1,6.3 170.35,19.35 146.85,21 L146.85,21 Z" id="Shape" fill="#FDD181" sketch:type="MSShapeGroup"></path>
<path d="M147.6,20.35 C131.5,20.35 99.5,24.6 48.1,40.2 C36.75,43.65 -0.8,19.25 3.35,13.75 C19.85,-8.05 103.1,3.05 103.1,3.05 C103.1,3.05 169.2,20.35 147.6,20.35 L147.6,20.35 Z" id="Shape" fill="#FDC64B" sketch:type="MSShapeGroup"></path>
</g>
</g>
</svg>
</li>
<li class="item" id="bacon">
<a class="link" href="$">Bacon</a>
<svg width="128px" height="37px" viewBox="0 0 128 37" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g sketch:type="MSLayerGroup" transform="translate(0.000000, -3.000000)">
<path d="M123.9,35.85 C120.35,37.95 101.9,37.9 97.2,37.45 C89.8,36.7 76.25,29.85 68.85,29.1 C59.7,28.15 44.6,29.05 35.45,28.15 C29.35,27.55 11.3,26.3 7.3,22.7 C4.85,20.45 5.3,13.1 8.4,11.65 C13.3,9.35 30.75,14.75 36.7,15.35 C45.95,16.3 60.95,14.75 70.2,15.65 C77.45,16.35 91.5,21.3 98.75,22 C103.65,22.5 120.9,20.2 124.5,22.85 C127.25,24.9 126.8,34.15 123.9,35.85 L123.9,35.85 Z"
id="Shape" fill="#894647" sketch:type="MSShapeGroup"></path>
<path d="M124.25,32.35 C120.7,34.45 102.25,34.4 97.55,33.95 C90.15,33.2 76.55,26.35 69.2,25.6 C60.05,24.7 44.95,25.6 35.8,24.65 C29.7,24.05 11.65,22.8 7.65,19.2 C5.2,17 5.65,9.6 8.75,8.15 C13.65,5.85 31.1,11.25 37.05,11.9 C46.3,12.85 61.3,11.25 70.55,12.2 C77.8,12.9 91.85,17.85 99.1,18.55 C104,19.05 121.25,16.75 124.85,19.4 C127.6,21.45 127.15,30.65 124.25,32.35 L124.25,32.35 Z"
id="Shape" fill="#AA7272" sketch:type="MSShapeGroup"></path>
<path d="M124.55,29.55 C121,31.65 102.55,31.65 97.85,31.15 C90.45,30.4 76.9,23.55 69.5,22.8 C60.35,21.9 45.25,22.75 36.1,21.85 C30,21.25 11.95,20 7.95,16.4 C5.5,14.2 5.95,6.8 9.05,5.35 C13.95,3.05 31.4,8.45 37.35,9.05 C46.6,10 61.6,8.4 70.85,9.35 C78.1,10.1 92.15,15 99.4,15.7 C104.3,16.2 121.55,13.9 125.15,16.6 C127.9,18.65 127.4,27.85 124.55,29.55 L124.55,29.55 Z"
id="Shape" fill="#894647" sketch:type="MSShapeGroup"></path>
<path d="M124.8,27.1 C121.3,28.8 102.85,28.5 98.15,28 C90.75,27.25 77.1,21.3 69.7,20.55 C60.55,19.65 45.5,20.1 36.35,19.2 C30.25,18.6 12.2,17.25 8.15,14.2 C5.65,12.3 6,6.15 9.1,4.95 C13.95,3.15 31.5,7.95 37.45,8.55 C46.7,9.5 61.65,8.45 70.9,9.35 C78.15,10.1 92.3,14.45 99.5,15.15 C104.4,15.65 121.6,14 125.2,16.3 C127.95,18 127.65,25.75 124.8,27.1 L124.8,27.1 Z"
id="Shape" fill="#AA7272" sketch:type="MSShapeGroup"></path>
<path d="M121.35,22.9 C118.4,25.8 100.55,30.35 95.85,31.05 C88.5,32.15 73.65,28.85 66.3,29.95 C57.2,31.3 42.8,35.9 33.7,37.25 C27.65,38.15 9.85,41.4 5.1,38.9 C2.15,37.35 0.8,30.1 3.45,27.9 C7.65,24.45 25.9,25.4 31.8,24.5 C41,23.15 55.15,17.9 64.3,16.55 C71.5,15.45 86.35,16.75 93.55,15.7 C98.45,14.95 114.6,8.5 118.7,10.2 C121.9,11.5 123.7,20.6 121.35,22.9 L121.35,22.9 Z"
id="Shape" fill="#894647" sketch:type="MSShapeGroup"></path>
<path d="M120.8,19.5 C117.85,22.4 100,26.95 95.3,27.65 C87.95,28.75 73.1,25.45 65.75,26.55 C56.65,27.9 42.25,32.5 33.15,33.85 C27.1,34.75 9.3,38 4.55,35.5 C1.6,33.95 0.25,26.65 2.9,24.5 C7.1,21.1 25.35,22 31.25,21.15 C40.45,19.75 54.6,14.55 63.8,13.15 C71,12.05 85.85,13.35 93.05,12.3 C97.95,11.55 114.1,5.1 118.2,6.8 C121.35,8.05 123.15,17.1 120.8,19.5 L120.8,19.5 Z"
id="Shape" fill="#AA7272" sketch:type="MSShapeGroup"></path>
<path d="M120.4,16.65 C117.45,19.55 99.6,24.1 94.9,24.8 C87.55,25.9 72.7,22.6 65.35,23.7 C56.25,25.05 41.85,29.65 32.75,31.05 C26.7,31.95 8.9,35.2 4.15,32.7 C1.2,31.15 -0.15,23.9 2.5,21.75 C6.7,18.35 24.95,19.25 30.85,18.35 C40,16.95 54.2,11.75 63.35,10.4 C70.55,9.3 85.4,10.6 92.6,9.55 C97.5,8.8 113.65,2.35 117.8,4.05 C120.95,5.25 122.75,14.35 120.4,16.65 L120.4,16.65 Z"
id="Shape" fill="#894647" sketch:type="MSShapeGroup"></path>
<path d="M120,14.25 C117,16.8 99.05,21 94.4,21.7 C87.05,22.8 72.35,20.4 65,21.5 C55.9,22.85 41.45,27.05 32.35,28.45 C26.3,29.35 8.45,32.55 3.8,30.55 C0.9,29.3 -0.25,23.25 2.4,21.35 C6.65,18.4 24.85,18.75 30.75,17.85 C39.9,16.45 54.15,11.75 63.35,10.4 C70.55,9.35 85.3,10.05 92.5,8.95 C97.4,8.2 113.65,2.4 117.7,3.7 C120.85,4.65 122.45,12.2 120,14.25 L120,14.25 Z"
id="Shape" fill="#AA7272" sketch:type="MSShapeGroup"></path>
</g>
</g>
</svg>
</li>
<li class="item" id="burger">
<a class="link" href="$">Burger</a>
<svg width="139px" height="46px" viewBox="0 0 139 46" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g sketch:type="MSLayerGroup" transform="translate(-2.000000, -3.000000)">
<path d="M140.25,27.2 C140.45,36.65 132.95,44.4 123.5,44.6 C123.5,44.6 101,48.15 73.2,48.65 C44.75,49.2 20,46.55 20,46.55 C10.55,46.75 2.8,39.25 2.6,29.8 L2.6,29.8 C2.4,20.35 2.65,12.7 12.05,12.55 C12.05,12.55 31.95,18.45 71.2,17.7 C113.65,16.9 130.3,10.35 130.3,10.35 C139.75,10.15 140.1,17.8 140.25,27.2 L140.25,27.2 L140.25,27.2 Z"
id="Shape" fill="#6D4B33" sketch:type="MSShapeGroup"></path>
<ellipse id="Oval" fill="#774C32" sketch:type="MSShapeGroup" transform="translate(71.150860, 13.093145) rotate(-1.082978) translate(-71.150860, -13.093145) " cx="71.15086" cy="13.093145" rx="65.0986085" ry="9.99978625"></ellipse>
</g>
</g>
</svg>
</li>
<li class="item" id="bun_bottom">
<a class="link" href="$">Bottom Bun</a>
<svg width="137px" height="42px" viewBox="0 0 137 42" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g sketch:type="MSLayerGroup" transform="translate(-2.000000, -4.000000)">
<path d="M138.9,25.75 C138.9,34.9 134.2,42.3 128.4,42.3 C128.4,42.3 93.35,45.8 72.35,45.8 C48.65,45.8 13.1,42.3 13.1,42.3 C7.3,42.3 2.6,34.9 2.6,25.75 L2.6,25.75 C2.6,16.6 7.3,9.25 13.1,9.25 L128.4,9.25 C134.15,9.2 138.9,16.6 138.9,25.75 L138.9,25.75 L138.9,25.75 Z"
id="Shape" fill="#F49B2F" sketch:type="MSShapeGroup"></path>
<ellipse id="Oval" fill="#EFBA43" sketch:type="MSShapeGroup" cx="70.65" cy="13.4" rx="65.85" ry="9.05"></ellipse>
</g>
</g>
</svg>
</li>
<li class="item shadow"></li>
</ul>
</div>
</body>@import url(https://fonts.googleapis.com/css?family=PT+Sans:400,700);
$slide-speed: .3s;
$hover-speed: .15s;
$explode-speed: .25s;
html {
background: #f2f2f2;
}
body {
font-family: "PT Sans";
text-align: center;
padding-top: 50px;
color: darken(#f2f2f2, 65%);
span {
font-size: .7em;
font-style: italic;
}
}
h1 {
font-size: 2em;
}
h2 {
margin-top: 20px;
font-size: 1.2em;
color: darken(#f2f2f2, 25%);
}
li {
list-style: none;
font-weight: bold;
}
.wrapper {
position: relative;
text-align: center;
display: inline-block;
width: 550px;
height: 300px;
padding-top: 30px;
}
.hamburger {
margin: 0 auto;
height: 400px;
width: 250px;
display: flex;
flex-direction: column;
cursor: pointer;
text-align: center;
}
.item {
position: relative;
transition: $slide-speed;
}
.link {
position: absolute;
left: 20%;
top: 50%;
transform: translateY(-50%);
color: inherit;
text-decoration: none;
font-size: 1.5em;
opacity: 0;
transition: $slide-speed .1s;
z-index: 2;
}
.shadow {
height: 30px;
border-radius: 50%;
width: 170px;
margin: 0 auto;
background-image: radial-gradient(rgba(black, .2), rgba(black, 0));
transform: translateY(-115px);
transition: $slide-speed * 3;
}
.slide-in {
opacity: 1;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
transition: $slide-speed;
}
.fade {
opacity: .2;
transition: $slide-speed;
}
.fade-out {
opacity: 0;
transition: $slide-speed * 3;
}
$originals: (
bun_top: 95px,
tomato: 75px,
lettuce: 45px,
pickle: 20px,
cheese: -10px,
bacon: -40px,
burger: -75px,
bun_bottom: -95px
);
$offsets: (
bun_top: 0,
tomato: 0,
lettuce: 0,
pickle: 0,
cheese: 0,
bacon: 0,
burger: 0,
bun_bottom: 0
);
// original positions
@each $item, $pos in $originals {
.#{$item} {
transform: translateY($pos);
}
}
// explode burger!
@each $item, $offset in $offsets {
.item.#{$item}-explode {
position: relative;
transition: $explode-speed;
transform: translateY($offset);
}
}
// hover transition
@each $item, $pos in $originals {
$val: ($pos / 100) * 90;
.#{$item}-hover {
transform: translateY($val);
position: relative;
transition: $hover-speed;
}
}var list = $('.item'),
hb = $('.hamburger'),
targets = $('.target'),
links = $('.link'),
open = false;
function build() {
var z = 7;
$.each(list, function(){
$(this).css("z-index", z);
z--;
$(this).addClass($(this).attr("id"));
})
}
build();
function explode_burger() {
$.each(list, function(){
var self = this;
var id = $(this).attr('id');
un_hover_burger();
setTimeout(function(){
console.log($(self));
$(self).addClass(id + "-explode");
}, 300);
});
}
function shrink_burger() {
$.each(list, function(){
var explodeClass = $(this).attr("id") + "-explode";
$(this).removeClass(explodeClass);
});
}
function hover_burger() {
$.each(list, function(){
var id = $(this).attr('id');
$(this).addClass(id + "-hover");
});
}
function un_hover_burger() {
$.each(list, function(){
var id = $(this).attr('id');
$(this).removeClass(id + "-hover");
});
}
$('a').click(function(e){
e.preventDefault();
});
$(hb).click(function(){
if (open === false) {
explode_burger();
open = true;
} else {
$(this).children('.link').removeClass('slide-in');
$(this).children('svg').attr("class", "");
shrink_burger();
open = false;
}
});
$(hb).hover(function(){
if (open === false) {
hover_burger();
$('.shadow').addClass('fade-out');
}
}, function(){
if (open === false) {
un_hover_burger();
$('.shadow').removeClass('fade-out');
}
});
$(list).hover(function(){
if (open === true) {
$(this).children('.link').addClass('slide-in');
$(this).children('svg').attr("class", "fade");
}
}, function(){
$(this).children('.link').removeClass('slide-in');
$(this).children('svg').attr("class", "");
});
External CSS
This Pen doesn't use any external CSS resources.