This time I will share jQuery Plugin and tutorial about Generic Off-canvas Overlay Panel Plugin For jQuery – onoffcanvas, hope it will help you in programming stack.
onoffcanvas is a lightweight, Bootstrap-compatible jQuery offcanvas plugin used to create animated off-canvas panels overlaying the whole page or only part of a specific container. Perfect for off-canvas site navigation and animated image caption overlay.
Installation:
2 |
$ npm install onoffcanvas |
5 |
$ bower install onoffcanvas |
How to use it:
1. Put the following JavaScript and CSS files into your webpage.
1 |
< script src = "jquery.min.js" ></ script > |
2 |
< link rel = "stylesheet" href = "dist/onoffcanvas.css" > |
3 |
< script src = "dist/onoffcanvas.js" ></ script > |
2. Create the offcanvas panels for the whole page.
01 |
< div class = "canvas is-fixed is-top" id = "cft" > |
03 |
< button class = "btn btn-danger" name = "button" data-toggle = "canvas" data-target = "#cft" >CLOSE</ button > |
06 |
< div class = "canvas is-fixed is-right" id = "cfr" > |
08 |
< button class = "btn btn-danger" name = "button" data-toggle = "canvas" data-target = "#cfr" >CLOSE</ button > |
11 |
< div class = "canvas is-fixed is-bottom" id = "cfb" > |
12 |
< h1 >Bottom Canvas</ h1 > |
13 |
< button class = "btn btn-danger" name = "button" data-toggle = "canvas" data-target = "#cfb" >CLOSE</ button > |
16 |
< div class = "canvas is-fixed is-left" id = "cfl" > |
18 |
< button class = "btn btn-danger" name = "button" data-toggle = "canvas" data-target = "#cfl" >CLOSE</ button > |
21 |
< div class = "canvas is-fixed" id = "cff" > |
23 |
< button class = "btn btn-danger" name = "button" data-toggle = "canvas" data-target = "#cff" >CLOSE</ button > |
3. Create a offcanvas panels for your container.
1 |
< div class = "onoffcanvas-container" > |
3 |
< div class = "onoffcanvas is-top p-2 bg-info" id = "cat" > |
4 |
< button type = "button" class = "btn btn-danger" data-toggle = "onoffcanvas" data-target = "#cat" > |
Change log:
2017-03-17
2017-03-13
This awesome jQuery plugin is developed by onokumus. For more Advanced Usages, please check the demo page or visit the official website.