simple-nav

Javascript

with NPM

SimpleNav = require('simple-nav')
 
myNavigation = new SimpleNav({
  // defaults
  scrolledClass: 'scrolled'
  expandedClass: 'open'
  scrollTolerance: 120
  gotoSpeed: 10
 
  gotoAnchorTimer: 500
  handleScrollTimer: 300
  toggleMenuTimer: 300
});

Scss

$small: "only screen and (min-width: 40.063em)";
 
nav.primary-navigation {
  > h1 {
    @include inline-block;
  }
 
  > .menu {
    @include inline-icon('menu');
    display: block;
    position: absolute;
    right: 10px;
    top: 10px;
 
    span { display: none; }
  }
 
  > ul.nav-links {
    display: none;
    float: right;
 
    li {
      @include inline-block;
      margin-right: rem-calc(10px);
      margin-top: rem-calc(12px);
    }
  }
 
  .button {
    @include inline-block;
    margin-bottom: 0;
    margin-top: rem-calc(-2px);
    padding: rem-calc(4px 6px);
  }
 
  @media #{$small} {
    > .menu { display: none; }
 
    > ul.nav-links {
      display: block;
    }
  }
 
  // When the body tag has the open class applied 
  body.open & {
    > ul.nav-links { display: block; }
  }
}

Markup

%nav.primary-navigation
  - # Title & Menu Icon
  %h1 Title
  %a.menu(href="#") <span>Menu</span>
 
  - # Nav links
  %ul.nav-links
    %li
      %a(href="some-link") Some Link
    %li
      %a(href="some-other-link") Some Other Link
    %li
      %a.button(href="AWESOME") AWESOME