Generated by SassMeister.com.

SassMeister-input-HTML.html

<div>
  <a href="#open" class="trigger">Open Flyout</a>
  <a href="#" class="close">Close</a>
  <div class="flyout-wrapper" id="open">
    <ul class="flyout">
      <li>One</li>
      <li>Two</li>
      <li>Three</li>
      <li>Four</li>
      <li>Five</li>
      <li>Six</li>
    </ul>
  </div>
</div>

SassMeister-input.sass

// ----
// Sass (v3.3.7)
// Compass (v1.0.0.alpha.18)
// ----

body
  background: #2d3c48
  margin: 0
div
  background: #f7f7f7
  padding: 20px 0
  text-align: center

.close
  color: #3e8cb7
  margin-left: 12px
  text-decoration: none
.trigger
  background: #fafafa
  border: 1px solid rgba(#2d3c48, .12)
  color: #959ba2
  padding: 10px 14px
  position: relative
  text-decoration: none
  transition: color .3s ease
  &:hover
    color: #3e8cb7
  
.flyout-wrapper
  background: rgba(white,0)
  height: 0
  overflow: hidden
  padding: 38px 0 0
  position: absolute
  top: 0
  right: 0
  left: 0
  z-index: -1
  transition: height 0s linear .3s, background .3s ease
  &:target
    background: rgba(white,.3)
    height: 100%
    transition: background .3s ease .15s
    .flyout
      -webkit-transform: translate3d(0, 20px, 0)
      transition: -webkit-transform .3s ease-out
      li
        color: #3e8cb7
.flyout
  background: white
  border-bottom: 1px solid #ccc
  list-style: none
  margin: 0
  padding: 0
  position: absolute
  left: 0
  right: 0
  text-align: left
  -webkit-transform: translate3d(0, -100vh, 0)
  transition: -webkit-transform .3s ease-in
  z-index: -1
  li
    border-top: 1px solid #ccc
    color: transparent
    display: block
    padding: 12px 14px 9px
    transition: color .25s ease .35s
  

SassMeister-output.css

body {
  background: #2d3c48;
  margin: 0;
}

div {
  background: #f7f7f7;
  padding: 20px 0;
  text-align: center;
}

.close {
  color: #3e8cb7;
  margin-left: 12px;
  text-decoration: none;
}

.trigger {
  background: #fafafa;
  border: 1px solid rgba(45, 60, 72, 0.12);
  color: #959ba2;
  padding: 10px 14px;
  position: relative;
  text-decoration: none;
  transition: color 0.3s ease;
}
.trigger:hover {
  color: #3e8cb7;
}

.flyout-wrapper {
  background: rgba(255, 255, 255, 0);
  height: 0;
  overflow: hidden;
  padding: 38px 0 0;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: -1;
  transition: height 0s linear 0.3s, background 0.3s ease;
}
.flyout-wrapper:target {
  background: rgba(255, 255, 255, 0.3);
  height: 100%;
  transition: background 0.3s ease 0.15s;
}
.flyout-wrapper:target .flyout {
  -webkit-transform: translate3d(0, 20px, 0);
  transition: -webkit-transform 0.3s ease-out;
}
.flyout-wrapper:target .flyout li {
  color: #3e8cb7;
}

.flyout {
  background: white;
  border-bottom: 1px solid #cccccc;
  list-style: none;
  margin: 0;
  padding: 0;
  position: absolute;
  left: 0;
  right: 0;
  text-align: left;
  -webkit-transform: translate3d(0, -100vh, 0);
  transition: -webkit-transform 0.3s ease-in;
  z-index: -1;
}
.flyout li {
  border-top: 1px solid #cccccc;
  color: transparent;
  display: block;
  padding: 12px 14px 9px;
  transition: color 0.25s ease 0.35s;
}

SassMeister-rendered.html

<div>
  <a href="#open" class="trigger">Open Flyout</a>
  <a href="#" class="close">Close</a>
  <div class="flyout-wrapper" id="open">
    <ul class="flyout">
      <li>One</li>
      <li>Two</li>
      <li>Three</li>
      <li>Four</li>
      <li>Five</li>
      <li>Six</li>
    </ul>
  </div>
</div>