sideswipe
v0.3.1
Published
A trendy JS side menu component.
Downloads
9
Maintainers
Readme
SideSwipe
A trendy JS side menu component.
SideSwipe is a really simple side menu component written in vanilla JS.
Requirments
Installation
npm install sideswipe
Usage
Require it:
var Menu = require('sideswipe');
Initialize it:
window.onload = function(){
new Menu();
};
Customize the menu:
new Menu({
overlay: true,
overlayOpacity:.25,
pan: true,
side: 'left',
menuHandleClass: 'sideswipe-handle',
menuPanelClass: 'sideswipe-menu',
pageClass: 'sideswipe-page',
tween: TWEEN.Easing.Exponential.InOut
});
SideSwipe uses the wonderful tween.js package. The default easing is InOut, you can pass it anything listed here.
SideSwipe requires the menuHandle, menuPanel and page classes to be defined.
Here is some HTML to get you started:
<header>
<a class="sideswipe-handle" href="#">
<span class="hamburger-icon"></span>
</a>
</header>
<div id="content" class="sideswipe-page" role="main">
...
</div>
<nav class="sideswipe-menu">
<ul>
<li><a href="#">Item One</li>
<li><a href="#">Item One</li>
</ul>
</nav>
And some CSS for the sideswipe-menu:
.sideswipe-menu{
position: fixed;
top: 0;
left: -270px;
bottom: 0;
width: 270px;
background-color: #efefef;
z-index: 9999;
overflow-y: auto;
}
Credits
SideSwipe is maintained by Piccirilli Dorsey