<div class="container">
  
  <a href="#" data-nav-id="main-nav" class="c-nav--trigger js-nav-toggle">Primary Menu</a>

  <nav class="c-nav--main" role="navigation" id="main-nav">
    
    <ul class="c-nav__list">
      <li class="c-nav__item"><a class="c-nav__link" href="#">Home</a></li>
      <li class="c-nav__item"><a class="c-nav__link" href="#">About</a></li>
      <li class="c-nav__item"><a class="c-nav__link" href="#">Clients</a></li>
      <li class="c-nav__item"><a class="c-nav__link" href="#">Contact Us</a></li>
    </ul>
    
  </nav>

  <a href="#" data-nav-id="secondary-nav" class="c-nav--trigger js-nav-toggle">Secondary Menu</a>

  <nav class="c-nav--secondary" role="navigation" id="secondary-nav">

    <ul class="c-nav__list">
      <li class="c-nav__item"><a class="c-nav__link" href="#">Home</a></li>
      <li class="c-nav__item"><a class="c-nav__link" href="#">About</a></li>
      <li class="c-nav__item"><a class="c-nav__link" href="#">Clients</a></li>
      <li class="c-nav__item"><a class="c-nav__link" href="#">Contact Us</a></li>
    </ul>

  </nav>

  <h3>Title</h3>

  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo aliquid sunt rerum dignissimos voluptatem ex blanditiis nisi consequatur repudiandae quisquam quos error quam optio, dicta nesciunt neque, et reiciendis omnis.</p>
  
</div>

/* Global */
*,
*:before, 
*:after {
  position: relative;
  box-sizing: border-box;
}

/* Container */

.container {
  max-width: 400px;
  margin: 20px auto;
}

/* Nav controls */

.c-nav--trigger {
  display: block;
  padding: 20px;
  background: #333;
  color: #fff;
  text-decoration: none;
  transition: background ease .3s;
  
  &:hover,
  &.is-active {
    background: #000;
  }
}

/* Navigation */

.c-nav__list {
  list-style: none;
  margin: 0 0 30px 0;
  padding: 0;
}

.c-nav__link {
  text-decoration: none;
  display: block;
  background: #ccc;
  color: #333;
  border-bottom: 1px solid #fff;
  padding: 10px 10px 10px 20px;
  transition: background ease .3s;
  
  &:hover {
    background: #fff;
  }
}

/* Nav specific */

.c-nav--main,
.c-nav--secondary {
  display: none;
  overflow: hidden;
  
  &.is-active {
    display: block;
  }
}

/* globals $, TweenLite */

'use strict';

/**
 * Navigation controller for expanding navs
 * @type {Object}
 */
var NavController = {
  $trigger: $('.js-nav-toggle'), // these trigger open/close
  // Animation settings
  animate: {
    duration: 0.3,
    
    visible: {
      display: 'block',
      autoAlpha: 1,
      height: 0 // this is calculated correctly later
    },
    
    hidden: {
      display: 'none',
      autoAlpha: 0,
      height: 0
    }
  },
  attrs: {
    id: 'data-nav-id'
  },
  classes: {
    active: 'is-active'
  },
  
  /**
   * Kick things off
   */
  init: function() {
    this.bindUI();
  },
  
  /**
   * Watch for events
   */
  bindUI: function() {
    this.$trigger.on('click', this.handleClick);
  },
  
  /**
   * Show/hide nav based on click
   * @param  {Event} e
   */
  handleClick: function(e) {
    var _ = NavController,
        $trigger = $(this),
        navId = $trigger.attr(_.attrs.id),
        $nav = $('#' + navId);
    
    e.preventDefault();
    
    $nav.toggleClass(_.classes.active);
    
    // Fetch correct height to animate to and from
    _.animate.visible.height = $nav.outerHeight();
    
    if(_.isNavOpen($nav)) {
      $trigger.addClass(_.classes.active);
      TweenLite.fromTo($nav, _.animate.duration, _.animate.hidden, _.animate.visible);
    } else {
      $trigger.removeClass(_.classes.active);
      TweenLite.fromTo($nav, _.animate.duration, _.animate.visible, _.animate.hidden);
    }
  },
  
  /**
   * Check if given nav is open/closed
   * @param  {DOM Element}  $nav 
   * @return {Boolean}
   */
  isNavOpen: function($nav) {
    return $nav.hasClass(this.classes.active);
  }
};

NavController.init();