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).
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>
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 |
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*/
}
Additionally, any elements that use the .push class should be relatively positioned:
.wrap {
position: relative;
}
bigSlide is licensed under The MIT License (MIT)