Responsive navigation (depends on jQuery)

readme.md

Responsive navigation

Demo: http://codepen.io/jeremymouton/pen/wMRJwJ

nav-collapse.js

$(document).ready( function() {
  /*
   * Nav collapse
   *
   */
  $('[data-nav-collapse]').click( function(e) {
    e.preventDefault();
    var target = $(this).data('nav-collapse');
    $(target).toggleClass('is-active');
  });
});

nav.html

<nav class="nav" role="navigation">
  <div class="nav-wrapper">
    <div class="nav-toggle-wrapper">
      <a href="" class="nav-toggle" title="Show dashboard menu" data-nav-collapse=".toggle-main-nav">
        <span class="nav-toggle__menu">Menu</span>
        <span class="nav-toggle__icon">&equiv;</span>
      </a>
    </div>
    <div class="nav-collapse toggle-main-nav">
      <ul class="nav-section">
        <li><a href="#">Nav item</a></li>
        <li><a href="#">Nav item</a></li>
        <li><a href="#">Nav item</a></li>
        <li><a href="#">Nav item</a></li>
        <li><a href="#">Nav item</a></li>
      </ul>
    </div>
  </div>
</nav>

nav.less

@screen-xs-max: 767px;
@screen-sm: 768px;
@screen-sm-max: 991px;
@screen-md: 992px;

/**
 * Nav
 *
 */

.nav {
  border: none;
  border-radius: 0;
  margin-bottom: 20px;
}

.nav-wrapper {
  @media (max-width: @screen-xs-max) {
    padding: 0;
  }
}


/*
 * Nav toggle
 *
 */

.nav-toggle-wrapper {
  padding: 15px;
  line-height: 100%;

  @media (min-width: @screen-sm) {
    display: none;
  }
}

.nav-toggle:active,
.nav-toggle:focus,
.nav-toggle:hover,
.nav-toggle { text-decoration: none; }

.nav-toggle {
  display: table;
  width: 100%;
}

.nav-toggle__icon,
.nav-toggle__menu {
  display: table-cell;
  vertical-align: top;
  padding: 0;
}

.nav-toggle__icon {
  padding-left: 10px;
  text-align: right;
}

.nav-toggle__menu { text-transform: uppercase; }


/*
 * Nav collapse
 *
 */

.nav-collapse {
  max-height: 0;
  transition: all .2s ease-in;
  overflow: hidden;

  @media (min-width: @screen-sm) {
    max-height: none;
  }

  @media (min-width: @screen-md) {
    display: table;
    width: 100%;
  }

  &.is-active {
    max-height: 500px;
    visibility: visible;
  }
}


/*
 * Nav section
 *
 */

.nav-section {
  list-style: none;
  padding: 0;
  margin: 0;

  @media (min-width: @screen-md) {
    display: table-cell;
  }

  @media (min-width: @screen-sm) and (max-width: @screen-sm-max) {
    display: table;
    width: 100%;
  }

  > li {
    display: block;
    position: relative;

    @media (min-width: @screen-md) {
      display: inline-block;
    }

    @media (min-width: @screen-sm) and (max-width: @screen-sm-max) {
      display: table-cell;
      vertical-align: middle;
      float: none;
      text-align: center;
    }

    > a {
      display: block;
      text-decoration: none;
      padding: 10px 15px;
    }
  }
}