cssAudio - ActiveCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - Activehtmlicon-personicon-teamoctocatspinnerstartv

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

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

Code Indentation

     

Save Automatically?

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

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <header>
  <div></div>
  <h1>#3 Burger Menu</h1>
  <h4>inspired by</h4><h3>Google Material Design</h3>
</header>
<input type="checkbox" id="menu-toggle"/>
       <label for="menu-toggle">
              <i id="open" class="material-icons">menu</i>
              <i id="close" class="material-icons">arrow_back</i>
          </label>
          <ul id="menu">
              <li><a href="#"><i class="material-icons">mode_edit</i>Edit</a></li>
              <li><a href="#"><i class="material-icons">format_color_fill</i>Colors</a></li>
              <li><a href="#"><i class="material-icons">insert_emoticons</i>Emoticons</a></li>
              <li><a href="#"><i class="material-icons">insert_comment</i>Comments</a></li>
          </ul>
          <section>
              <article>
                  <p>
                      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sed eleifend lacus. In ullamcorper, magna porttitor faucibus condimentum, enim lectus volutpat urna, in ullamcorper neque tellus id urna. Ut et purus urna. Integer commodo mi non nisl luctus ornare. Aenean at est eu neque volutpat fringilla. Vestibulum vehicula nisi sed aliquam aliquet. Maecenas commodo lorem erat, eget imperdiet arcu scelerisque vitae.
                  </p>
                  <p>
                      Quisque laoreet mauris a felis euismod lobortis. Aenean vulputate tempus ex, eget volutpat dolor. Etiam rutrum felis volutpat bibendum dapibus. Mauris posuere augue sit amet aliquet rutrum. Mauris non sodales ipsum. Praesent eget interdum dui. Vestibulum a nulla magna. Nam nec lacinia enim. Nullam vulputate libero a turpis dictum congue. Nam ullamcorper quis felis at mollis. Cras tincidunt nibh ut ipsum eleifend, sit amet tincidunt ipsum tincidunt. Curabitur ex lorem, consectetur vel sem quis, eleifend ullamcorper dolor. Etiam porta tempus justo ac fringilla.
    </p>
  </article>
</section>
            
          
!
            
              @import url(https://fonts.googleapis.com/css?family=Material+Icons|Roboto:400,700);

/*@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(../icons/MaterialIcons-Regular.eot); /* For IE6-8 *//*
  src: local('Material Icons'),
       local('MaterialIcons-Regular'),
       url(../icons/MaterialIcons-Regular.woff2) format('woff2'),
       url(../icons/MaterialIcons-Regular.woff) format('woff'),
       url(../icons/MaterialIcons-Regular.ttf) format('truetype');
}*/
.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;/* Preferred icon size */
  display: inline-block;
  width: 1em;
  height: 1em;
  line-height: 3;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;/* Support for all WebKit browsers. */
  vertical-align: sub;
  -webkit-font-smoothing: antialiased;/* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;/* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;/* Support for IE. */
  font-feature-settings: 'liga';
}

* {
    list-style: none;
    text-decoration: none;
    outline: 0;
}
a {
    color: #E91E63;
    text-indent: -10px;
    font-size: 24px;
}
a:active, a:focus {
    color: #D81B60;
    font-weight: bold;
}
p {
    text-indent: 2em;
    line-height: 1.8;
}
h1 {
    margin-top: 75px;
    text-indent: 50px;
    line-height: 0;
    letter-spacing: 1px;
    color: white;
    font-size: 3.5vw;
    font-weight: 700;
}
h3 {
    float: left;
    margin-top: 10px;
    text-indent: 2px;
    line-height: 0;
    color: white;
    font-size: 2vw;
    font-weight: lighter;
    opacity: .6;
}
h4 {
    float: left;
    margin-top: 5px;
    text-indent: 50px;
    line-height: 0;
    letter-spacing: 1px;
    color: white;
    font-size: 1vw;
    font-weight: lighter;
    opacity: .6;
}


html, body {
    margin: 0;
    padding: 0;
    background-color: #eee;
    font-family: 'Roboto', sans-serif;
}

header {
    position: absolute;
    top: 0;
    width: 100%;
    height: 256px;
    background-color: #FFC107;
    border-bottom: 1px solid #FFB300;
}
header > div {
    position: absolute;
    width: 100%;
    height: 32px;
    background-color: #FFA000;
}
section {
    position: relative;
    top: 150px;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 55%;
    height: auto;
    background-color: white;
    border-radius: 3px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.26);
    z-index: 0;
}
article {
    color: #757575;
    padding: 60px; 
    text-align: justify;
}

label, label:before, label:after {
    position: absolute;
    top: 215px;
    left: 8%;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background-color: #E91E63;
    box-shadow: rgba(0, 0, 0, 0.117647) 0px 0px 8px 0px, 
                rgba(0, 0, 0, 0.239216) 0px 8px 8px 0px;
    transition: 0.6s cubic-bezier(0.19, 1, 0.22, 1);
    z-index: 2;
}
label #open {
    position: absolute;
    top: -31px;
    left: 16px;
    color: white;
    font-size: 48px!important;
    cursor: pointer;
}
label #close {
    opacity: 0;
    cursor: pointer;
}
#menu-toggle:not(:checked) + label:hover {
    box-shadow: rgba(0, 0, 0, 0.0784314) 0px 0px 12px 0px, 
                rgba(0, 0, 0, 0.239216) 0px 12px 12px 0px;
}

#menu {
    position: absolute;
    padding: 0;
    top: 199px;
    left: 8%;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: none;
    transition: 0.6s cubic-bezier(0.19, 1, 0.22, 1);
    z-index: 1;
}

#menu-toggle:checked + label {
    position: absolute;
    top: 20%;
    left: 22%;
    width: 200px;
    height: 310px;
    background-color: white;
    border-radius: 3px;
    box-shadow: rgba(0, 0, 0, 0.117647) 0px 0px 8px 0px, 
                rgba(0, 0, 0, 0.239216) 0px 8px 8px 0px;
    transition: 0.6s cubic-bezier(0.19, 1, 0.22, 1);
    z-index: 1;
}
#menu-toggle:checked + label #open {
    opacity: 0;
    pointer-events: none;
}
#menu-toggle:checked + label #close {
    position: absolute;
    top: -40px;
    right: 10px;
    color: #E91E63;
    font-size: 48px!important;
    opacity: 1;
}

#menu-toggle:checked + label + #menu {
    position: absolute;
    margin: 0;
    top: 28%;
    left: 22%;
    width: 200px;
    height: 250px;
    border-radius: 3px;
    transition: 0.6s cubic-bezier(0.19, 1, 0.22, 1);
    z-index: 2;
}

#menu-toggle:not(:checked) + label + #menu li {
    opacity: 0;
    position: absolute;
    top: 0; left: 0;
    pointer-events: none;
    
}
#menu-toggle:checked + label + #menu li {
    opacity: 1;
    margin-left: 30px;
    padding-bottom: 10px;
    transition: .2s ease .1s;
}
[type="checkbox"]:not(:checked), [type="checkbox"]:checked  {
    display: none;
}
            
          
!
            
              //          #2 Burger Menu...
//http://codepen.io/victorfreire/pen/BjNveN

//github.com/VictorFreire/3-Material-Design-Burger-Menu
            
          
!
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