A repository of over 1000 quality jQuery plugins

jQuery LayerNav

LayerNav is a jQuery Responsive & Drawer plugin.

Created by Aaronbushnell

A small, jQuery-powered navigation menu for mobile and up

Not what you're looking for? Click here to view more Responsive & Drawer jQuery plugins

LayerNav

A small, jQuery-powered navigation menu for mobile and up

Install

npm install layernav # or
bower install layernav

Usage

1. Include CSS

<link rel="stylesheet" href="/layernav.css?x56871">

2. Create navigation menu (use any class you'd like)

<nav class="js-main-nav">
  <ul>
    <li><a href="#">Lorem ipsum dolor</a></li>
    <li><a href="#">Lorem ipsum dolor</a>
      <ul>
        <li><a href="#">Ipsum dolor sit</a></li>
        <li><a href="#">Ipsum dolor sit</a>
          <ul>
            <li><a href="#">Ipsum dolor sit</a></li>
            <li><a href="#">Ipsum dolor sit</a></li>
            <li><a href="#">Ipsum dolor sit</a></li>
            <li><a href="#">Ipsum dolor sit</a></li>
            <li><a href="#">Ipsum dolor sit</a></li>
          </ul>
        </li>
        <li><a href="#">Ipsum dolor sit</a></li>
        <li><a href="#">Ipsum dolor sit</a></li>
        <li><a href="#">Ipsum dolor sit</a></li>
      </ul>
    </li>
    <li><a href="#">Lorem ipsum dolor</a></li>
    <li><a href="#">Lorem ipsum dolor</a></li>
    <li><a href="#">Lorem ipsum dolor</a></li>
  </ul>
</nav>

3. Include scripts

<script src="/path/to/jquery.js?x56871"></script>
<script src="/layernav.js?x56871"></script>
<script>
  $('.js-main-nav').layerNav();
</script>

Notes

  • If using <nav> and need IE 8 support, make sure you use an HTML5 shiv

Optional configurations:

$('.js-main-nav').layerNav({
  lgWidth: 500,                         // Size to switch to desktop-mode
  toggleButton: '.js-tiny-nav-toggle',  // Set to a custom element if you'd like to position the mobile toggle button
  toggleButtonText: 'Menu',             // Text of the toggle button
  expandIcons: false,                   // If false, any parent link will open menu on click, if true every parent link has an expand icon to view items below
  expandIconsEl: 'span'                 // Set the expand icon element to a <span>, <div>, or something else
});


You might also like these other Responsive & Drawer jQuery Plugins

  • hiraku

    “hiraku” means “open” in Japanese. As you can imagine, “offcanvas-menu” is like a drawer and it is of...

  • jQuery Mobile Menu

    jQuery mobile menu with fixed nav bar (like yeoman.io have)

  • jQuery NavScroll

    A simple jQuery plugin for animated scrolling to a section of your page, with mobile dropdown support.