cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

Quick-add: + add another resource

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

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.

            
              <button id="bam">Click Me!</button>
<section class="container">
  <!-- input:checked along with the + and ~  selectors can be used to watch for a state change with CSS-->
  <input type="checkbox" id="menu1" />
  <label for="menu1">
  <div></div>
  <div></div>
  <div></div>
</label>

  <input type="checkbox" id="menu2" />
  <label for="menu2">
  <div></div>
  <div></div>
  <div></div>
</label>

  <input type="checkbox" id="menu3" />
  <label for="menu3">
  <div></div>
  <div></div>
  <div></div>
</label>

  <input type="checkbox" id="menu4" />
  <label for="menu4">
  <div></div>
  <div></div>
  <div></div>
</label>

  <input type="checkbox" id="menu5" />
  <label for="menu5">
  <div></div>
  <div></div>
  <div></div>
</label>

  <input type="checkbox" id="menu6" />
  <label for="menu6">
  <div></div>
  <div></div>
  <div></div>
</label>

  <input type="checkbox" id="menu7" />
  <label for="menu7">
  <div></div>
  <div></div>
  <div></div>
</label>

  <input type="checkbox" id="menu8" />
  <label for="menu8">
  <div></div>
  <div></div>
  <div></div>
</label>

  <input type="checkbox" id="menu9" />
  <label for="menu9">
  <div></div>
  <div></div>
  <div></div>
</label>

  <input type="checkbox" id="menu10" />
  <label for="menu10">
  <div></div>
  <div></div>
  <div></div>
</label>

  <input type="checkbox" id="menu11" />
  <label for="menu11">
  <div></div>
  <div></div>
  <div></div>
</label>

  <input type="checkbox" id="menu12" />
  <label for="menu12">
  <div></div>
  <div></div>
  <div></div>
</label>

  <input type="checkbox" id="menu13" />
  <label for="menu13">
  <div></div>
  <div></div>
  <div></div>
</label>

  <input type="checkbox" id="menu14" />
  <label for="menu14">
  <div></div>
  <div></div>
  <div></div>
</label>

  <input type="checkbox" id="menu15" />
  <label for="menu15">
  <div></div>
  <div></div>
  <div></div>
</label>

  <input type="checkbox" id="menu16" />
  <label for="menu16">
  <div></div>
  <div></div>
  <div></div>
</label>

  <input type="checkbox" id="menu17" />
  <label for="menu17">
  <div></div>
  <div></div>
  <div></div>
</label>

  <input type="checkbox" id="menu18" />
  <label for="menu18">
  <div></div>
  <div></div>
  <div></div>
</label>

  <input type="checkbox" id="menu19" />
  <label for="menu19">
  <div></div>
  <div></div>
  <div></div>
</label>

  <input type="checkbox" id="menu20" />
  <label for="menu20">
  <div></div>
  <div></div>
  <div></div>
</label>

  <input type="checkbox" id="menu21" />
  <label for="menu21">
  <div></div>
  <div></div>
  <div></div>
</label>

  <input type="checkbox" id="menu22" />
  <label for="menu22">
  <div></div>
  <div></div>
  <div></div>
</label>

  <input type="checkbox" id="menu23" />
  <label for="menu23">
  <div></div>
  <div></div>
  <div></div>
</label>

  <input type="checkbox" id="menu24" />
  <label for="menu24">
  <div></div>
  <div></div>
  <div></div>
</label>

  <input type="checkbox" id="menu25" />
  <label for="menu25">
  <div></div>
  <div></div>
  <div></div>
</label>

  <input type="checkbox" id="menu26" />
  <label for="menu26">
  <div></div>
  <div></div>
  <div></div>
</label>

  <input type="checkbox" id="menu27" />
  <label for="menu27">
  <div></div>
  <div></div>
  <div></div>
</label>

  <input type="checkbox" id="menu28" />
  <label for="menu28">
  <div></div>
  <div></div>
  <div></div>
</label>

  <input type="checkbox" id="menu29" />
  <label for="menu29">
  <div></div>
  <div></div>
  <div></div>
</label>

  <input type="checkbox" id="menu30" />
  <label for="menu30">
  <div></div>
  <div></div>
  <div></div>
</label>

  <input type="checkbox" id="menu31" />
  <label for="menu31">
  <div></div>
  <div></div>
  <div></div>
</label>

  <input type="checkbox" id="menu32" />
  <label for="menu32">
  <div></div>
  <div></div>
  <div></div>
</label>

  <input type="checkbox" id="menu33" />
  <label for="menu33">
  <div></div>
  <div></div>
  <div></div>
</label>

  <input type="checkbox" id="menu34" />
  <label for="menu34">
  <div></div>
  <div></div>
  <div></div>
</label>

  <input type="checkbox" id="menu35" />
  <label for="menu35">
  <div></div>
  <div></div>
  <div></div>
</label>

  <input type="checkbox" id="menu36" />
  <label for="menu36">
  <div></div>
  <div></div>
  <div></div>
</label>

  <input type="checkbox" id="menu37" />
  <label for="menu37">
  <div></div>
  <div></div>
  <div></div>
</label>

</section>
<!-- / container -->
            
          
!
            
              /* 
Setting up the Pen
===================================

Specific styles below

*/

$bg-clr: #fff;
$icn-clr: #000;

body {
  text-align: center;
  background: $bg-clr;
}

b {
  position: absolute;
  top: 40px;
  text-align: center;
  z-index: -1;
}

#bam {
  display: inline-block;
  width: 100px;
  margin-top: 10px;
  padding: 5px;
  border-bottom: 4px solid lighten($icn-clr, 10%);
  border-radius: 10px;
  background: $icn-clr;
  color: $bg-clr;
  cursor: pointer;
  position: absolute;
  left: calc(50% - 40px);
  top: 10px;
  transition: all .25s;
  
  &:focus {
    outline: none;
    transform: scale(1.05);
  }
  
  &:hover {
    border-bottom: 6px solid lighten($icn-clr, 10%);
    top: 8px;
  }

  &:active {
    border-bottom: 1px solid lighten($icn-clr, 10%);
    top: 13px;
  }
}



.container {
  margin-top: 50px;
  text-align: center;
}


/* 
  General styles for all menus 
  Default State
====================================
*/

input {
  display: none;
}

label {
  position: relative;
  width: 50px;
  height: 40px;
  display: inline-block;
  cursor: pointer;
  margin: 1.7em;
  transition: all .5s;
  text-align: left;
}

div,
div:before,
div:after {
  background: $icn-clr;
  position: absolute;
  height: 5px;
  width: 50px;
  border-radius: 4px;
  transition: all .5s;
}

label {
  div:first-child {
    top: 0px;
  }
  div:nth-child(2) {
    top: 10px;
  }
  div:nth-child(3) {
    top: 20px;
  }
}


/* 
  Specific styles for each menu
====================================
*/

// The + selector targets the sibling immediately after, in CSS3 the ~ slector can be used to target a sibling later in the html document not just immediately after
// This CSS will only triger when the label is after a checkbox with an id of menu1 that is checked, if the checkbox is not checked it goes back to the previous default state CSS
// The animations occur because of the transition property applied above

#menu1:checked+label {
  div:first-child {
    opacity: 0;
    top: 20px;
    width: 0px;
    transform: rotate(225deg);
  }
  div:nth-child(2) {
    top: 12px;
    transform: rotate(-315deg);
    width: 35px;
  }
  div:nth-child(3) {
    top: 12px;
    transform: rotate(495deg);
    width: 35px;
  }
}

#menu2:checked+label {
  div:first-child {
    opacity: 0;
    top: 20px;
    width: 0px;
    transform: rotate(-45deg);
  }
  div:nth-child(2) {
    top: 12px;
    transform: rotate(-45deg);
    width: 35px;
  }
  div:nth-child(3) {
    top: 12px;
    transform: rotate(45deg);
    width: 35px;
  }
}

#menu3:checked+label {
  div:first-child {
    top: 10px;
    left: 12px;
    height: 20px;
    width: 20px;
    transform: rotate(-45deg);
    background: rgba(255, 255, 255, 0);
    border-left: 5px solid $icn-clr;
    border-bottom: 5px solid $icn-clr;
  }
  div:nth-child(2) {
    top: 0px;
    left: 7px;
    transform: rotate(-225deg);
    width: 35px;
  }
  div:nth-child(3) {
    top: 0px;
    left: 7px;
    transform: rotate(45deg);
    width: 35px;
  }
  div:nth-child(3):before {
    content: "";
    top: 16px;
    left: 23px;
    opacity: 1;
    transform: rotate(45deg);
    display: block;
    background: $icn-clr;
    position: absolute;
    height: 5px;
    width: 21px;
    transition: all .5s;
  }
}

#menu4:checked+label {
  div:first-child {
    top: 14px;
    left: 12px;
    height: 20px;
    width: 20px;
    transform: rotate(-45deg);
    background: rgba(255, 255, 255, 0);
    border-right: 5px solid $icn-clr;
    border-top: 5px solid $icn-clr;
  }
  div:nth-child(2) {
    top: 0px;
    left: 7px;
    transform: rotate(-225deg);
    width: 35px;
  }
  div:nth-child(3) {
    top: 0px;
    left: 7px;
    transform: rotate(45deg);
    width: 35px;
  }
  div:nth-child(3):before {
    content: "";
    top: 16px;
    left: 23px;
    opacity: 1;
    transform: rotate(45deg);
    display: block;
    background: $icn-clr;
    position: absolute;
    height: 5px;
    width: 21px;
    transition: all .5s;
  }
}

#menu5+label {
  div:first-child:before {
    content: "";
    top: 0px;
    left: 34px;
    height: 0px;
    width: 0px;
    transform: rotate(0deg);
    background: rgba(255, 255, 255, 0);
    border-right: 0px solid $icn-clr;
    border-top: 0px solid $icn-clr;
  }
  div:first-child:after {
    content: "";
    top: 0px;
    left: -1px;
    height: 0px;
    width: 0px;
    transform: rotate(0deg);
    background: rgba(255, 255, 255, 0);
    border-right: 0px solid $icn-clr;
    border-top: 0px solid $icn-clr;
  }
}

#menu5:checked+label {
  div:first-child {
    top: 14px;
    left: 12px;
    height: 20px;
    width: 20px;
    transform: rotate(-45deg);
    background: rgba(255, 255, 255, 0);
    border-right: 5px solid $icn-clr;
    border-top: 5px solid $icn-clr;
  }
  div:nth-child(2) {
    top: 0px;
    left: 7px;
    transform: rotate(-225deg);
    width: 35px;
  }
  div:nth-child(3) {
    top: 0px;
    left: 7px;
    transform: rotate(45deg);
    width: 35px;
  }
}

#menu6+label {
  div:nth-child(2) {
    left: 0px;
  }
  div:first-child:before,
  div:first-child:after {
    content: "";
    width: 5px;
    height: 0px;
  }
  div:first-child:after {
    left: 45px;
  }
}

#menu6:checked+label {
  div:first-child:before {
    content: "";
    width: 5px;
    height: 25px;
  }
  div:first-child:after {
    content: "";
    width: 5px;
    height: 25px;
    left: 45px;
  }
  div:nth-child(2) {
    top: 10px;
    left: 12px;
    width: 25px;
  }
}

#menu7:checked+label {
  div:first-child {
    top: 10px;
  }
  div:nth-child(2) {
    transform: rotate(990deg);
  }
  div:nth-child(3) {
    top: 10px;
  }
}

#menu8:checked+label {
  div:first-child {
    top: 10px;
  }
  div:nth-child(2) {
    transform: rotate(1080deg);
  }
  div:nth-child(3) {
    top: 10px;
  }
}

#menu9+label {
  div:nth-child(3),
  div:nth-child(2) {
    left: 0px;
  }
}

#menu9:checked+label {
  div:first-child {
    height: 36px;
    top: -3px;
  }
  div:nth-child(2) {
    background: none;
    border: 2px solid $bg-clr;
    height: 15px;
    top: 2px;
    left: 3px;
    width: 25px;
  }
  div:nth-child(3) {
    background: none;
    border: 2px solid $bg-clr;
    height: 15px;
    width: 25px;
    top: 10px;
    left: 18px;
  }
}

#menu10+label {
  div:nth-child(2) {
    left: 0px;
    z-index: 2;
  }
}

#menu10:checked+label {
  div:first-child {
    height: 36px;
    top: -3px;
    border-radius: 50%;
  }
  div:nth-child(2) {
    background: $bg-clr;
    transform: rotate(360deg);
    height: 5px;
    top: 13px;
    left: 7px;
    width: 35px;
    z-index: 2;
  }
  div:nth-child(3) {
    height: 36px;
    top: -3px;
    z-index: 1;
    border-radius: 50%;
  }
}

#menu11+label {
  div:nth-child(3):after {
    height: 20px;
    width: 20px;
    transform: rotate(-135deg);
    background: none;
    border-bottom: 4px solid $icn-clr;
    border-right: 4px solid $icn-clr;
    left: 15px;
    top: 10px;
    border-radius: 0px;
  }
}

#menu11:checked+label {
  div:first-child {
    height: 20px;
    width: 20px;
    transform: rotate(45deg);
    background: none;
    border-bottom: 4px solid $icn-clr;
    border-right: 4px solid $icn-clr;
    left: 15px;
    top: -20px;
    border-radius: 0px;
  }
  div:nth-child(2) {
    height: 20px;
    width: 20px;
    transform: rotate(135deg);
    background: none;
    border-bottom: 4px solid $icn-clr;
    border-right: 4px solid $icn-clr;
    left: 36px;
    top: 1px;
    border-radius: 0px;
  }
  div:nth-child(3) {
    height: 20px;
    width: 20px;
    transform: rotate(-45deg);
    background: none;
    border-bottom: 4px solid $icn-clr;
    border-right: 4px solid $icn-clr;
    left: -5px;
    top: 0px;
    border-radius: 0px;
  }
  div:nth-child(3):after {
    content: "";
    height: 20px;
    width: 20px;
    transform: rotate(-90deg);
    background: none;
    border-bottom: 4px solid $icn-clr;
    border-right: 4px solid $icn-clr;
    left: -2px;
    top: 30px;
    border-radius: 0px;
  }
}

#menu12+label {
  div:nth-child(3):after {
    height: 20px;
    width: 20px;
    transform: rotate(-135deg);
    background: none;
    border-bottom: 4px solid $icn-clr;
    border-right: 4px solid $icn-clr;
    left: 15px;
    top: 10px;
    border-radius: 0px;
  }
}

#menu12:checked+label {
  div:first-child {
    height: 20px;
    width: 20px;
    transform: rotate(405deg);
    background: none;
    border-bottom: 4px solid $icn-clr;
    border-right: 4px solid $icn-clr;
    left: 15px;
    top: -15px;
    border-radius: 0px;
  }
  div:nth-child(2) {
    height: 20px;
    width: 20px;
    transform: rotate(495deg);
    background: none;
    border-bottom: 4px solid $icn-clr;
    border-right: 4px solid $icn-clr;
    left: 30px;
    top: 0px;
    border-radius: 0px;
  }
  div:nth-child(3) {
    height: 20px;
    width: 20px;
    transform: rotate(-405deg);
    background: none;
    border-bottom: 4px solid $icn-clr;
    border-right: 4px solid $icn-clr;
    left: 0px;
    top: 0px;
    border-radius: 0px;
  }
  div:nth-child(3):after {
    content: "";
    height: 20px;
    width: 20px;
    transform: rotate(-450deg);
    background: none;
    border-bottom: 5px solid $icn-clr;
    border-right: 5px solid $icn-clr;
    left: 0px;
    top: 20px;
    border-radius: 0px;
  }
}

#menu13:checked+label {
  div:first-child {
    opacity: 1;
    top: 30px;
    width: 35px;
    border-radius: 0% 0% 50% 50%;
    transform: rotate(360deg);
  }
  div:nth-child(2) {
    top: 12px;
    transform: rotate(-315deg);
    width: 35px;
  }
  div:nth-child(3) {
    top: 12px;
    transform: rotate(495deg);
    width: 35px;
  }
}

#menu14:checked+label {
  div:first-child {
    opacity: 1;
    top: 30px;
    width: 35px;
    border-radius: 0% 0% 50% 50%;
  }
  div:nth-child(2) {
    top: 12px;
    transform: rotate(45deg);
    width: 35px;
  }
  div:nth-child(3) {
    top: 12px;
    transform: rotate(-45deg);
    width: 35px;
  }
}

#menu15+label {
  div {
    left: 0px;
  }
  div:nth-child(2):before {
    content: "";
    opacity: 0;
  }
}

#menu15:checked+label {
  div:first-child {
    top: 10px;
    left: 15px;
    transform: rotate(45deg);
  }
  div:nth-child(2) {
    top: 10px;
    left: 3px;
    width: 22px;
  }
  div:nth-child(2):before {
    content: "";
    opacity: 1;
    transform: rotate(45deg);
    background: none;
    border-left: 5px solid $icn-clr;
    border-bottom: 5px solid $icn-clr;
    border-radius: 0px;
    height: 15px;
    width: 15px;
    top: -7px;
  }
  div:nth-child(3) {
    top: 10px;
    left: 15px;
    transform: rotate(-45deg);
  }
}

#menu16+label {
  div {
    left: 0px;
  }
  div:nth-child(2):before {
    content: "";
    opacity: 0;
  }
}

#menu16:checked+label {
  div:first-child {
    top: 10px;
    left: 15px;
    transform: rotate(405deg);
  }
  div:nth-child(2) {
    top: 10px;
    left: 3px;
    width: 22px;
  }
  div:nth-child(2):before {
    content: "";
    opacity: 1;
    transform: rotate(405deg);
    background: none;
    border-left: 5px solid $icn-clr;
    border-bottom: 5px solid $icn-clr;
    border-radius: 0px;
    height: 15px;
    width: 15px;
    top: -7px;
  }
  div:nth-child(3) {
    top: 10px;
    left: 15px;
    transform: rotate(-405deg);
  }
}

#menu17+label {
  div {
    left: 0px;
  }
  div:nth-child(2):before {
    content: "";
    opacity: 0;
  }
}

#menu17:checked+label {
  div:first-child {
    top: 10px;
    left: 15px;
    transform: rotate(-45deg);
  }
  div:nth-child(2) {
    top: 10px;
    left: 3px;
    width: 22px;
  }
  div:nth-child(2):before {
    content: "";
    opacity: 1;
    transform: rotate(45deg);
    background: none;
    border-top: 5px solid $icn-clr;
    border-right: 5px solid $icn-clr;
    border-radius: 0px;
    height: 15px;
    width: 15px;
    top: -7px;
  }
  div:nth-child(3) {
    top: 10px;
    left: 15px;
    transform: rotate(45deg);
  }
}

#menu18+label {
  div {
    left: 0px;
  }
  div:nth-child(2):before {
    content: "";
    opacity: 0;
  }
}

#menu18:checked+label {
  div:first-child {
    top: 10px;
    left: 15px;
    transform: rotate(-405deg);
  }
  div:nth-child(2) {
    top: 10px;
    left: 3px;
    width: 22px;
  }
  div:nth-child(2):before {
    content: "";
    opacity: 1;
    transform: rotate(405deg);
    background: none;
    border-top: 5px solid $icn-clr;
    border-right: 5px solid $icn-clr;
    border-radius: 0px;
    height: 15px;
    width: 15px;
    top: -7px;
  }
  div:nth-child(3) {
    top: 10px;
    left: 15px;
    transform: rotate(405deg);
  }
}

#menu19+label {
  div {
    left: 0px;
  }
  div:nth-child(2):before {
    content: "";
    opacity: 0;
  }
}

#menu19:checked+label {
  div:first-child {
    top: 10px;
    left: 0px;
    transform: rotate(-45deg);
  }
  div:nth-child(2) {
    top: 10px;
    left: 40px;
    width: 22px;
  }
  div:nth-child(2):before {
    content: "";
    opacity: 1;
    transform: rotate(45deg);
    background: none;
    border-top: 5px solid $icn-clr;
    border-right: 5px solid $icn-clr;
    border-radius: 0px;
    height: 15px;
    width: 15px;
    top: -7px;
  }
  div:nth-child(3) {
    top: 10px;
    left: 0px;
    transform: rotate(45deg);
  }
}

#menu20+label {
  div {
    left: 0px;
  }
  div:nth-child(2):before {
    content: "";
    opacity: 0;
  }
}

#menu20:checked+label {
  div:first-child {
    top: 10px;
    left: 0px;
    transform: rotate(-405deg);
  }
  div:nth-child(2) {
    top: 10px;
    left: 40px;
    width: 22px;
  }
  div:nth-child(2):before {
    content: "";
    opacity: 1;
    transform: rotate(405deg);
    background: none;
    border-top: 5px solid $icn-clr;
    border-right: 5px solid $icn-clr;
    border-radius: 0px;
    height: 15px;
    width: 15px;
    top: -7px;
  }
  div:nth-child(3) {
    top: 10px;
    left: 0px;
    transform: rotate(405deg);
  }
}

#menu21+label {
  div {
    left: 0px;
  }
  div:nth-child(2):before {
    content: "";
    opacity: 0;
  }
}

#menu21:checked+label {
  div:first-child {
    top: 10px;
    left: 0px;
    transform: rotate(-45deg);
  }
  div:nth-child(2) {
    top: 10px;
    left: 40px;
    width: 22px;
  }
  div:nth-child(2):before {
    content: "";
    opacity: 1;
    transform: rotate(45deg);
    background: none;
    border-bottom: 5px solid $icn-clr;
    border-left: 5px solid $icn-clr;
    border-radius: 0px;
    height: 15px;
    width: 15px;
    top: -7px;
  }
  div:nth-child(3) {
    top: 10px;
    left: 0px;
    transform: rotate(45deg);
  }
}

#menu22+label {
  div {
    left: 0px;
  }
  div:nth-child(2):before {
    content: "";
    opacity: 0;
  }
}

#menu22:checked+label {
  div:first-child {
    top: 10px;
    left: 0px;
    transform: rotate(-405deg);
  }
  div:nth-child(2) {
    top: 10px;
    left: 40px;
    width: 22px;
  }
  div:nth-child(2):before {
    content: "";
    opacity: 1;
    transform: rotate(405deg);
    background: none;
    border-bottom: 5px solid $icn-clr;
    border-left: 5px solid $icn-clr;
    border-radius: 0px;
    height: 15px;
    width: 15px;
    top: -7px;
  }
  div:nth-child(3) {
    top: 10px;
    left: 0px;
    transform: rotate(405deg);
  }
}

#menu23:checked+label {
  div:first-child {
    top: -10px;
    left: -7px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
  }
  div:nth-child(2) {
    top: 12px;
    transform: rotate(-315deg);
    width: 35px;
    background: $bg-clr;
  }
  div:nth-child(3) {
    top: 12px;
    transform: rotate(495deg);
    width: 35px;
    background: $bg-clr;
  }
}

#menu24:checked+label {
  div:first-child {
    top: -10px;
    left: -7px;
    width: 40px;
    height: 40px;
    background: none;
    border: 5px solid $icn-clr;
    border-radius: 50%;
  }
  div:nth-child(2) {
    top: 12px;
    transform: rotate(-45deg);
    width: 35px;
  }
  div:nth-child(3) {
    top: 12px;
    transform: rotate(45deg);
    width: 35px;
  }
}

#menu25:checked+label {
  div:first-child {
    top: -10px;
    left: -7px;
    width: 40px;
    height: 40px;
    background: none;
    border: 5px solid $icn-clr;
    border-radius: 50%;
  }
  div:nth-child(2) {
    top: 12px;
    transform: rotate(-180deg);
    width: 35px;
  }
  div:nth-child(3) {
    top: 12px;
    transform: rotate(180deg);
    width: 35px;
  }
}

#menu26:checked+label {
  div:first-child {
    top: 12px;
    transform: rotate(-540deg);
    width: 35px;
    background: $bg-clr;
    z-index: 1;
  }
  div:nth-child(2) {
    top: -10px;
    left: -7px;
    width: 40px;
    height: 40px;
    border: 5px solid $icn-clr;
    border-radius: 50%;
  }
  div:nth-child(3) {
    top: 12px;
    transform: rotate(540deg);
    width: 35px;
    background: $bg-clr;
  }
}

#menu27:checked+label {
  div:first-child {
    top: 12px;
    transform: rotate(180deg);
    width: 35px;
    background: $bg-clr;
    z-index: 1;
  }
  div:nth-child(2) {
    top: -10px;
    left: -7px;
    width: 40px;
    height: 40px;
    border: 5px solid $icn-clr;
    border-radius: 50%;
  }
  div:nth-child(3) {
    top: 2px;
    left: 2px;
    transform: rotate(45deg);
    height: 20px;
    width: 20px;
    background: none;
    border-left: 5px solid $bg-clr;
    border-bottom: 5px solid $bg-clr;
  }
}

#menu28:checked+label {
  div:first-child {
    top: 12px;
    transform: rotate(-180deg);
    width: 35px;
    background: $bg-clr;
    z-index: 1;
  }
  div:nth-child(2) {
    top: -10px;
    left: -7px;
    width: 40px;
    height: 40px;
    border: 5px solid $icn-clr;
    border-radius: 50%;
  }
  div:nth-child(3) {
    top: 2px;
    left: 8px;
    transform: rotate(45deg);
    height: 20px;
    width: 20px;
    background: none;
    border-right: 5px solid $bg-clr;
    border-top: 5px solid $bg-clr;
  }
}

#menu29:checked+label {
  div:first-child {
    top: 12px;
    left: -9px;
    transform: rotate(-225deg);
    width: 53px;
    background: $bg-clr;
    z-index: 1;
  }
  div:nth-child(2) {
    top: -10px;
    left: -7px;
    width: 40px;
    height: 40px;
    border: 5px solid $icn-clr;
    border-radius: 50%;
  }
  div:nth-child(3) {
    top: 12px;
    left: -9px;
    transform: rotate(-225deg);
    width: 53px;
    background: $bg-clr;
    z-index: 1;
  }
}

#menu30:checked+label {
  div:first-child {
    top: 10px;
    left: -9px;
    transform: rotate(-225deg);
    width: 48px;
    background: $icn-clr;
    z-index: 1;
  }
  div:nth-child(2) {
    top: -10px;
    left: -7px;
    width: 40px;
    height: 40px;
    background: none;
    border: 5px solid $icn-clr;
    border-radius: 50%;
  }
  div:nth-child(3) {
    top: 16px;
    left: -2px;
    transform: rotate(-225deg);
    width: 48px;
    background: $icn-clr;
  }
}

#menu31:checked+label {
  div:first-child {
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background: none;
    border-top: 5px solid $icn-clr;
    border-right: 5px solid $icn-clr;
    left: 7px;
    top: -2px;
  }
  div:nth-child(2) {
    top: -10px;
    left: -7px;
    width: 40px;
    height: 40px;
    background: none;
    border: 5px solid $icn-clr;
    border-radius: 50%;
  }
  div:nth-child(3) {
    width: 7px;
    height: 3px;
    left: 16px;
    top: 18px;
    border-radius: 10px 0px 0px 0px;
    border-top: 8px solid $icn-clr;
    border-bottom: 4px solid $icn-clr;
    background: none;
  }
}

#menu32:checked + label {
  div:first-child {
    width: 50px;
    height: 0px;
    position: absolute;
    border-bottom: 17px solid darken($icn-clr, 25%);
    border-top: 30px solid transparent;
    border-radius: 40%;
    background: none;
    top: -7px;
  }
  div:nth-child(2) {
    height: 34px;
    width: 5px;
    background: darken($icn-clr, 25%);
    position: absolute;
    top: -5px;
    left: 15px;
  }
  div:nth-child(2):before {
    content: "";
    position: absolute;
    background: transparent;
    border-radius: 0 50% 0 0;
    width: 0px;
    height: 0px;
    border-right: 16px solid darken($icn-clr, 25%);
    border-top: 26px solid transparent;
    border-bottom: 0px solid transparent;
    top: -0px;
    left: -17px;
  }
  div:nth-child(2):after {
    content: "";
    position: absolute;
    width: 0px;
    height: 0px;
    background: transparent;
    border-radius: 0 50% 0 0;
    border-left: 30px solid darken($icn-clr, 25%);
    border-top: 26px solid transparent;
    border-bottom: 0px solid transparent;
    top: 0px;
    left: 6px;

  }
  div:nth-child(3) {
    position: absolute;
    width: 15px;
    height: 15px;
    border-top: 5px solid darken($icn-clr, 25%);
    border-right: 5px solid darken($icn-clr, 25%);
    background: none;
    top: 0px;
    left: 50px;
    transform: rotate(45deg);
  }
}

#menu33 + label {
  div {
    transition: top .15s .3s, transform .15s .12s;
  }
  div:nth-child(3) {
    transition: top .15s .3s, transform .3s;
  }
}

#menu33:checked + label {
  div {
    top: 10px;
    transform: rotate(45deg);
    transition: top .15s, transform .12s .15s;
  }
  div:nth-child(3) {
    transform: rotate(135deg);
    transition: top .15s, transform .3s .15s;
  }
}

#menu34 + label {
  div {
    transition: all .3s;
  }
  div:nth-child(3) {
    right: 0;
  }
}

#menu34:checked + label {
  div:first-child {
    top: 2%;
    left: 7%;
    width: 50%;
    transform: rotate(45deg);
  }
  div:nth-child(2) {
    transform: rotate(-45deg);
  }
  div:nth-child(3) {
    width: 50%;
    right: 7%;
    top: 47%;
    transform: rotate(45deg);
  }
}

#menu35 + label {
  div:first-child {
    transition: width .15s .15s, top .15s, right .15s, transform .15s;
  }
  div:nth-child(2) {
    transition: transform .15s;
  }
  div:nth-child(3) {
    right: 0;
    transition: width .15s .15s, top .15s, right .15s, transform .15s;
  }
}

#menu35:checked + label {
  div:first-child {
    top: 2%;
    left: 7%;
    width: 50%;
    transform: rotate(45deg);
    transition: width .15s, top .15s .15s, left .15s .15s, transform .15s .15s;
  }
  div:nth-child(2) {
    transform: rotate(-45deg);
    transition: transform .15s .15s;
  }
  div:nth-child(3) {
    width: 50%;
    right: 7%;
    top: 47%;
    transform: rotate(45deg);
    transition: width .15s, top .15s .15s, right .15s .15s, transform .15s .15s;
  }
}

#menu36 + label {
  div:first-child {
    transition: top .15s .15s, transform .15s;
  }
  div:nth-child(2),
  div:nth-child(3) {
    transition: top .15s .15s, transform .15s;
  }
}

#menu36:checked + label {
  div:first-child {
    top: 10px;
    transform: rotate(45deg);
    transition: top .15s, transform .15s .15s;
  }
  div:nth-child(2), 
  div:nth-child(3) {
    top: 10px;
    transform: rotate(-45deg);
    transition: top .15s, transform .15s .15s;
  }
}

#menu37 + label {
  div {
    transition: top .15s .17s, transform .12s .033s;
  }
  div:nth-child(3) {
    transition: top .15s .17s, transform .17s;
  }
}

#menu37:checked + label {
  div {
    top: 10px;
    transform: rotate(135deg);
    transition: top .1s, transform .12s .1s;
  }
  div:nth-child(3) {
    transform: rotate(225deg);
    transition: top .1s, transform .17s .1s;
  }
}
            
          
!
            
              //Just to flash the showcase, this is pure CSS
var inputs = document.getElementsByTagName("input"),
    labels = document.getElementsByTagName("label");

//Label Menus to make them easier to search for
for (var x = 0; x < labels.length; x++){
  labels[x].innerHTML += "<b>Menu "+ (x + 1) + "</b>";
}

//Checks all checkboxs triggering all CSS transitions 
function check (status) {
  for (var x = 0; x < inputs.length; x++){
    inputs[x].checked = status;
  }
  if(status){
    var uncheck = setTimeout(function() { 
      check(false);
    }, 2000);
  }
  
}


// Triggers demonstration on button click
document.getElementById("bam").onclick = function () {
  check(true);
};

// Flashes menus on load
document.addEventListener("DOMContentLoaded", function(event) { 
  check(true);
});
            
          
!
999px
Loading ..................

Console