CodePen

HTML

            
              <div class="nav-open"><a href="#" style="display: block; position: fixed; right: 50%; background: #EA562B; padding: 50px 50px; color: white; text-decoration: none;">CLICK HERE</a></div>


<nav>
  <ul>
      <li><a href="#">What We Do</a></li>
      <li><a href="#">How We Do It</a></li>
      <li><a href="#">Why We Do It</a></li>
      <li><a href="#">Portfolio</a></li>
      <li><a href="#">Contact</a></li>
      <li class="close-nav"><a>** Close Navigation **</a></li>
  </ul>
</nav>
            
          
!

CSS

            
              $blue: #4CBBCF; // 70% transparency
$orange: #EA562B; // 50% transparency

nav {
    display: none;
    visibility: hidden;
    float: none;
    padding: 0;
    &.active {display: block; visibility: visible; z-index: 99; position: absolute; height: 100%; top: 0; left: 0; width: 100%; background: $blue;
    ul {margin-top: 0; padding-top: 30px;}
    }
    &.mobile-hide {
        display: none !important;
        visibility: hidden !important;
    }
    ul li {
        display: block;
        clear: left;
        padding-left: 0;
        text-align: center;
        font-size: 16px;
        font-family: calibri, arial, sans-serif;
        a {
            display: block;
            background: $blue;
            @include transition(background-color 0.1s ease);
            width: 100%;
            padding: 15px 0;
            border-top: 1px solid #fff;
            color: white !important;
            text-decoration: none;
            span.first-word {color: white;}
            &:hover, &:active, &:focus {
                background: $orange;
                span.first-word {color: white;}
            }
        }
        &:first-child {
            a {
                border-top: 0;
            }
        }
        &.close-nav {
            margin-top: 0;
            line-height: 40px;
            font-size: 12px;
            cursor: pointer;
        }
    }
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
  $('.nav-open a, li.close-nav').click(function() {
      if(!$('nav').hasClass('active'))
      {
          $('nav').removeClass('mobile-ide').fadeIn(400).addClass("active");
      }
      else if($('nav').hasClass('active'))
      {
          $('nav').removeClass('active').fadeOut(400).addClass("mobile-hide");
      }
      return false;
  });
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................