A Pen by betul.

index.html

<link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic' rel='stylesheet' type='text/css'>

<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">

<section id="navBox" class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
  
  <div id="navToggle">
    <div class="fa fa-th-large"></div>
  </div>
  
  <nav id="toggle">
    <ul class="nav">
      <a href="#"><li>Link</li></a>
      <a href="#"><li>Link</li></a>
      <a href="#"><li>Link</li></a>
      <a href="#"><li>Link</li></a>
    </ul>
    <input placeholder="search" id="searchContainer"></input>
  </nav>
  
</section>

<section class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
  <h1>Responsive jQuery/SASS Menu</h1>
  <h2>click the icon above to expand</h2>
</section>

SASSY-Responsive-jQuery-Hide-Show-Menu.markdown

SASSY Responsive jQuery Hide/Show Menu

A simple responsive hide/show responsive menu built with jQuery/SASS/Compass/Bootstrap

A Pen by betul on CodePen.

License.

script.js

$('#navToggle').on('click', function() {
   $('#toggle').toggle(700,'easeOutBounce');
   event.stopPropagation();
});

style.scss

@import "compass";
/*Color Variables*/

$white: #FFFFFF;
$gray: #888888;
$black: #111111;
$charcoal: #111111;
$darkpurple: #613e81;
$purple: #bb83be;
$deeppurple: #4a0e5d;
$blue: #bb83be;
$blue1: #42AAE0;
$blue2: #00658C;

/*SASS Mixins*/

@mixin backgroundDark{
  background-image: -ms-linear-gradient(top, $charcoal 0%, $black 100%); 
  background-image: -moz-linear-gradient(top, $charcoal 0%, $charcoal 100%);
  background-image: -o-linear-gradient(top, $charcoal 0%, $black 100%);
  background-image: 
  -webkit-gradient(linear, left top, left bottom, color-stop(0, $charcoal), color-stop(1, $black));
  background-image: -webkit-linear-gradient(top, $charcoal 0%, $black 100%); 
  background-image: linear-gradient(to bottom, $charcoal 0%, $black 100%);
}

@mixin transition($transition...) {
    -moz-transition:    $transition;
    -o-transition:      $transition;
    -webkit-transition: $transition;
    transition:         $transition;
}

@mixin transition-property($property...) {
    -moz-transition-property:    $property;
    -o-transition-property:      $property;
    -webkit-transition-property: $property;
    transition-property:         $property;
}

@mixin transition-duration($duration...) {
    -moz-transition-property:    $duration;
    -o-transition-property:      $duration;
    -webkit-transition-property: $duration;
    transition-property:         $duration;
}

@mixin transition-timing-function($timing...) {
    -moz-transition-timing-function:    $timing;
    -o-transition-timing-function:      $timing;
    -webkit-transition-timing-function: $timing;
    transition-timing-function:         $timing;
}

@mixin transition-delay($delay...) {
    -moz-transition-delay:    $delay;
    -o-transition-delay:      $delay;
    -webkit-transition-delay: $delay;
    transition-delay:         $delay;
}


/*General CSS*/

body {
  background: $purple; /* Old browsers */
  background: -moz-linear-gradient(-45deg,  $darkpurple 0%, $purple 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,$darkpurple), color-stop(100%,$purple)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(-45deg,  $darkpurple 0%,$purple 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(-45deg,  $darkpurple 0%,$purple 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(-45deg,  $darkpurple 0%,$purple 100%); /* IE10+ */
  background: linear-gradient(135deg,  $darkpurple 0%,$purple 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$darkpurple', endColorstr='$purple',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
  color:#fff;
  height: 1000px;
}

#toggle {
  display: none;
  float: left;
  clear: right;
  width: 100%;
  z-index: 100;
}

#navToggle {
   background-color: $charcoal;
  position: absolute;
  right: 30;
  display: block;
  color: $white;
  padding: 11px;
  height: 44px;
  font: 13px Open Sans;
  z-index: 1000;
  
  &:hover {
   background-color: $deeppurple;
   color: $white;
  }
}

.nav {
   float: right;
   background-color: $charcoal;
   width: 100%;
   padding: 0px 0px 0px 0px;
   border-right: 7px solid $deeppurple;
   height: 45px;
}

#navBox {
   width: 100%;
   margin: 0px 0px 20px 0px;
}

h1 {
   	font-family: 'Lato', sans-serif;
	   font-weight: 100;
   font-size: 4.8em;
   margin: 60px 0px 0px 30px;
}

h2 {
   	font-family: 'Lato', sans-serif;
	   font-weight: 300;
   font-size: 1.8em;
   font-style: italic;
   color: $charcoal;
   margin: -2px 0px 0px 35px;
}

li {
  float: left; 
  clear: right; 
  display: block;
  color: $white;
  height: 100%;
  padding: 13px 14px 13px 14px;
  
  &:hover {
    float: left; 
    clear: right; 
    display: block;
    background-color: $white;
    color: $black;
    border-bottom: 3px solid $deeppurple;
    @include transition(background-color .10s .10s, color .10s);
  }
}

li:first-child {
  margin: 0px 0px 0px 35px;
}

a {
  color: $gray;
  	font-family: 'Lato', sans-serif;
	  font-weight: 300;
  font-size: .9em;
  text-decoration: none;
  text-transform: uppercase;
}

#searchContainer {
  float: right;
  clear: both;
  margin: -36px 30px 0px 0px;
  
  &:hover {
    outline: none;
    border-color: $purple;
    box-shadow: 0 0 5px $purple;
  }
}

/*Media Queries*/

@media only screen and (min-width: 0px) and (max-width: 768px) {

h1 {
	   font-weight: 100;
   font-size: 2.8em;
}

h2 {
	   font-weight: 300;
   font-size: 1.2em;
   margin: 8px 0px 0px 30px;
}
  
.deeppurple {
   color: $deeppurple; 
}
  
#searchContainer {
  display: none;
}
  
li {
  float: left; 
  clear: right; 
  display: block;
  color: $white;
  height: 100%;
  padding: 13px 10px 13px 10px;
}
  
}