sidey is a jQuery plugin which allows you to quickly and easily add an offcanvas sidebar or menu to any page. sidey only requires small adjustments to your HTML markup and a two very small Javascript and CSS files (700 bytes and 2KB). sidey plays nice with Bootstrap and other frameworks.
The Javascript and CSS can be downloaded here
Include the Javascript and CSS files in your <head> tag. Note: the links below are for the development CDN.
<link rel="stylesheet" href="https://rawgit.com/mrvautin/sidey/master/dist/sidey.min.css">
<script type="text/javascript" src="https://rawgit.com/mrvautin/sidey/master/dist/sidey.min.js"></script>
Setup the instance of sidey. This sets up all sidey-left and sidebar-right elements into sidey sidebars and adds listeners on the toggles. (see index.html for an example).
<script>
$(document).ready(function(){
$.sidey();
});
</script>
Create the toggle for the sidebar / menu. Be sure to include the data-element with the unique sidebar element you want to toggle and add the sidey-toggle class.
**Note: The data-element will use CSS selectors - eg: . for class and # for element ID.
<a href="#" class="btn btn-primary sidey-toggle" data-element=".sidebarLeft"><i class="fa fa-bars" aria-hidden="true"></i></a>
Create your sidebar / menu (can have multiple) with either the sidey-left or sidey-right class to tell sidey the direction. Be sure to have your sidebar element outside
of your main content element. We want the content to be pushed out the way for the sidebar to appear. See index.html for a working example.
<div class="sidebarLeft sidey-left">
<h1>Left menu</h1>
<ul class="list-group">
<li class="list-group-item"><a href="#">Cras justo odio</a></li>
<li class="list-group-item"><a href="#">Dapibus ac facilisis in</a></li>
<li class="list-group-item"><a href="#">Morbi leo risus</a></li>
<li class="list-group-item"><a href="#">Porta ac consectetur ac</a></li>
<li class="list-group-item"><a href="#">Vestibulum at eros</a></li>
</ul>
</div>
Add the sidey-content class to your content which you want to push to allow sidey menu to be visible
<body class="sidey-content">
or
<div class="container-fluid sidey-content">
sidey is meant to be simple and there is deliberately not many options.
The only option is whether to blur/darken the background when the sidey menu is open. By default this is true/on.
To remove simply setup sidey with the backgroundBlur option set to false:
$.sidey({backgroundBlur: false});
FAQs
Quickly and easily add an offcanvas sidebar to any page
We found that sidey demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Axios compromise traced to social engineering, showing how attacks on maintainers can bypass controls and expose the broader software supply chain.
Security News
Node.js has paused its bug bounty program after funding ended, removing payouts for vulnerability reports but keeping its security process unchanged.
Security News
The Axios compromise shows how time-dependent dependency resolution makes exposure harder to detect and contain.