Generated by SassMeister.com.

SassMeister-input-HTML.haml

%input#menu{type: "checkbox"}
%label{for: "menu" onclick:""}  

%nav
  %ul
    %li List Item 1 
    %li List Item 2 
    %li List Item 3 
    %li List Item 4
    %li List Item 5 
    %li List Item 6
    
.content 
  %h1 
    Test Header With More Content 
  %p 
    You can also use the modular scale to adjust text at different breakpoints. A level 2 heading on a desktop may be set at 28px, but at a smaller mobile breakpoint, 28px may appear too large. Therefore, you can adjust to 21px or another measurement in the scale.
 
  %p 
    You can also use the modular scale to adjust text at different breakpoints. A level 2 heading on a desktop may be set at 28px, but at a smaller mobile breakpoint, 28px may appear too large. Therefore, you can adjust to 21px or another measurement in the scale.
  
  %p.special 
    You can also use the modular scale to adjust text at different breakpoints. A level 2 heading on a desktop may be set at 28px, but at a smaller mobile breakpoint, 28px may appear too large. Therefore, you can adjust to 21px or another measurement in the scale.

SassMeister-input.sass

// ----
// Sass (v3.3.0)
// Compass (v1.0.0.alpha.18)
// Breakpoint (v2.4.1)
// Ceasar Easing (v0.7)
// Singularity.gs (v1.2.0.rc.6)
// Toolkit (v2.0.0.alpha.10)
// ----

@import "compass"
@import "breakpoint" 
@import "singularitygs"
@import "toolkit"
@import "toolkit/kickstart" 
@import "ceaser-easing"



/*
  Global Variables 
  ================
+sgs-change("debug", true) 
+add-grid(8)
+add-gutter(1/3)
+add-gutter-style("split")
$nav-height: 50vh 


/*
  The Main Event
  ==============

html
  //+background-grid
  font-family: sans-serif 
body 
  +animation('bugfix infinite 1s')
  
  
+keyframes(bugfix)
  from
    padding: 0 
  to 
    padding: 0 
  
.content
  width: 100vw
  min-height: 100vh
  background-color: pink
  

input[type="checkbox"]
  position: absolute
  top: 99999px
  left: 9999px
  &:checked
  
    ~ label
      background: red
    ~ nav 
      top: 0vh
    ~ .content
      height: 500px
      background: red
   
  
  
label 
  cursor: pointer
  user-select: none 
  display: block 
  background-color: rgba(#000, .8)
  position: relative 
  +grid-span(8, 1)
  min-height: 3em
  
  
  &:after 
    position: absolute
    content: "\2261" 
    color: white 
    right: 0 
    top: 0
    font-size: 3em
    z-index: 9888
    
  
  
nav 
  width: 100%
  height: 50vh
  position: absolute 
  left: 0 
  top: -88vh
  +ceaser-transition(all, 1.2s $easeInBack)
  
  
  ul
    padding: 0
    margin: 0
    
    li 
      background: black 
      color: white 
      list-style: none 
      padding: 1em 
      border: 1px solid whitesmoke
  

SassMeister-output.css

*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

img, video {
  max-width: 100%;
  height: auto;
}

/* Global Variables 
 * ================ */
/* The Main Event
 * ============== */
html {
  font-family: sans-serif;
}

body {
  -moz-animation: "bugfix infinite 1s";
  -webkit-animation: "bugfix infinite 1s";
  animation: "bugfix infinite 1s";
}

@-moz-keyframes bugfix {
  from {
    padding: 0;
  }

  to {
    padding: 0;
  }
}
@-webkit-keyframes bugfix {
  from {
    padding: 0;
  }

  to {
    padding: 0;
  }
}
@keyframes bugfix {
  from {
    padding: 0;
  }

  to {
    padding: 0;
  }
}
.content {
  width: 100vw;
  min-height: 100vh;
  background-color: pink;
}

input[type="checkbox"] {
  position: absolute;
  top: 99999px;
  left: 9999px;
}
input[type="checkbox"]:checked ~ label {
  background: red;
}
input[type="checkbox"]:checked ~ nav {
  top: 0vh;
}
input[type="checkbox"]:checked ~ .content {
  height: 500px;
  background: red;
}

label {
  cursor: pointer;
  user-select: none;
  display: block;
  background-color: rgba(0, 0, 0, 0.8);
  position: relative;
  -sgs-span-settings: ("span": 8, "location": 1, "grid": 8, "gutter": 0.33333, "style": "split", "start row": true, "end row": true, "fixed gutter": false, "split gutter": 1, "gutter property": "margin", "options": ((null: null)));
  width: 96.875%;
  float: right;
  margin-left: 0;
  margin-right: 1.5625%;
  clear: none;
  min-height: 3em;
}
label:after {
  position: absolute;
  content: "\2261";
  color: white;
  right: 0;
  top: 0;
  font-size: 3em;
  z-index: 9888;
}

nav {
  width: 100%;
  height: 50vh;
  position: absolute;
  left: 0;
  top: -88vh;
  -moz-transition: all 1.2s "0.600, -0.280, 0.735, 0.045" cubic-bezier(0.250, 0.100, 0.250, 1.000) 0ms;
  -o-transition: all 1.2s "0.600, -0.280, 0.735, 0.045" cubic-bezier(0.250, 0.100, 0.250, 1.000) 0ms;
  -webkit-transition: all 1.2s "0.600, -0.280, 0.735, 0.045" cubic-bezier(0.250, 0.100, 0.250, 1.000);
  -webkit-transition-delay: 0ms;
  transition: all 1.2s "0.600, -0.280, 0.735, 0.045" cubic-bezier(0.250, 0.100, 0.250, 1.000) 0ms;
}
nav ul {
  padding: 0;
  margin: 0;
}
nav ul li {
  background: black;
  color: white;
  list-style: none;
  padding: 1em;
  border: 1px solid whitesmoke;
}

SassMeister-rendered.html

<input id='menu' type='checkbox'>
<nav>
  <ul>
    <li>List Item 1</li>
    <li>List Item 2</li>
    <li>List Item 3</li>
    <li>List Item 4</li>
    <li>List Item 5</li>
    <li>List Item 6</li>
  </ul>
</nav>
<div class='content'>
  <h1>
    Test Header With More Content
  </h1>
  <p>
    You can also use the modular scale to adjust text at different breakpoints. A level 2 heading on a desktop may be set at 28px, but at a smaller mobile breakpoint, 28px may appear too large. Therefore, you can adjust to 21px or another measurement in the scale.
  </p>
  <p>
    You can also use the modular scale to adjust text at different breakpoints. A level 2 heading on a desktop may be set at 28px, but at a smaller mobile breakpoint, 28px may appear too large. Therefore, you can adjust to 21px or another measurement in the scale.
  </p>
  <p class='special'>
    You can also use the modular scale to adjust text at different breakpoints. A level 2 heading on a desktop may be set at 28px, but at a smaller mobile breakpoint, 28px may appear too large. Therefore, you can adjust to 21px or another measurement in the scale.
  </p>
</div>