octocatstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource
via CSS Lint

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource
via JS Hint

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Want a Run Button?

If active, the preview will update automatically when you change code.

HTML

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

CSS

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

            
          
!

JS

            
              $('#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]);
});
            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console