CodePen Embed - Responsive Navigation Demo w/ Kube

<div class="wrapper main">

  <div id="left-flyout-nav" class="layout-left-flyout visible-sm"></div>
  <div class="layout-right-content">
    <header class="the-header" role="banner">
      <div class="units-row end">
        <div id="header-logo" class="unit-60 end">
          <h1 id="logo">Responsive Navigation</h1>
        </div>
        <div class="unit-40 search">
          <nav class="the-nav global-nav" role="navigation">
            <ul class="nav nav-pill">
              <li class="nav-dropdown">
                <a href="#"><i class="fa fa-lock"></i>Login <b class="caret"></b></a>
                <ul class="subnav">
                  <li><a href="#">Email</a></li>
                  <li><a href="#">BlackBoard</a></li>
                  <li><a href="#">Wiser</a></li>
                  <li><a href="#">HR Direct</a></li>
                </ul>
              </li>
              <li class="nav-dropdown">
                <a href="#"><i class="fa fa-cog"></i>Resources <b class="caret"></b></a>
                <ul class="subnav">
                  <li><a href="#">Directory</a></li>
                  <li><a href="#">Library</a></li>
                  <li><a href="#">Getting Here</a></li>
                  <li><a href="#">News</a></li>
                  <li><a href="#">Calandar</a></li>
                  <li><a href="#">Maps</a></li>
                </ul>
              </li>
              <li class="nav-dropdown">
                <a href="#"><i class="fa fa-bars"></i>Navigate <b class="caret"></b></a>
                <ul class="subnav">
                  <li><a href="#">About</a></li>
                  <li><a href="#">Academics</a></li>
                  <li><a href="#">Admissions</a></li>
                  <li><a href="#">Research</a></li>
                  <li><a href="#">Students</a></li>
                  <li><a href="#">Faculty &amp; Staff</a></li>
                  <li><a href="#">Athletics</a></li>
                  <li><a href="#">Giving</a></li>
                  <li><a href="#">Alumni</a></li>
                </ul>
              </li>
            </ul>
          </nav>
          <form action="" class="forms search-form hidden-sm" role="search">
            <div class="input-groups">
              <input type="text" name="go" placeholder="Search" />
              <span class="btn-append">
                      <button class="btn"><i class="fa fa-search"></i></button>
                  </span>
            </div>
          </form>
        </div>
      </div>
      <div class="navbar container">

        <!-- Trigger -->
        <div class="units-row end">
          <div class="mobile-20">
            <a class="btn-navbar btn-navbar-navtoggle btn-flyout-trigger" href="#">
              
              <i class="fa fa-bars fa-2x icon-menu"></i>
              <span class="sr-only">Menu</span>

              <!-- <span class="icon-bar btn-flyout-trigger"></span>
              <span class="icon-bar btn-flyout-trigger"></span>
              <span class="icon-bar btn-flyout-trigger"></span> -->
              
            </a>
          </div>
          <div class="mobile-80 visible-sm" role="search">
            <form action="" class="forms search-form mobile">
              <div class="input-groups">
                <input type="text" name="go" placeholder="Search" />
                <span class="btn-append">
                      <button class="btn"><i class="fa fa-search"></i></button>
                  </span>
              </div>
            </form>
          </div>
        </div>

        <!-- Structure -->
        <nav class="the-nav nav-collapse clearfix" role="navigation">
          <ul class="nav nav-pill pull-left">
            <li class="nav-dropdown">
              <a href="#">Get Info <b class="caret"></b></a>
              <ul class="subnav">
                <li><a href="#">Grad e-list</a></li>
                <li><a href="#">Undergrad e-list</a></li>
                <li><a href="#">Chat Sessions</a></li>
                <li><a href="#">Honor Students</a></li>
                <li><a href="#">Out of State</a></li>
                <li><a href="#">Veterans</a></li>
                <li><a href="#">International Undergraduate</a></li>
                <li><a href="#">DACA</a></li>
                <li><a href="#">About Umass Boston</a></li>
                <li><a href="#">Meet Admissions</a></li>
              </ul>
            </li>
            <li class="nav-dropdown">
              <a href="#">Visit  <b class="caret"></b></a>
              <ul class="subnav">
                <li><a href="#">Tour Sign-up</a></li>
                <li><a href="#">Showcase Saturdays</a></li>
                <li><a href="#">Honors College</a></li>
                <li><a href="#">Nursing Sessions</a></li>
                <li><a href="#">Transfer Student</a></li>
                <li><a href="#">Open House</a></li>
                <li><a href="#">Spring Visit Day</a></li>
                <li><a href="#">Welcome Day</a></li>
                <li><a href="#">Parent &amp; Family</a></li>
                <li><a href="#">Group</a></li>
                <li><a href="#">Graduate</a></li>
                <li><a href="#">Plan A Visit</a></li>
              </ul>
            </li>
            <li class="nav-dropdown">
              <a href="#">Apply  <b class="caret"></b></a>
              <ul class="subnav">
                <li><a href="#">Freshman</a></li>
                <li><a href="#">Transfer</a></li>
                <li><a href="#">International Undergraduate</a></li>
                <li><a href="#">Graduate</a></li>
                <li><a href="#">Check Status</a></li>
                <li><a href="#">AP/CLEP</a></li>
              </ul>
            </li>
            <li class="nav-dropdown">
              <a href="#">Cost &amp; Aid  <b class="caret"></b></a>
              <ul class="subnav">
                <li><a href="#">Tuition Fees</a></li>
                <li><a href="#">Student Employment</a></li>
                <li><a href="#">Merit Scholarships</a></li>
                <li><a href="#">Financial Aid</a></li>
                <li><a href="#">Talk To Us</a></li>
              </ul>
            </li>
            <li class="nav-dropdown">
              <a href="#">Admitted Students  <b class="caret"></b></a>
              <ul class="subnav">
                <li><a href="#">Checklist</a></li>
                <li><a href="#">Deposit</a></li>
                <li><a href="#">Events</a></li>
                <li><a href="#">Housing &amp; Dining</a></li>
                <li><a href="#">Why Umass Boston</a></li>
              </ul>
            </li>
          </ul>
          <ul class="nav nav-pill pull-right">
            <!-- <li><a href="#">On Campus </a></li> -->
            <!--  <li><a href="#">Academics </a></li> -->
            <li class="nav-dropdown mobile">
              <a href="#"><i class="fa fa-lock"></i>Login <b class="caret"></b></a>
              <ul class="subnav">
                <li><a href="#">Email</a></li>
                <li><a href="#">BlackBoard</a></li>
                <li><a href="#">Wiser</a></li>
                <li><a href="#">HR Direct</a></li>
              </ul>
            </li>
            <li class="nav-dropdown mobile">
              <a href="#"><i class="fa fa-cog"></i>Resources <b class="caret"></b></a>
              <ul class="subnav">
                <li><a href="#">Directory</a></li>
                <li><a href="#">Library</a></li>
                <li><a href="#">Getting Here</a></li>
                <li><a href="#">News</a></li>
                <li><a href="#">Calandar</a></li>
                <li><a href="#">Maps</a></li>
              </ul>
            </li>
            <li class="nav-dropdown mobile">
              <a href="#"><i class="fa fa-bars"></i>Navigate <b class="caret"></b></a>
              <ul class="subnav">
                <li><a href="#">About</a></li>
                <li><a href="#">Academics</a></li>
                <li><a href="#">Admissions</a></li>
                <li><a href="#">Research</a></li>
                <li><a href="#">Students</a></li>
                <li><a href="#">Faculty &amp; Staff</a></li>
                <li><a href="#">Athletics</a></li>
                <li><a href="#">Giving</a></li>
                <li><a href="#">Alumni</a></li>
              </ul>
            </li>
          </ul>
        </nav>
      </div>
    </header>

    <div class="inner-wrapper">
      <div class="units-row end">
        <div class="unit-100">
          <img src="http://dummyimage.com/1200x400/ccc/fff" class="hero-image" />
        </div>
      </div>
      <h3 class="align-center">&rarr; RESIZE THE SCREEN! &larr;</h3>
      <div class="content-wrapper">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in lobortis magna, quis pretium dui. Sed laoreet ex ut justo maximus aliquet. Praesent at pulvinar lacus. Aliquam finibus est sapien, interdum lacinia justo vehicula in. Vivamus dignissim
          odio a risus venenatis, at vestibulum ligula tempor. Curabitur ut porta justo. Aliquam ut porttitor urna. Cras nec rutrum justo. Aliquam iaculis finibus ligula vel tempor.</p>

        <p>Nulla posuere libero magna, vel vestibulum sem finibus eget. Nunc dapibus lacus ullamcorper turpis suscipit, sit amet malesuada velit mattis. Nullam id posuere magna. Integer pulvinar, nibh vitae porttitor suscipit, nisi lacus posuere quam, quis
          sodales diam elit sed lorem. Suspendisse potenti. Pellentesque sodales, quam eu bibendum consectetur, felis arcu egestas libero, quis commodo ligula felis at elit. Suspendisse eu pharetra ex, id vehicula eros. Morbi quis sodales arcu</p>

        <p>Maecenas sodales id ipsum ut venenatis. Proin dolor mi, tristique et lectus quis, auctor tincidunt ipsum. Praesent sagittis purus eget tortor congue bibendum. In luctus gravida ultricies. Donec commodo lorem quam, a maximus ante tempor sit amet.
          Donec fermentum felis nec hendrerit condimentum. Proin eu mauris nec turpis ultricies accumsan sollicitudin at nibh. Pellentesque quam risus, sodales vel tincidunt sed, vulputate sollicitudin ligula. Morbi non purus sapien. Maecenas blandit,
          metus at dignissim tempor, libero metus ornare ligula, et lobortis nisi enim eu erat. Nunc vestibulum augue sit amet nunc mollis lobortis. Aliquam suscipit erat at dui ultricies egestas. Suspendisse id metus pharetra massa blandit dictum quis
          a ante.</p>

        <br><br>

      </div>
    </div>


  </div>


</div>
<!-- END .layout-left-flyout -->

<footer class="footer" role="contentinfo">
  <div class="wrapper">

    <p class="align-center">Footer</p>

  </div>
</footer>

/*
  CSS File 
*/
/* 
-----------------------------------------------------------------------------*/

@import "compass/css3";
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,400italic,300,300italic,600,600italic,700,700italic,800,800italic);

/* Gray Scale */
$black: #000000;
$gray04: #0A0A0A;
$gray07: #121212;
$gray13: #212121;
$gray19: #303030;
$gray22: #383838;
$gray28: #474747;
$gray30: #4D4D4D;
$gray35: #595959;
$gray38: #616161;
$gray65: #A6A6A6;
$gray80: #CCCCCC;
$gray82: #D1D1D1;
$gray95: #F2F2F2;
$gray97: #F7F7F7;
$gray98: #FAFAFA;
$white: #FFFFFF;

/* Global Variables */
$font-stack: 'Open Sans', Arial, Sans-serif;
$primary-text-color: $gray13;
$body-background-color: $gray95;
$content-wrapper-background: $white;
$margin-bottom: 1.65em;

/*Header*/
$header-logo: $black;
$header-logo-background: transparent;
$header-search-background: $gray80;
$gloabl-nav-text: $gray13;
$global-nav-caret: $gray19;

/* Mobile Menu*/
$mobile-menu-icon: $gray30;
$mobile-nav-flyout: $gray22;
$mobile-nav-flyout-list: $gray22;
$mobile-nav-list-border: $gray28;
$mobile-nav-active: $gray80;
$mobile-subnav-flyout: $gray35;
$mobile-subnav-list-border: $gray38;
$mobile-nav-text-color: $gray97;
$mobile-nav-hover-text: $gray04;

/* Desktop Menu*/
$desktop-navbar-background: $gray98;
$desktop-navbar-border: $gray82;
$desktop-navbar-text: $gray13;
$desktop-navbar-caret: $gray65; 
$desktop-navbar-hover-text: $gray19;
$desktop-navbar-subnav: $gray97;
$desktop-subnav-hover: $gray80;
$desktop-subnav-hover-text: $gray07;



/* =Global
-----------------------------------------------------------------------------*/

body {
  font-family: 100% $font-stack;
  font-size: 1em;
  color: $primary-text-color;
  background: $body-background-color;
  
  /* These styles don't have to be on body,
     they could be on an element that wraps around
     the left-flyout-nav and the content. 
     This is to prevent a problem on Chrome that
     leaves the width of the container with the 
     added width of the flyout nav even after it's been
     hidden. */
  top: 0;
  position: relative;
  overflow-x: hidden;
  width: 100%;
}
h1 {
  font-size: 3em;
  font-weight: 600;
  margin-top: .2em;
}
p {
  font-size: 1em;
  line-height: 1.4em;
  font-weight: 400;
}
ul {
  list-style: none;
  padding: 0;
  margin: 0;
  li {
    margin: 0;
  }
}
.hide {display: none;}
.pull-left {float: left;}
.pull-right {float: right;}
.align-center {text-align: center;}

/* General Mobile First Styles */ 
.hidden-sm {
  display: none;  
}

@media screen and (min-width: 961px) {
  .visible-sm {
    display: none;
  }
  .hidden-sm {
    display: block;  
  }
}

@media screen and (max-width: 960px) {
  .the-header .units-row .unit-40, 
  .the-header .units-row .unit-60 {
      width: 100%;
      float: none;
      margin-left: 0;
      margin-bottom: $margin-bottom;
  }
  .mobile-20 {
      width: 17.6%;
      float: left;
  }
  .mobile-80 {
      width: 79.4%;
      float: right;
  }
}


/* =Header
-----------------------------------------------------------------------------*/

.the-header {
  margin-bottom: 0;
}
#header-logo {
  background-color: $header-logo-background;
}
h1#logo {
  color: $header-logo;
  padding: .25em 0 .35em .25em;
  margin: 0 0 0 0;
}.search {
  margin-bottom: 0;
  background-color: $header-search-background;
}.search-form {
  padding: .25em 10px .35em 10px;
  margin: 0 0 .8em 0;
}
nav.global-nav {
  height: 40px;
  margin: 0 0 0 1.25em;
}

@media screen and (max-width: 960px) {
  h1#logo {
    font-size: 2em;
    padding: .25em 0 .35em .25em;
    margin: 0 0 0 0;
  }
}


/* =Navigation
-----------------------------------------------------------------------------*/

.animation-properties {
  -webkit-perspective: 1000;
  -webkit-backface-visibility: hidden;
  -webkit-transform-style: preserve-3d;
  perspective: 1000;
  backface-visibility: hidden;
  transform-style: preserve-3d;
}

.layout-left-flyout {
  height: 100%;
  position: fixed;
  visibility: hidden;
  z-index: 0;
  transition: visibility 0 linear .2s;
  background: $mobile-nav-flyout;
  @extend .animation-properties;
}
.layout-left-flyout.isCbFlyNavActive {
  visibility: visible;
  transition: z-index 0 linear .2s;
  z-index: 1;
}
.cbFlyNav-wrap {
  display: block;
  position: relative;
  height: 100%;
  overflow: hidden;
  width: 270px;
  background: $mobile-nav-flyout;
  @extend .animation-properties;
  > nav {
    transform: translateY(0);
    transition: transform 0 ease-in-out;
/*    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;*/
  }
}
.nav-collapse {
  -webkit-transform: translate3d(0,0,0);
  -webkit-transform-style: preserve-3d;
}
.layout-right-content {
  transition: transform .2s ease-in-out;
  transform: translate3d(0,0,0);
  @extend .animation-properties;
  z-index: 1;
  /* NOTE! Put container bg here so you don't
     get any clipping when the content is 
     transitioning. Any tips on alternate 
     solutions are welcome.
  */
  background: $content-wrapper-background;
}.layout-right-content.isCbFlyNavActive {
  transform: translate3d(270px,0,0);
  min-width: 320px;
}
.icon-cbmore {
  content: "";
  float: right;
  margin-top: 4.5px;
  padding: 4.5px;
  box-shadow: 1px -1px 0 0px $mobile-nav-text-color inset;
  -webkit-transform: rotate(225deg);
}
.nav-flyout-navmask, .nav-flyout-contentmask {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.nav-flyout-contentmask {
  z-index: 1;
}
.nav-flyout-navmask {
  right: 180px;
  z-index: 1;
}

/* Menu Toggle */
.btn-navbar {
  position: absolute;
  width: 50px;
  height: 40px;
  padding: 4px 0;
  margin: 5px 0;
  display: block;
  z-index: 1;
  cursor: auto;
}
.btn-navbar-navtoggle {
  left: 10px;
}
.btn-navbar .icon-menu {
  display: block;
  width: 30px;
  height: 33px;
  color: $mobile-menu-icon;
  margin: 0 auto 0 auto;
}a.btn-navbar:hover { text-decoration: none;}
.btn-navbar .icon-bar {
  display: block;
  width: 28px;
  height: 4px;
  background-color: $mobile-menu-icon;
  margin: 7px auto 0 auto;
}
.btn-navbar .icon-bar+.icon-bar {
  margin-top: 3px;
}

@media screen and (min-width: 961px) {
 div.navbar a.btn-navbar {
    display: none;
  }
}

/* Global Navbar Styles */
nav.global-nav ul.nav li.nav-dropdown {
 font-size: .8em;
 margin-right: 0; 
 float: left; 
}

/* Navbar Styles */
.navbar {
  height: 40px;
  margin: 0;
  padding: 5px 0;
  position: relative;
  background: $desktop-navbar-background;
  margin-bottom: 10px;
  width: 100%;
  padding: 0 .25em;
  font-family: $font-stack;
  box-shadow: 0 1px 1px 0px $desktop-navbar-border;
  border-top: 1px solid $desktop-navbar-border;
}

@media screen and (max-width: 960px) {
  .global-nav,
  .navbar .nav-collapse {
    display: none;
  }
  .navbar {
    height: 50px;
  }
  .search {
    margin-bottom: 0 !important; 
  }
}

@media screen and (min-width: 961px) {
  .navbar {
    height: auto;
    position: relative;
    background: $desktop-navbar-background;
    margin-bottom: 10px;
    width: 100%;
    padding: 0 0 0 1.35em;
    
  }
}

/* Mobile First Nav */
.the-nav {
  ul.nav-flyout {
    display: block;
    margin-bottom: 15px;
    float: none;
    height: 100%;
    background: $mobile-nav-flyout-list;
    > li {
      float: none;
      display: block;
      width: 270px;
      border-bottom: 1px solid $mobile-nav-list-border;
    }
    li {
      a {
        color: $mobile-nav-text-color;
        display: block;
        text-decoration: none;
        padding: 11px 15px;
        margin-right: 0;
        &:hover {
          background: $gray80;
          color: $mobile-nav-hover-text;
          & i.icon-cbmore {
            box-shadow: 1px -1px 0 0px $mobile-nav-hover-text inset;
          }
        }
      }
    }
    .nav-dropdown {
      position: static;
      .subnav {
        float: none;
        position: absolute;
        display: block;
        top: 0;
        right: 0;
        left: auto;
        width: 0;
        min-width: 0;
        margin: 0;
        list-style: none;
        z-index: 1000;
        background: $mobile-subnav-flyout;
        transition: width .2s ease-in-out;
        >li {
            width: 200px;
            border: 1px solid $mobile-subnav-list-border;
        }
        &.is-subnav-visible {
          width: 180px;
        }
      }
    }
  }
  &.is-inactive ul.nav-flyout{
    > li {
      > a {
        opacity: .2;
      }
      &.is-active > a {
        opacity: 1;
        background: $mobile-nav-active;
        color: $primary-text-color;
      }
    }
  }
}

@media screen and (max-width: 960px) {
  .search-form.mobile {
      padding: 5px 15px 5px 0;
      margin: 0;
  }
}

/* Large Screen Styles*/ 
@media screen and (min-width: 961px) {
  .container {
    width: 95%;
    margin: 0 auto;
  }
  .the-nav{
    display: block;
  }
  .the-nav .nav{
    display: block;
  }
  .the-nav .nav-pill:after {
    content: "";
    display: table;
    clear: both;
  } 
  .the-nav > .nav {
    margin: 0;
    line-height: normal;
  }
  .the-nav > .nav > li,
  .global-nav > .nav > li {
    display: inline-block;
    margin-bottom: 0;
    position: relative;
  }
  .the-nav > .nav > li.mobile {
    display: none;
  }
  .the-nav > .nav > li .caret {
    margin-top: 8px;
    margin-left: 2px;
    border-top-color: $desktop-navbar-caret;
    border-bottom-color: $desktop-navbar-caret;
  }.global-nav > .nav > li .caret {
    margin-top: 8px;
    margin-left: 2px;
    border-top-color: $global-nav-caret;
    border-bottom-color: $global-nav-caret;
  }
  .the-nav > .nav > li a {
    display: block;
    padding: 10px 10px 10px;
    color: $desktop-navbar-text;
    font-weight: 500;
    text-decoration: none;
  }
  .global-nav > .nav > li a {
    color: $gloabl-nav-text;
    font-weight: 500;
    text-decoration: none;
  }
  .the-nav > .nav > li:nth-of-type(1) > a{
    padding-left: 0;
  }
  .the-nav > .nav > li:last-of-type > a{
    padding-right: 0;
  }

  /* Active State */
  .global-nav > .nav > li:hover a {
    color: #000000;
  }
  .the-nav > .nav > li:hover > a {
    color: $desktop-navbar-hover-text;
  }
  .the-nav > .nav > li:hover .subnav {
    display: block;
  }
  .the-nav > .nav > li:hover .caret {
    border-top-color: $desktop-navbar-hover-text;
    border-bottom-color: $desktop-navbar-hover-text;
  }

  /* Subnav */ 
  .nav > li > .subnav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 20;
    margin: 0;
    padding: 0;
    min-width: 160px;
    background: $desktop-navbar-subnav;
    box-shadow: 0 1px 1px 0px $gray19;
  }
  .nav > li > .subnav > li{
    margin-right: 0;
    margin-bottom: 0;
  }
  .nav > li > .subnav > li a{
    color: $primary-text-color;
    transition: all .2s;
    width: 200px;
  }
  .nav > li > .subnav > li:hover a{
    background: $desktop-subnav-hover;
    color: $desktop-subnav-hover-text;
  }
}


/* Resets and clean ups and extras */
*, *:before, *:after {
  @include box-sizing(border-box);
}

.dropdown .caret {
  display: inline-block;
  width: 0;
  height: 0;
  vertical-align: top;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid gray;
  content: "";
}

.clearfix:after {
  content: "";
  display: table;
  clear:both;
}

.container {
  font-family: $font-stack;
  max-width: 1200px;
  width: 95%;
  margin: 0 auto;
  &.navbar {
    width: 100%;
  }

  &:before, &:after {
    content: "";
    display: table;
    clear: both;
  }
}

/* =Wrapper
-----------------------------------------------------------------------------*/

div.wrapper {
  margin: 0 auto;
  padding: 0;
  max-width: 1200px;
  &.main {
    background: $content-wrapper-background;
  }
}div.wrapper div.inner-wrapper[role="main"] {
  margin: 0 auto;
  padding: 0;
}
div.content-wrapper {
  padding: 0 1.6em 0 1.6em;
}

img.hero-image {
  width: 100%;
  margin-bottom: $margin-bottom;
}
.layout-right-content {
  color: $primary-text-color;
}

/* =Footer
-----------------------------------------------------------------------------*/

.footer {
  background: #404040;
  color: #ccc;
  flex-shrink: 0;
  padding: 2em;
}

View Compiled

;(function ( $, window, document, undefined ) {
  
  $body = $( 'body' );
  
  $.cbFlyNav = function( options, element ) {
    this.$el = $( element );
    this._init( options );
  };
 
  $.cbFlyNav.defaults = {
    trigger: '.btn-flyout-trigger'
    ,cbNavWrapper: '#left-flyout-nav'
    ,cbContentWrapper: '.layout-right-content'
    ,minWidth: 961
  };
  
  $.cbFlyNav.prototype = {
  
    _init : function( options ) {
      this.options = $.extend({}, $.cbFlyNav.defaults, options);
      
      //Cache elements and intit variables
      this._config();
      
      //Initialize event listenters
      this._initEvents();
    },
    
    _config : function() {
      this.open = false;
      this.copied = false;
      this.windowWith = $(window).width();
      this.subNavOpen = false;
      this.wasOpened = false;
      this.$cbWrap = $('<div class="cbFlyNav-wrap"></div>');
      this.$trigger = $(this.options.trigger);
      this.$regMenus = this.$el.children( 'ul.nav.nav-pill' );
      this.$newMenus = $(this.$el.clone());
      this.$contentMask = $('<a class="nav-flyout-contentmask" href="#"></a>');
      this.$navMask = $('<a class="nav-flyout-navmask" href="#"></a>');
      this.$openSubnav = "";
    },
    
    _initEvents : function() {
      var self = this; 
      
      self.$trigger.on('click.cbFlyNav', function(e) {
        e.stopPropagation();
        
        if ( !self.open ) {
          if ( !self.copied ) {
            self._copyNav();
          }
          self._openNav();
        }
        else {
          self._closeNav();
        }
        self.wasOpened = true;
        
        //console.log('WasOpened: '+self.wasOpened+ '. Open? '+self.open);
      });
      
      //Hide menu when window is bigger than allowed minWidth
      $(window).on('resize', function() {
        var windowWidth = $(window).width();
        if(self.open && windowWidth > self.options.minWidth){
          self._closeNav();
        }
      });
      
      //Hide menu when body clicked. Usign an a tag to mask content.
      self.$contentMask.on('click.cbFlyNav', function( e ) {
        e.preventDefault();
        self._closeNav();
      });
      
      self.$navMask.on('click.cbFlyNav', function( e ) {
        e.preventDefault();
        self._closeSubNav();
      });
      
      //Handle clicks inside menu
      self.$newMenus.on( 'click.cbFlyNav', function( e ) {
        e.stopPropagation();
        var $menu = $(this);
        
        //console.log("Menu clicked");
      });
      
      //Handle menu item clicks
      self.$newMenus.children().find('li').on('click.cbFlyNav', function(e) {
        e.stopPropagation();
        var $item = $(this),
            $subnav = $item.find('ul.subnav');
        
        if ($subnav.length > 0) {
          //item with subnav clicked
          
          //console.log("Item with subnav clicked");

          $subnav.css('height', window.innerHeight);
          self._openSubNav($subnav);
        }
        else {
          //item without subnav clicked
          //console.log("Item without subnav clicked");
        }
      });
      
    },
    
    _copyNav : function() {
      var self = this;
      console.log("copying nav");
      
      var newWrap = $('<div class="cbFlyNav-wrap"></div>');
      self.$newMenus.children( 'ul.nav.nav-pill' ).each(function() {
        $this = $(this);
        $this.removeClass('nav-pill').addClass('nav-flyout');
        $this.find('.caret').replaceWith('<i class="icon-cbmore"></i>')
      });
            
      $(self.options.cbNavWrapper).prepend(self.$cbWrap.prepend(self.$newMenus));
      self.copied = true;
     
    },
    
    openNav : function() {
      if ( !this.open ) {
        this._openNav();
      }
    },
    
    _openNav : function() {
      var self = this;
      console.log("Opening Nav");
        
      $(self.options.cbNavWrapper).addClass('isCbFlyNavActive');
      $(self.options.cbContentWrapper)
                        .addClass('isCbFlyNavActive')
                        .append(self.$contentMask);

      self.open = true;
    },
    
    closeNav : function() {
      if ( !this.close ) {
        this._closeNav();
      }
    },
    
    _closeNav : function() {
      var self = this;
      console.log("Closing Nav");
      
      $(self.options.cbNavWrapper).removeClass('isCbFlyNavActive');
      $(self.options.cbContentWrapper).removeClass('isCbFlyNavActive');
      
      if(self.subNavOpen) {
        self._closeSubNav();
      }
      self.$contentMask.detach();

      self.open = false;
    },
    
    _openSubNav : function($subnav) {
      var self = this,
          $parent = $subnav.parent('li');
          
      $subnav.addClass('is-subnav-visible');
      $parent.addClass('is-active');
      self.$newMenus.addClass('is-inactive');
      self.$cbWrap.append(self.$navMask);
      
      $subnav.on('click.cbFlyNav', function(e) {
        e.stopPropagation();
      });
      
      self.$openSubnav = $subnav;
      self.subNavOpen = true;
    },

    _closeSubNav : function() {
      var self = this,
          $parent = self.$openSubnav.parent('li');
      
      self.$openSubnav.removeClass('is-subnav-visible');
      $parent.removeClass('is-active');
      self.$newMenus.removeClass('is-inactive');
      self.$navMask.detach();
      
      self.$openSubnav.off('click.cbFlyNav');
      
      self.$openSubnav = "";
      self.subNavOpen = false;
    }
  };
  
  
  $.fn.cbFlyout = function ( options ) {
    this.each(function() {  
      var instance = $.data( this, 'cbFlyout' );
      if ( instance ) {
        instance._init();
      }
      else {
        instance = $.data( this, 'cbFlyout', new $.cbFlyNav( options, this ) );
      }
    });
    
    return this;
  }
  
}(jQuery, window, document));

$(document).ready(function(){
  $('.the-nav').cbFlyout();
});

This Pen is owned by Johnny Mango on CodePen.

See more by @Mango_Design on CodePen

External CSS

External JavaScript

//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js