CodePen Embed - The ultimate hamburger menu

<div class="wrapper">
   <input type="checkbox" id="navigation" />
   <label for="navigation">
      <!--Chips-->
      <svg version="1.1" id="chips" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
         width="71.282px" height="56px" viewBox="0 0 71.282 56" enable-background="new 0 0 71.282 56" xml:space="preserve">
         <path id="chip-no-sauce" fill="#FFDE5E" stroke="#F2C335" stroke-miterlimit="10" d="M4.885,21.828c0,0,22.319,2,31.535,2c9.159,0,31.535-2,31.535-2
            v2.753c0,0-22.032,2-31.535,2c-9.778,0-31.535-2-31.535-2L4.885,21.828z"/>
         <g id="chip-with-sauce">
            <path fill="#FFDE5E" stroke="#F2C335" stroke-miterlimit="10" d="M68.254,27.867c0,0-20.306-1.61-31.834-2
               c-11.122-0.376-31.236,2-31.236,2v-2.753c0,0,19.239-2,31.236-2c11.597,0,31.834,2,31.834,2V27.867z"/>
            <g>
               <path fill="#ED1C24" d="M16.943,31.066c-0.199,0-0.393-0.071-0.545-0.2l-3.035-2.574c-0.093,0.021-0.188,0.035-0.285,0.043
                  l-7.125,0.571l0.367,0.306l0.023,0.054c0.13,0.299,0.083,0.637-0.124,0.882c-0.162,0.19-0.396,0.299-0.645,0.299
                  c-0.199,0-0.393-0.071-0.545-0.2L3.073,28.59c-0.494-0.399-0.787-0.941-0.836-1.546c-0.048-0.579,0.132-1.143,0.508-1.586
                  s0.902-0.714,1.481-0.762l8.494-0.698c0.054-0.005,0.109-0.007,0.164-0.007c0.181,0,0.364,0.025,0.56,0.077
                  c0.222,0.005,0.454,0.092,0.64,0.25l1.91,1.619c0.235,0.2,0.379,0.479,0.404,0.788s-0.071,0.607-0.271,0.842
                  c-0.153,0.18-0.355,0.307-0.579,0.368l1.942,1.646c0.172,0.146,0.277,0.35,0.296,0.575s-0.052,0.443-0.198,0.615
                  C17.426,30.958,17.191,31.066,16.943,31.066z"/>
               <path fill="#BE1E2D" d="M12.884,24.24c0.171,0,0.336,0.026,0.496,0.068c0.192,0.009,0.384,0.064,0.542,0.198l1.91,1.619
                  c0.38,0.323,0.428,0.895,0.104,1.276c-0.179,0.211-0.434,0.32-0.69,0.32c-0.207,0-0.415-0.071-0.585-0.215l2.668,2.262
                  c0.25,0.212,0.282,0.586,0.069,0.837c-0.117,0.138-0.284,0.209-0.453,0.209c-0.135,0-0.272-0.046-0.384-0.141l-3.133-2.657
                  c-0.119,0.034-0.243,0.058-0.37,0.068l-7.734,0.62l0.792,0.661c0.088,0.202,0.065,0.441-0.086,0.621
                  c-0.118,0.139-0.285,0.21-0.453,0.21c-0.136,0-0.272-0.046-0.384-0.141l-1.957-1.659c-0.008-0.007-0.012-0.019-0.02-0.026
                  c-0.405-0.319-0.684-0.795-0.729-1.349c-0.088-1.061,0.701-1.992,1.761-2.079l8.494-0.698
                  C12.789,24.242,12.836,24.24,12.884,24.24 M12.884,23.74c-0.062,0-0.124,0.003-0.187,0.008l-8.491,0.698
                  c-0.646,0.054-1.232,0.355-1.652,0.85s-0.621,1.123-0.566,1.769c0.052,0.634,0.359,1.227,0.846,1.642l0.005,0.009l0.077,0.069
                  l1.951,1.654c0.198,0.167,0.449,0.259,0.707,0.259c0.322,0,0.626-0.141,0.834-0.387c0.27-0.32,0.332-0.758,0.164-1.144
                  L6.547,29.11l6.549-0.525c0.065-0.006,0.131-0.014,0.196-0.025l2.943,2.496c0.198,0.167,0.449,0.259,0.707,0.259
                  c0.322,0,0.626-0.141,0.834-0.386c0.189-0.223,0.28-0.506,0.256-0.797s-0.16-0.556-0.383-0.745l-1.641-1.392
                  c0.114-0.074,0.218-0.165,0.308-0.271c0.242-0.285,0.359-0.648,0.329-1.023c-0.03-0.375-0.205-0.715-0.491-0.958l-1.91-1.619
                  c-0.212-0.181-0.483-0.288-0.786-0.313C13.26,23.764,13.071,23.74,12.884,23.74L12.884,23.74z"/>
            </g>
         </g>
      </svg>
      <!--Burger-->
      <svg version="1.1" id="burger" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
         width="92.875px" height="60.819px" viewBox="0 0 92.875 60.819" enable-background="new 0 0 92.875 60.819" xml:space="preserve">
         <g class="bun">
            <path fill="#FFE797" stroke="#414042" stroke-miterlimit="10" d="M86.174,26.508V16.206C86.174,7.532,68.383,0.5,46.438,0.5
               C24.491,0.5,6.701,7.532,6.701,16.206v10.302H86.174z"/>
            <g>
               <path fill="#E8C992" stroke="#414042" stroke-width="0.5" stroke-miterlimit="10" d="M41.908,6.67
                  c0.05,0.769-1.115,1.483-2.601,1.595c-1.485,0.112-2.731-0.42-2.781-1.189c-0.05-0.768,1.115-1.482,2.601-1.594
                  C40.612,5.37,41.857,5.902,41.908,6.67z"/>
               <path fill="#E8C992" stroke="#414042" stroke-width="0.5" stroke-miterlimit="10" d="M54.038,8.859
                  c-0.098,0.891-1.412,1.458-2.935,1.266c-1.522-0.194-2.679-1.074-2.583-1.965c0.098-0.892,1.412-1.459,2.935-1.266
                  C52.978,7.086,54.135,7.966,54.038,8.859z"/>
               <path fill="#E8C992" stroke="#414042" stroke-width="0.5" stroke-miterlimit="10" d="M58.788,1.53
                  c-0.023,0.392-1.021,0.642-2.228,0.556C55.354,2,54.396,1.612,54.419,1.219c0.024-0.393,1.021-0.642,2.229-0.556
                  C57.853,0.748,58.812,1.136,58.788,1.53z"/>
               <path fill="#E8C992" stroke="#414042" stroke-width="0.5" stroke-miterlimit="10" d="M33.563,2.026
                  c0.033,0.404-0.945,0.827-2.184,0.946c-1.239,0.119-2.271-0.113-2.305-0.516c-0.033-0.404,0.945-0.828,2.185-0.946
                  C32.498,1.391,33.53,1.623,33.563,2.026z"/>
               <path fill="#E8C992" stroke="#414042" stroke-width="0.5" stroke-miterlimit="10" d="M73.48,6.849
                  c-0.077,0.604-1.409,0.906-2.976,0.674c-1.568-0.231-2.776-0.909-2.699-1.513c0.076-0.604,1.408-0.906,2.977-0.674
                  C72.349,5.567,73.558,6.245,73.48,6.849z"/>
               <path fill="#E8C992" stroke="#414042" stroke-width="0.5" stroke-miterlimit="10" d="M17.094,7.451
                  c0.216,0.393-0.437,1.242-1.458,1.894c-1.02,0.653-2.023,0.863-2.239,0.471c-0.216-0.394,0.436-1.243,1.457-1.896
                  C15.875,7.268,16.877,7.058,17.094,7.451z"/>
               <path fill="#E8C992" stroke="#414042" stroke-width="0.5" stroke-miterlimit="10" d="M82.851,10.985
                  c-0.193,0.38-1.298,0.127-2.464-0.566c-1.166-0.693-1.954-1.562-1.762-1.942c0.194-0.38,1.298-0.126,2.464,0.566
                  C82.255,9.736,83.044,10.606,82.851,10.985z"/>
               <path fill="#E8C992" stroke="#414042" stroke-width="0.5" stroke-miterlimit="10" d="M48.229,2.169
                  c0.012,0.393-0.96,0.745-2.168,0.784c-1.209,0.04-2.197-0.246-2.209-0.64c-0.011-0.393,0.959-0.745,2.168-0.785
                  C47.229,1.487,48.218,1.774,48.229,2.169z"/>
               <path fill="#E8C992" stroke="#414042" stroke-width="0.5" stroke-miterlimit="10" d="M29.064,6.812
                  c0.125,0.594-1.023,1.383-2.564,1.762c-1.542,0.379-2.895,0.204-3.02-0.39c-0.126-0.594,1.022-1.383,2.564-1.762
                  C27.586,6.042,28.939,6.216,29.064,6.812z"/>
               <path fill="#E8C992" stroke="#414042" stroke-width="0.5" stroke-miterlimit="10" d="M63.498,7.409
                  c-0.089,0.699-1.264,1.103-2.623,0.902c-1.36-0.201-2.391-0.931-2.302-1.63c0.088-0.699,1.264-1.103,2.623-0.902
                  C62.556,5.979,63.587,6.709,63.498,7.409z"/>
            </g>
         </g>
         <g class="bun">
            <path 
               fill="#FFE797" stroke="#414042" stroke-miterlimit="10" d="M6.701,38.112v11.104c0,8.598,17.791,11.104,39.737,11.104
               s39.736-2.506,39.736-11.104V38.112H6.701z"/>
         </g>
         <g>
            <path fill="#E8C992" d="M85.627,42.771H6.99c0,0-0.776-0.066-1.518,0.694H7.21v4.836c0.536,0.158,1.125,0.25,1.749,0.25
               c2.394,0,4.333-1.294,4.333-2.891c0,1.597,1.94,2.891,4.333,2.891s4.333-1.294,4.333-2.891c0,1.597,1.94,2.891,4.333,2.891
               s4.333-1.294,4.333-2.891c0,1.597,1.94,2.891,4.333,2.891c2.394,0,4.334-1.294,4.334-2.891c0,1.597,1.94,2.891,4.333,2.891
               s4.334-1.294,4.334-2.891c0,1.597,1.939,2.891,4.333,2.891s4.333-1.294,4.333-2.891c0,1.597,1.94,2.891,4.334,2.891
               c2.393,0,4.334-1.294,4.334-2.891c0,1.597,1.939,2.891,4.333,2.891s4.333-1.294,4.333-2.891c0,1.597,1.94,2.891,4.334,2.891
               c2.393,0,4.334-1.294,4.334-2.891c0,1.284,1.263,2.359,2.999,2.736V42.771z"/>
         </g>
         <g>
            <path fill="#81D253" d="M85.294,46.052c-1.923,0-3.551-0.75-4.334-1.864c-0.783,1.114-2.411,1.864-4.334,1.864
               s-3.55-0.75-4.333-1.864c-0.783,1.114-2.41,1.864-4.333,1.864s-3.551-0.75-4.334-1.864c-0.783,1.114-2.41,1.864-4.333,1.864
               s-3.55-0.75-4.333-1.864c-0.783,1.114-2.411,1.864-4.334,1.864s-3.55-0.75-4.333-1.864c-0.783,1.114-2.411,1.864-4.333,1.864
               s-3.55-0.75-4.333-1.864c-0.783,1.114-2.411,1.864-4.334,1.864c-1.923,0-3.55-0.75-4.333-1.864
               c-0.783,1.114-2.41,1.864-4.333,1.864s-3.55-0.75-4.333-1.864c-0.783,1.114-2.411,1.864-4.333,1.864s-3.55-0.75-4.333-1.864
               c-0.783,1.114-2.411,1.864-4.333,1.864c-2.71,0-4.833-1.489-4.833-3.391c0,0.001,0,0.001,0,0.001c-0.007,0-0.179-1.104,0.749-2.282
               c0.812-1.03,1.777-1.11,2.054-1.11l0.111,0.004l81.523-0.002c0.147,0,1.417,0.031,2.355,1.108c0.901,1.033,0.877,2.244,0.876,2.296
               C90.127,44.562,88.004,46.052,85.294,46.052z"/>
            <path fill="#414042" d="M5.261,39.77c0.04,0,0.062,0.002,0.062,0.002h81.573c0,0,0.002,0,0.006,0c0.088,0,1.173,0.019,1.973,0.937
               c0.783,0.898,0.753,1.953,0.753,1.953c0,1.597-1.94,2.891-4.333,2.891c-2.395,0-4.334-1.294-4.334-2.891
               c0,1.597-1.939,2.891-4.334,2.891c-2.393,0-4.333-1.294-4.333-2.891c0,1.597-1.94,2.891-4.333,2.891
               c-2.394,0-4.334-1.294-4.334-2.891c0,1.597-1.939,2.891-4.333,2.891s-4.333-1.294-4.333-2.891c0,1.597-1.94,2.891-4.334,2.891
               c-2.393,0-4.333-1.294-4.333-2.891c0,1.597-1.94,2.891-4.333,2.891s-4.333-1.294-4.333-2.891c0,1.597-1.94,2.891-4.334,2.891
               c-2.393,0-4.333-1.294-4.333-2.891c0,1.597-1.939,2.891-4.333,2.891s-4.333-1.294-4.333-2.891c0,1.597-1.94,2.891-4.333,2.891
               s-4.333-1.294-4.333-2.891c0,1.597-1.939,2.891-4.333,2.891c-2.393,0-4.333-1.294-4.333-2.891c0,0-0.175-0.936,0.642-1.972
               C4.273,39.835,5.041,39.77,5.261,39.77 M5.261,38.77c-0.333,0-1.495,0.094-2.446,1.301c-0.927,1.176-0.897,2.296-0.855,2.662
               c0.051,2.147,2.375,3.819,5.333,3.819c1.804,0,3.373-0.622,4.333-1.595c0.96,0.973,2.529,1.595,4.333,1.595
               s3.373-0.622,4.333-1.595c0.96,0.973,2.529,1.595,4.333,1.595s3.373-0.622,4.333-1.595c0.96,0.973,2.529,1.595,4.333,1.595
               c1.805,0,3.374-0.622,4.334-1.595c0.96,0.973,2.529,1.595,4.333,1.595s3.373-0.622,4.333-1.595c0.96,0.973,2.529,1.595,4.333,1.595
               s3.373-0.622,4.334-1.595c0.96,0.973,2.528,1.595,4.333,1.595s3.373-0.622,4.333-1.595c0.961,0.973,2.529,1.595,4.334,1.595
               s3.373-0.622,4.333-1.595c0.96,0.973,2.528,1.595,4.333,1.595s3.373-0.622,4.334-1.595c0.961,0.973,2.529,1.595,4.334,1.595
               c2.99,0,5.333-1.709,5.333-3.891c0.004-0.119,0.012-1.45-0.999-2.61c-1.062-1.218-2.457-1.279-2.727-1.279H5.356
               C5.331,38.771,5.299,38.77,5.261,38.77L5.261,38.77z"/>
         </g>
         <path fill="#5C2610" stroke="#231F20" stroke-miterlimit="10" d="M91.565,31.3c0,2.071-1.678,3.75-3.75,3.75H5.059
            c-2.071,0-3.75-1.679-3.75-3.75l0,0c0-2.071,1.679-3.75,3.75-3.75h82.756C89.888,27.55,91.565,29.229,91.565,31.3L91.565,31.3z"/>
         <path fill="#E85435" stroke="#231F20" stroke-miterlimit="10" d="M46.438,39.3c0,0.553-0.448,1-1,1H1.5c-0.552,0-1-0.447-1-1v-3.25
            c0-0.553,0.448-1,1-1h43.938c0.552,0,1,0.447,1,1V39.3z"/>
         <path fill="#E85435" stroke="#231F20" stroke-miterlimit="10" d="M92.375,39.3c0,0.553-0.448,1-1,1H47.438c-0.552,0-1-0.447-1-1
            v-3.25c0-0.553,0.448-1,1-1h43.938c0.552,0,1,0.447,1,1V39.3z"/>
         <path fill="#FFDE5E" stroke="#231F20" stroke-miterlimit="10" d="M88.376,26.092c0-0.806-0.661-1.458-1.479-1.458H4.771
            c-0.816,0-1.478,0.653-1.478,1.458c0,0.805,0.662,1.458,1.478,1.458h0.017h10.464c0,0.01-0.006,0.018-0.006,0.028v0.944
            c0,0.522,0.423,0.945,0.945,0.945c0.521,0,0.945-0.423,0.945-0.945v-0.944c0-0.01-0.005-0.018-0.006-0.028h56.359
            c0,0.01-0.006,0.018-0.006,0.028v2.777c0,0.522,0.424,0.945,0.945,0.945s0.945-0.423,0.945-0.945v-2.777
            c0-0.01-0.006-0.019-0.006-0.028h11.529h0.002c0,0,0.001,0,0.002,0C87.716,27.548,88.376,26.896,88.376,26.092z"/>
      </svg>
   </label>
   <nav>
      <ul>
         <li>
            <a href=""><i class='fa fa-cutlery'></i>Menu</a>
         </li>
         <li>
            <a href=""><i class='fa fa-coffee'></i>Drinks</a>
         </li>
         <li>
            <a href=""><i class='fa fa-phone'></i>Contact</a>
         </li>
         <li>
            <a href=""><i class='fa fa-map-marker'></i>Location</a>
         </li>
      </ul>
   </nav>
   <section>
      <article>
         <h1>Hamburger Menu</h1>
      </article>
   </section>
</div>
</div>

body, html{
    height:100%;
    background: #EAEBED;
}
body{
    padding:0;
    margin:0;
}
h1, p, li{
    font-family:'Montserrat', helvetica, arial, sans-serif;
    font-weight: 700;
    color:#484A56;
    margin:0 0 1em;
}
section li{
    margin:0 0 10px;
}
h1{
    font-size:2.5em;
    margin: 50px 130px;
}
p{
    font-size:1em;
    line-height:1.5em;
}
.wrapper{
    overflow:hidden;
}
section{
    padding:10px 30px 30px 80px;
-webkit-transition: all 400ms cubic-bezier(0.680, -0.550, 0.265, 1.550); 
   -moz-transition: all 400ms cubic-bezier(0.680, -0.550, 0.265, 1.550); 
     -o-transition: all 400ms cubic-bezier(0.680, -0.550, 0.265, 1.550); 
        transition: all 400ms cubic-bezier(0.680, -0.550, 0.265, 1.550); /* easeInOutBack */
}
nav{
    position:fixed;
    top:0;
    left:0;
    width:250px;
    height:100%;
    margin:0 0 0 -250px;
-webkit-transition: all 400ms cubic-bezier(0.680, -0.550, 0.265, 1.550); 
   -moz-transition: all 400ms cubic-bezier(0.680, -0.550, 0.265, 1.550); 
     -o-transition: all 400ms cubic-bezier(0.680, -0.550, 0.265, 1.550); 
        transition: all 400ms cubic-bezier(0.680, -0.550, 0.265, 1.550); /* easeInOutBack */
}
nav ul{
    width:200px;
    height:100%;
    padding:0 0 0 50px;
    margin:0;
    list-style:none;
    background:#FFF9A5;
    overflow:hidden;
}
nav li{
    margin:0;
}
nav a{
    color:#484A56;
    font-size:1em;
    font-family:'Montserrat', helvetica, arial, sans-serif;
    font-weight: 400;
    text-decoration:none;
    display:block;
    padding:12px 15px;
    font-weight:300;
    letter-spacing:2px;
}
nav a:hover{
    background:#EAEBED;
}
label{
    display:block;
    font-family:'helvetica neue', helvetica, arial, sans-serif;
    font-weight:700;
    line-height:42px;
    color:#fff;
    text-align:center;
    font-size:2em;
    line-height:1.1em;
    position:fixed;
    top:50px;
    left:60px;
-webkit-transition: all 400ms cubic-bezier(0.680, -0.550, 0.265, 1.550); 
   -moz-transition: all 400ms cubic-bezier(0.680, -0.550, 0.265, 1.550); 
     -o-transition: all 400ms cubic-bezier(0.680, -0.550, 0.265, 1.550); 
        transition: all 400ms cubic-bezier(0.680, -0.550, 0.265, 1.550); /* easeInOutBack */
    z-index:500;
}
input[type="checkbox"]{
    display:none;
}
input[type="checkbox"]:checked ~ nav{
    margin:0 0 0 -50px;
}
input[type="checkbox"]:checked ~ label{
    left:270px;
}
input[type="checkbox"]:checked ~ section{
    -webkit-transform:translate3d(210px, 0, 0);
    -moz-transform:translate3d(210px, 0, 0);
    -o-transform:translate3d(210px, 0, 0);
    transform:translate3d(210px, 0, 0);
}
svg {
  transform: scale(1.5);
}
.fa {
  color: #E86252;
  padding:10px 20px 10px 10px;
}
#chips {
  position: absolute;
  margin-left: -30px;
  margin-top: 15px;
}
#burger {
  display:block;
}

$('#burger').mousedown(function() {
    $('.bun').velocity({
        scaleY: 0.85,
        translateY: 5
    }, {
        duration: 50
    })
});

$('#burger').mouseup(function() {
    $('.bun').velocity({
        scaleY: 1,
        translateY: 0
    }, {
        duration: 50
    });
    $('#burger').velocity({
        opacity: 0,
        translateY: -400,
        scale: 1.5
    }, {
        duration: 100
    }, [50, 5]);
  	$('#chip-no-sauce, #chip-with-sauce').delay(150);
    $('#chip-no-sauce').velocity({
        rotateZ: "-45deg",
        transformOriginX: 35,
        transformOriginY: 26
    }, {
        duration: 100
    }, [250, 15]);
    $('#chip-with-sauce').velocity({
        rotateZ: "45deg",
        transformOriginX: 38,
        transformOriginY: 26
    }, {
        duration: 100
    }, [250, 15]);
});

$('#chips').mousedown(function() {
    $('#chip-no-sauce').velocity({
        rotateZ: "0",
        transformOriginX: 35,
        transformOriginY: 28
    }, {
        duration: 100
    }, [250, 15]);
    $('#chip-with-sauce').velocity({
        rotateZ: "0",
        transformOriginX: 35,
        transformOriginY: 28
    }, {
        duration: 100
    }, [250, 15]);
});

$('#chips').mouseup(function() {
    $('#burger').velocity({
        opacity: 1,
        translateY: 0
    }, [50, 8]);
});

This Pen is owned by Charles on CodePen.

See more by @CharlesSmart on CodePen

External CSS

External JavaScript