CodePen

HTML

            
              <!--

This pen is a proof of concept only. The current version works best in firefox.

-->

<!-- added menu wrapper to the body so other elements can potentially hook of the same class --> 
<body class="menu-active">
  <!-- menu wrapper is needed for hover / click area and positioning --> 
  <div class="menu-wrapper">
    <nav class="menu">
      <ul>
        <li><a href="#">Two all-beef patties</a></li>
        <li><a href="#">Special sauce</a></li>
        <li><a href="#">Lettuce</a></li>
        <li><a href="#">Cheese</a></li>
        <li><a href="#">Pickles</a></li>
        <li><a href="#">Onions</a></li>
        <li><a href="#">On a sesame seed bun</a></li>
      </ul>
    </nav>
  </div>
  <p>Respond me!</p>
</body>
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              body {
  background: #13171b;
  color: white;
  font-family: 'Helvetica', sans-serif;
}

.menu-wrapper {
  padding-top: 30px;
  cursor: pointer;
  overflow: hidden;
  @include transition(padding 0.5s);
  @media screen and (min-width: 500px) {
    padding-top: 0px;
    cursor: hand; 
  }
}

nav.menu {
  position: relative; // for positioning before and after elements
  background: white;
  height: 5px;
  width: 35px;
  border-radius: 2px;
  padding: 0;
  cursor: pointer;
  @include transition(all 0.5s 0.3s, margin 0.5s 0s);
  @media screen and (min-width: 500px) {
    height: auto;
    width: auto;
  }
  ul {
    list-style: none;
    margin: 0;
    padding: 0;
    opacity: 0;
    @include transition(opacity 0.5s 0.3s);
    @media screen and (min-width: 500px) {
      opacity: 1;
    }
    li {
      border-radius: 2px;
      overflow: hidden;
      visibility: hidden;
      @media screen and (min-width: 500px) {
        display: inline-block;
        visibility: visible;
      }
      a {
        color: #53A8C9;
        display: block;
        padding: 10px 20px 10px 10px;
        border-top: solid 1px #eeeeee;
        text-decoration: none;
        @include transition(all 0.3s 0s);
        @media screen and (min-width: 500px) {
          padding: 10px;
          border-radius: 2px;
        }
        &:first-child {
          border-top: none;
        }
        &:hover,
        &:focus,
        &.active {
          background: #eeeeee;
          color: darken(#53A8C9, 10);
          padding: 10px 10px 10px 20px;
          @media screen and (min-width: 500px) {
            padding: 10px;
          }
        }
      }
    }
  }
  &:before,
  &:after {
    content: '';
    height: 5px;
    width: 35px;
    background: white;
    display: block;
    position: absolute;
    border-radius: 2px;
    left: 0;
    @include transition(all 0.5s);
    @media screen and (min-width: 500px) {
      display: none;
    }
  }
  &:before {
    top: -10px;
  }
  &:after {
    top: -20px;
  }
}

// -------------------- Active state 

.menu-active {
  .menu-wrapper {
    padding-top: 0px;
  }
  nav.menu {
      width: 200px;
      margin-top: 40px;
      box-shadow: 0px 2px 0px 0px rgba(black, 0.2);
      height: 280px;
      @include transition(all 0.5s 0.3s, margin 0.5s 0s);
      @media screen and (min-width: 500px) {
        margin-top: 0;
        width: auto;
        height: auto;
      }
      ul {
        opacity: 1;
        @include transition(opacity 0.5s 0s);
        li {
          visibility: visible;
        }
      }
      &:before,
      &:after {
        top: -20px;
        left: 100%;
        right: 0;
        width: 25px;
        margin-left: -25px;
      }
      &:before {
        @include transform(rotateZ(45deg));
      }
      &:after {
        @include transform(rotateZ(-45deg));
      }
    }
 }
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              $(".menu-wrapper").on('click', function(){
  $("body").toggleClass('menu-active');
});
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................