Skip to content

Instantly share code, notes, and snippets.

@derekjohnson

derekjohnson/nav.css

Last active August 29, 2015 14:04
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save derekjohnson/e1793d8d09c1c1036b37 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save derekjohnson/e1793d8d09c1c1036b37 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. derekjohnson revised this gist Jul 28, 2014. 1 changed file with 10 additions and 0 deletions.
    10 changes: 10 additions & 0 deletions nav.js
    View file
    Original file line number Diff line number Diff line change
    @@ -7,10 +7,20 @@
    nav.classList.toggle('l-nav--capable-open');

    e.preventDefault();
    },

    close_nav = function(e) {
    var clicked = e.target;

    if(clicked.nodeName.toLowerCase() === 'a') {
    nav.classList.remove('l-nav--capable-open');
    }
    };

    nav.classList.add('l-nav--capable');

    toggler.addEventListener('click', toggle_nav, false);
    nav.addEventListener('click', close_nav, false);
    }
    })(this, this.document);

  2. derekjohnson created this gist Jul 28, 2014.
    13 changes: 13 additions & 0 deletions nav.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,13 @@
    .l-nav {
    &--capable {
    position: absolute;
    right: 0;
    top: -500%;
    }

    &--capable-open {
    top: 0;
    right: 5.46875%;
    padding-top: 5.75em;
    }
    }
    9 changes: 9 additions & 0 deletions nav.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,9 @@
    <nav class="l-nav" id="menu" role="navigation">
    <ul class="main-menu">
    <li><a href="#1">Home</a></li>
    <li><a href="#1">About us</a></li>
    <li><a href="#1">Services</a></li>
    <li><a href="#1">News</a></li>
    <li><a href="#1">Contact us</a></li>
    </ul>
    </nav>
    16 changes: 16 additions & 0 deletions nav.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,16 @@
    (function(win, doc, undefined) {
    if('addEventListener' in win && 'classList' in doc.createElement('a')) {
    var nav = doc.getElementById('menu'),
    toggler = helper.get_single_by_class('js-toggle'),

    toggle_nav = function(e) {
    nav.classList.toggle('l-nav--capable-open');

    e.preventDefault();
    };

    nav.classList.add('l-nav--capable');

    toggler.addEventListener('click', toggle_nav, false);
    }
    })(this, this.document);