A repository of over 1000 quality jQuery plugins

jQuery jQuery SlideNav

jQuery SlideNav is a jQuery Responsive & Drawer plugin.

Created by Cabana

jQuery plugin, markup and scss for mobile slide nav as seen on our theme sites.

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

How to use

HTML

Menu markup:

<nav class="slide-nav">
  <ul>

    <li>
      <input type="search" class="slide-nav-search" placeholder="Søg">
    </li>

    <li><a href="#">Bliv medlem</a></li>

    <li>
      <a href="#">Bliv medlem</a>
      <ul>
        <li><a href="#">Mega mikkel</a></li>
        <li><a href="#">Mega mikkel</a></li>
      </ul>
    </li>

    <li>
      <a href="#" class="current">Bliv medlem</a>
      <ul>
        <li><a href="#">Mega mikkel</a></li>
        <li><a href="#">Mega mikkel</a></li>
      </ul>
    </li>

  </ul>
</nav>

Button to trigger the slide:

<button type="button" class="toggle-slide-nav">Menu</button>

If on a subpage use .current on an anchor element to mark it as the current page. The .show-sub-nav class can be used on a list item containing a sub nav to have that open from the start.

The markup should be placed outside any main site wrapper element you may have.

CSS

Just include the slide-nav.scss file. You need to adjust some of the selectors to match the classes you're using.

JavaScript

$('.slide-nav').slideNav({
  // options...
});

Possible options

hasSubNavs: [boolean] Set to true if the menu should support sub menus. Default is false.

toggleButtonSelector: [string] A jQuery style selector of the button that should toggle the nav. Default is .toggle-slide-nav.

touch: [boolean] Whether or no swipe events to toggle the nav should be set. This requires jquery.hammer.js Default is false.



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...

  • SimpleMobileNav

    jQuery-?????? ??? ?????????? ?????????????? ???? ?? ????????????? ?? ???????? ????

  • jQuery Mobile Menu

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