Skip to content

Instantly share code, notes, and snippets.

@jeremymouton

jeremymouton/nav-collapse.js

Last active February 10, 2016 19:49
Download ZIP

Revisions

  1. jeremymouton revised this gist Feb 10, 2016. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions nav.less
    View file
    Original file line number Diff line number Diff line change
    @@ -20,6 +20,7 @@
    }
    }


    /*
    * Nav toggle
    *
  2. jeremymouton revised this gist Feb 10, 2016. 1 changed file with 3 additions and 0 deletions.
    3 changes: 3 additions & 0 deletions readme.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,3 @@
    # Responsive navigation

    Demo: http://codepen.io/jeremymouton/pen/wMRJwJ
  3. jeremymouton created this gist Feb 10, 2016.
    11 changes: 11 additions & 0 deletions nav-collapse.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,11 @@
    $(document).ready( function() {
    /*
    * Nav collapse
    *
    */
    $('[data-nav-collapse]').click( function(e) {
    e.preventDefault();
    var target = $(this).data('nav-collapse');
    $(target).toggleClass('is-active');
    });
    });
    19 changes: 19 additions & 0 deletions nav.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,19 @@
    <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>
    128 changes: 128 additions & 0 deletions nav.less
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,128 @@
    @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;
    }
    }
    }