Sidy.js
Sidy.js is an off-, on- canvas navigation panels using CSS transforms & transitions. This project was inspired by the SidebarTransitions project seen on SidebarTransitions
- 3.3KB minified and Gzipped -An open-source project by Reactive Design Studio
Features
- Uses CSS3 transforms & transitions
- Smooth performance on mobile devices
- Custom settings for panels: position, size, effect
- an API for custom open and close panel control
- Panel closes when the site overlay is selected
Requirements
Installation
Please use which ever is most comfortable:
- Download ZIP
git clone github.com/reactivestudio/Sidy.js.gitbower install sidy.js
Once you’ve got dist/sidy.js and dist/sidy.css into your project’s JavaScript and CSS directories, let’s instantiate it!
<!DOCTYPE html>
<html>
<head>
<link rel='stylesheet' type='text/css' href='css/sidy.css'/>
</head>
<body>
<div class="sidy">
<div class="sidy__content">
<!-- All your stuff up here... -->
</div>
</div>
<script src='/js/sidy.js'></script>
</body>
</html>Basic Usage
How does it work? Just add <nav id='your-panel-id'></nav> above the div.sidy__content and add .sidy--to-open, .sidy--to-close classes to an opening and closing elements. Also you need to add .sidy__panel class and data-panel='your-panel-id' to openning element. That's all.
<body>
<div class="sidy">
<nav class='sidy__panel' id='your-panel-id'>
<!-- All your panel stuff up here... -->
</nav>
<div class="sidy__content">
<!-- All your content/viewport stuff up here... -->
<button data-panel="your-panel-id" class="sidy--to-open">Open me</button>
</div>
</div>
<script src='/js/sidy.js'></script>
</body>Panel Settings
You can use custom settings for panels
- Position: left, top, right
- Size: px, %, 'auto'
- Effects: slide_overlay, reveal, push, slide_along, slide_reverse, scale_down, scale_up
<nav data-position="left" data-size='300px' data-fx="slide_overlay" class='sidy__panel' id='foo'> Foo </nav>
<nav data-position="top" data-size='30%' data-fx="push" class='sidy__panel' id='bar'> Bar </nav>
<nav data-position="right" data-size='auto' data-fx="reveal" class='sidy__panel' id='baz'> Baz </nav>