What is bigSlide?

bigSlide is a teeny tiny (~1kb compressed) jQuery plugin for creating off-screen slide panel navigation.

It will slide the navigation panel as well as any containers given the .push class (or a class of your choosing in the settings).

Getting Started

In your document, include a link to toggle the navigation:

<a href="#menu" class="menu-link">☰</a>

And your nav menu:

<nav id="menu" class="panel" role="navigation"> <ul> <li><a href="#">Home</a></li> <li><a href="#">The Ballad of El Goodo</a></li> <li><a href="#">Thirteen</a></li> <li><a href="#">September Gurls</a></li> <li><a href="#">What's Going Ahn</a></li> </ul> </nav>

Reference jQuery and the big-slide.js file:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="jquery.big-slide.js"></script>

To initialize the plugin,:

<script> $(document).ready(function() { $('.menu-link').bigSlide(); }); </script>

Options

Variable Default Value Description menu ('#menu') The attribute ID of the navigation menu push ('.push') The class given to additional elements to 'push' when the nav is toggled side left The side of the navigation menu (either 'right' or 'left') menuWidth 15.6em The width of the navigation menu speed 300 The speed (in milliseconds) of the navigation menu easyClose false Set this to true to allow users to toggle the menu closed with any click

Other notes

Although bigSlide will automatically position your menu off screen, I recommend adding the following to your CSS to prevent a flash of the menu on load:

.panel { position: fixed; left: -15.625em; /*left or right and the width of your navigation panel*/ width: 15.625em; /*should match the above value*/ }

.wrap { position: relative; }

License

Additionally, any elements that use the .push class should be relatively positioned:

bigSlide is licensed under The MIT License (MIT)