├── .gitignore ├── bower.json ├── dev ├── dev.html ├── scripts.js ├── slidebars.css ├── slidebars.js └── style.css ├── dist ├── slidebars.css ├── slidebars.js ├── slidebars.min.css └── slidebars.min.js ├── license.txt ├── package.json └── readme.md /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "slidebars", 3 | "version": "2.0.2", 4 | "dependencies": { 5 | "jquery": ">=1.8" 6 | }, 7 | "main": [ 8 | "dist/2.0/slidebars.min.js", 9 | "dist/2.0/slidebars.min.css" 10 | ] 11 | } -------------------------------------------------------------------------------- /dev/dev.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Slidebars Dev Page 6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 |

Slidebars Dev Page

14 | 15 |

You'd need to open the console to view the results of some of these tests.

16 | 17 |

Left Slidebar Controls

18 | 19 |

20 | 21 | 22 | 23 |

24 | 25 |

Right Slidebar Controls

26 | 27 |

28 | 29 | 30 | 31 |

32 | 33 |

Top Slidebar Controls

34 | 35 |

36 | 37 | 38 | 39 |

40 | 41 |

Bottom Slidebar Controls

42 | 43 |

44 | 45 | 46 | 47 |

48 | 49 |

Other Controls

50 | 51 |

52 | 53 |

54 | 55 |

Initialization, Exit and CSS Reset

56 | 57 |

58 | 59 | 60 | 61 |

62 | 63 |

Is and Get

64 | 65 |

66 | 67 | 68 | 69 | 70 | 71 |

72 | 73 |

Callbacks

74 | 75 |

76 | 77 | 78 | 79 | 80 | 81 | 82 |

83 |
84 | 85 |
86 |

Slidebar with id 'slidebar-1' on the left side and reveal style.

87 |
88 | 89 |
90 |

Slidebar with id 'slidebar-2' on the right side and shift style.

91 |
92 | 93 |
94 |

Slidebar with id 'slidebar-3' on the top and push style.

95 |
96 | 97 |
98 |

Slidebar with id 'slidebar-4' on the bottom and overlay style.

99 |
100 | 101 | 102 | 103 | 104 | 105 | -------------------------------------------------------------------------------- /dev/scripts.js: -------------------------------------------------------------------------------- 1 | ( function ( $ ) { 2 | // Create a new instance of Slidebars 3 | var controller = new slidebars(); 4 | 5 | // Events 6 | $( controller.events ).on( 'init', function () { 7 | console.log( 'Init event' ); 8 | } ); 9 | 10 | $( controller.events ).on( 'exit', function () { 11 | console.log( 'Exit event' ); 12 | } ); 13 | 14 | $( controller.events ).on( 'css', function () { 15 | console.log( 'CSS event' ); 16 | } ); 17 | 18 | $( controller.events ).on( 'opening', function ( event, id ) { 19 | console.log( 'Opening event of slidebar with id ' + id ); 20 | } ); 21 | 22 | $( controller.events ).on( 'opened', function ( event, id ) { 23 | console.log( 'Opened event of slidebar with id ' + id ); 24 | } ); 25 | 26 | $( controller.events ).on( 'closing', function ( event, id ) { 27 | console.log( 'Closing event of slidebar with id ' + id ); 28 | } ); 29 | 30 | $( controller.events ).on( 'closed', function ( event, id ) { 31 | console.log( 'Closed event of slidebar with id ' + id ); 32 | } ); 33 | 34 | // Initialize Slidebars 35 | controller.init(); 36 | 37 | // Left Slidebar controls 38 | $( '.js-open-left-slidebar' ).on( 'click', function ( event ) { 39 | event.stopPropagation(); 40 | controller.open( 'slidebar-1' ); 41 | } ); 42 | 43 | $( '.js-close-left-slidebar' ).on( 'click', function ( event ) { 44 | event.stopPropagation(); 45 | controller.close( 'slidebar-1' ); 46 | } ); 47 | 48 | $( '.js-toggle-left-slidebar' ).on( 'click', function ( event ) { 49 | event.stopPropagation(); 50 | controller.toggle( 'slidebar-1' ); 51 | } ); 52 | 53 | // Right Slidebar controls 54 | $( '.js-open-right-slidebar' ).on( 'click', function ( event ) { 55 | event.stopPropagation(); 56 | controller.open( 'slidebar-2' ); 57 | } ); 58 | 59 | $( '.js-close-right-slidebar' ).on( 'click', function ( event ) { 60 | event.stopPropagation(); 61 | controller.close( 'slidebar-2' ); 62 | } ); 63 | 64 | $( '.js-toggle-right-slidebar' ).on( 'click', function ( event ) { 65 | event.stopPropagation(); 66 | controller.toggle( 'slidebar-2' ); 67 | } ); 68 | 69 | // Top Slidebar controls 70 | $( '.js-open-top-slidebar' ).on( 'click', function ( event ) { 71 | event.stopPropagation(); 72 | controller.open( 'slidebar-3' ); 73 | } ); 74 | 75 | $( '.js-close-top-slidebar' ).on( 'click', function ( event ) { 76 | event.stopPropagation(); 77 | controller.close( 'slidebar-3' ); 78 | } ); 79 | 80 | $( '.js-toggle-top-slidebar' ).on( 'click', function ( event ) { 81 | event.stopPropagation(); 82 | controller.toggle( 'slidebar-3' ); 83 | } ); 84 | 85 | // Bottom Slidebar controls 86 | $( '.js-open-bottom-slidebar' ).on( 'click', function ( event ) { 87 | event.stopPropagation(); 88 | controller.open( 'slidebar-4' ); 89 | } ); 90 | 91 | $( '.js-close-bottom-slidebar' ).on( 'click', function ( event ) { 92 | event.stopPropagation(); 93 | controller.close( 'slidebar-4' ); 94 | } ); 95 | 96 | $( '.js-toggle-bottom-slidebar' ).on( 'click', function ( event ) { 97 | event.stopPropagation(); 98 | controller.toggle( 'slidebar-4' ); 99 | } ); 100 | 101 | // Close any 102 | $( controller.events ).on( 'opened', function () { 103 | $( '[canvas="container"]' ).addClass( 'js-close-any-slidebar' ); 104 | } ); 105 | 106 | $( controller.events ).on( 'closed', function () { 107 | $( '[canvas="container"]' ).removeClass( 'js-close-any-slidebar' ); 108 | } ); 109 | 110 | $( 'body' ).on( 'click', '.js-close-any-slidebar', function ( event ) { 111 | event.stopPropagation(); 112 | controller.close(); 113 | } ); 114 | 115 | // Initilize, exit and css reset 116 | $( '.js-initialize-slidebars' ).on( 'click', function ( event ) { 117 | event.stopPropagation(); 118 | controller.init(); 119 | } ); 120 | 121 | $( '.js-exit-slidebars' ).on( 'click', function ( event ) { 122 | event.stopPropagation(); 123 | controller.exit(); 124 | } ); 125 | 126 | $( '.js-reset-slidebars-css' ).on( 'click', function ( event ) { 127 | event.stopPropagation(); 128 | controller.css(); 129 | } ); 130 | 131 | // Is and get 132 | $( '.js-is-active' ).on( 'click', function ( event ) { 133 | event.stopPropagation(); 134 | console.log( controller.isActive() ); 135 | } ); 136 | 137 | $( '.js-is-active-slidebar' ).on( 'click', function ( event ) { 138 | event.stopPropagation(); 139 | var id = prompt( 'Enter a Slidebar id' ); 140 | console.log( controller.isActiveSlidebar( id ) ); 141 | } ); 142 | 143 | $( '.js-get-active-slidebar' ).on( 'click', function ( event ) { 144 | event.stopPropagation(); 145 | console.log( controller.getActiveSlidebar() ); 146 | } ); 147 | 148 | $( '.js-get-all-slidebars' ).on( 'click', function ( event ) { 149 | event.stopPropagation(); 150 | console.log( controller.getSlidebars() ); 151 | 152 | } ); 153 | 154 | $( '.js-get-slidebar' ).on( 'click', function ( event ) { 155 | event.stopPropagation(); 156 | var id = prompt( 'Enter a Slidebar id' ); 157 | console.log( controller.getSlidebar( id ) ); 158 | } ); 159 | 160 | // Callbacks 161 | $( '.js-init-callback' ).on( 'click', function ( event ) { 162 | event.stopPropagation(); 163 | controller.init( function () { 164 | console.log( 'Init callback' ); 165 | } ); 166 | } ); 167 | 168 | $( '.js-exit-callback' ).on( 'click', function ( event ) { 169 | event.stopPropagation(); 170 | controller.exit( function () { 171 | console.log( 'Exit callback' ); 172 | } ); 173 | } ); 174 | 175 | $( '.js-css-callback' ).on( 'click', function ( event ) { 176 | event.stopPropagation(); 177 | controller.css( function () { 178 | console.log( 'CSS callback' ); 179 | } ); 180 | } ); 181 | 182 | $( '.js-open-callback' ).on( 'click', function ( event ) { 183 | event.stopPropagation(); 184 | controller.open( 'slidebar-1', function () { 185 | console.log( 'Open callback' ); 186 | } ); 187 | } ); 188 | 189 | $( '.js-close-callback' ).on( 'click', function ( event ) { 190 | event.stopPropagation(); 191 | controller.close( function () { 192 | console.log( 'Close callback' ); 193 | } ); 194 | } ); 195 | 196 | $( '.js-toggle-callback' ).on( 'click', function ( event ) { 197 | event.stopPropagation(); 198 | controller.toggle( 'slidebar-1', function () { 199 | console.log( 'Toggle callback' ); 200 | } ); 201 | } ); 202 | } ) ( jQuery ); -------------------------------------------------------------------------------- /dev/slidebars.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * Slidebars - A jQuery Framework for Off-Canvas Menus and Sidebars 3 | * Version: 2 Development 4 | * Url: http://www.adchsm.com/slidebars/ 5 | * Author: Adam Charles Smith 6 | * Author url: http://www.adchsm.com/ 7 | * License: MIT 8 | * License url: http://www.adchsm.com/slidebars/license/ 9 | */ 10 | 11 | /** 12 | * Box Model, Html & Body 13 | */ 14 | 15 | html, body, [canvas=container], [off-canvas] { 16 | margin: 0; 17 | padding: 0; 18 | -webkit-box-sizing: border-box; 19 | -moz-box-sizing: border-box; 20 | box-sizing: border-box; 21 | } 22 | 23 | html, body { 24 | width: 100%; 25 | height: 100%; 26 | overflow: hidden; 27 | } 28 | 29 | /** 30 | * Canvas 31 | */ 32 | 33 | [canvas] { 34 | z-index: 1; 35 | } 36 | 37 | [canvas=container] { 38 | width: 100%; 39 | height: 100%; 40 | overflow-y: auto; 41 | position: relative; 42 | background-color: white; /* Basic background color, overwrite this in your own css. */ 43 | -webkit-overflow-scrolling: touch; /* Enables momentum scrolling on iOS devices, may be removed by setting to 'auto' in your own CSS. */ 44 | } 45 | 46 | [canvas=container]:before, [canvas=container]:after { 47 | clear: both; 48 | content: ''; 49 | display: table; 50 | } 51 | 52 | /** 53 | * Off-Canavs 54 | */ 55 | 56 | [off-canvas] { 57 | display: none; 58 | position: fixed; 59 | overflow: hidden; 60 | overflow-y: auto; 61 | background-color: black; /* Basic background color, overwrite this in your own css. */ 62 | color: white; /* Basic colors, overwrite this in your own css. */ 63 | -webkit-overflow-scrolling: touch; /* Enables momentum scrolling on iOS devices, may be removed by setting to 'auto' in your own CSS. */ 64 | } 65 | 66 | [off-canvas*=top] { 67 | width: 100%; 68 | height: 255px; 69 | top: 0; 70 | } 71 | 72 | [off-canvas*=right] { 73 | width: 255px; 74 | height: 100%; 75 | top: 0; 76 | right: 0; 77 | } 78 | 79 | [off-canvas*=bottom] { 80 | width: 100%; 81 | height: 255px; 82 | bottom: 0; 83 | } 84 | 85 | [off-canvas*=left] { 86 | width: 255px; 87 | height: 100%; 88 | top: 0; 89 | left: 0; 90 | } 91 | 92 | [off-canvas*=reveal] { 93 | z-index: 0; 94 | } 95 | 96 | [off-canvas*=push] { 97 | z-index: 1; 98 | } 99 | 100 | [off-canvas*=overlay] { 101 | z-index: 9999; 102 | } 103 | 104 | [off-canvas*=shift] { 105 | z-index: 0; 106 | } 107 | 108 | /** 109 | * Animation 110 | */ 111 | 112 | [canvas], [off-canvas] { 113 | -webkit-transform: translate( 0px, 0px ); 114 | -ms-transform: translate( 0px, 0px ); 115 | transform: translate( 0px, 0px ); 116 | -webkit-transition: -webkit-transform 300ms; 117 | transition: transform 300ms; 118 | -webkit-backface-visibility: hidden; /* Prevents flickering, may be removed if experiencing problems with fixed background images in Chrome. */ 119 | } 120 | 121 | [off-canvas*=shift][off-canvas*=top] { 122 | -webkit-transform: translate( 0px, 50% ); 123 | transform: translate( 0px, 50% ); 124 | } 125 | 126 | [off-canvas*=shift][off-canvas*=right] { 127 | -webkit-transform: translate( -50%, 0px ); 128 | transform: translate( -50%, 0px ); 129 | } 130 | 131 | [off-canvas*=shift][off-canvas*=bottom] { 132 | -webkit-transform: translate( 0px, -50% ); 133 | transform: translate( 0px, -50% ); 134 | } 135 | 136 | [off-canvas*=shift][off-canvas*=left] { 137 | -webkit-transform: translate( 50%, 0px ); 138 | transform: translate( 50%, 0px ); 139 | } 140 | 141 | /** 142 | * Print 143 | */ 144 | 145 | @media print { 146 | [canvas] { 147 | -webkit-transform: translate( 0px, 0px ) !important; 148 | -ms-transform: translate( 0px, 0px ) !important; 149 | transform: translate( 0px, 0px ) !important; 150 | } 151 | 152 | [off-canvas] { 153 | display: none !important; 154 | } 155 | } -------------------------------------------------------------------------------- /dev/slidebars.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * Slidebars - A jQuery Framework for Off-Canvas Menus and Sidebars 3 | * Version: 2 Development 4 | * Url: http://www.adchsm.com/slidebars/ 5 | * Author: Adam Charles Smith 6 | * Author url: http://www.adchsm.com/ 7 | * License: MIT 8 | * License url: http://www.adchsm.com/slidebars/license/ 9 | */ 10 | 11 | var slidebars = function () { 12 | 13 | /** 14 | * Setup 15 | */ 16 | 17 | // Cache all canvas elements 18 | var canvas = $( '[canvas]' ), 19 | 20 | // Object of Slidebars 21 | offCanvas = {}, 22 | 23 | // Variables, permitted sides and styles 24 | init = false, 25 | registered = false, 26 | sides = [ 'top', 'right', 'bottom', 'left' ], 27 | styles = [ 'reveal', 'push', 'overlay', 'shift' ], 28 | 29 | /** 30 | * Get Animation Properties 31 | */ 32 | 33 | getAnimationProperties = function ( id ) { 34 | // Variables 35 | var elements = $(), 36 | amount = '0px, 0px', 37 | duration = parseFloat( offCanvas[ id ].element.css( 'transitionDuration' ), 10 ) * 1000; 38 | 39 | // Elements to animate 40 | if ( offCanvas[ id ].style === 'reveal' || offCanvas[ id ].style === 'push' || offCanvas[ id ].style === 'shift' ) { 41 | elements = elements.add( canvas ); 42 | } 43 | 44 | if ( offCanvas[ id ].style === 'push' || offCanvas[ id ].style === 'overlay' || offCanvas[ id ].style === 'shift' ) { 45 | elements = elements.add( offCanvas[ id ].element ); 46 | } 47 | 48 | // Amount to animate 49 | if ( offCanvas[ id ].active ) { 50 | if ( offCanvas[ id ].side === 'top' ) { 51 | amount = '0px, ' + offCanvas[ id ].element.css( 'height' ); 52 | } else if ( offCanvas[ id ].side === 'right' ) { 53 | amount = '-' + offCanvas[ id ].element.css( 'width' ) + ', 0px'; 54 | } else if ( offCanvas[ id ].side === 'bottom' ) { 55 | amount = '0px, -' + offCanvas[ id ].element.css( 'height' ); 56 | } else if ( offCanvas[ id ].side === 'left' ) { 57 | amount = offCanvas[ id ].element.css( 'width' ) + ', 0px'; 58 | } 59 | } 60 | 61 | // Return animation properties 62 | return { 'elements': elements, 'amount': amount, 'duration': duration }; 63 | }, 64 | 65 | /** 66 | * Slidebars Registration 67 | */ 68 | 69 | registerSlidebar = function ( id, side, style, element ) { 70 | // Check if Slidebar is registered 71 | if ( isRegisteredSlidebar( id ) ) { 72 | throw "Error registering Slidebar, a Slidebar with id '" + id + "' already exists."; 73 | } 74 | 75 | // Register the Slidebar 76 | offCanvas[ id ] = { 77 | 'id': id, 78 | 'side': side, 79 | 'style': style, 80 | 'element': element, 81 | 'active': false 82 | }; 83 | }, 84 | 85 | isRegisteredSlidebar = function ( id ) { 86 | // Return if Slidebar is registered 87 | if ( offCanvas.hasOwnProperty( id ) ) { 88 | return true; 89 | } else { 90 | return false; 91 | } 92 | }; 93 | 94 | /** 95 | * Initialization 96 | */ 97 | 98 | this.init = function ( callback ) { 99 | // Check if Slidebars has been initialized 100 | if ( init ) { 101 | throw "Slidebars has already been initialized."; 102 | } 103 | 104 | // Loop through and register Slidebars 105 | if ( ! registered ) { 106 | $( '[off-canvas]' ).each( function () { 107 | // Get Slidebar parameters 108 | var parameters = $( this ).attr( 'off-canvas' ).split( ' ', 3 ); 109 | 110 | // Make sure a valid id, side and style are specified 111 | if ( ! parameters || ! parameters[ 0 ] || sides.indexOf( parameters[ 1 ] ) === -1 || styles.indexOf( parameters[ 2 ] ) === -1 ) { 112 | throw "Error registering Slidebar, please specifiy a valid id, side and style'."; 113 | } 114 | 115 | // Register Slidebar 116 | registerSlidebar( parameters[ 0 ], parameters[ 1 ], parameters[ 2 ], $( this ) ); 117 | } ); 118 | 119 | // Set registered variable 120 | registered = true; 121 | } 122 | 123 | // Set initialized variable 124 | init = true; 125 | 126 | // Set CSS 127 | this.css(); 128 | 129 | // Trigger event 130 | $( events ).trigger( 'init' ); 131 | 132 | // Run callback 133 | if ( typeof callback === 'function' ) { 134 | callback(); 135 | } 136 | }; 137 | 138 | this.exit = function ( callback ) { 139 | // Check if Slidebars has been initialized 140 | if ( ! init ) { 141 | throw "Slidebars hasn't been initialized."; 142 | } 143 | 144 | // Exit 145 | var exit = function () { 146 | // Set init variable 147 | init = false; 148 | 149 | // Trigger event 150 | $( events ).trigger( 'exit' ); 151 | 152 | // Run callback 153 | if ( typeof callback === 'function' ) { 154 | callback(); 155 | } 156 | }; 157 | 158 | // Call exit, close open Slidebar if active 159 | if ( this.getActiveSlidebar() ) { 160 | this.close( exit ); 161 | } else { 162 | exit(); 163 | } 164 | }; 165 | 166 | /** 167 | * CSS 168 | */ 169 | 170 | this.css = function ( callback ) { 171 | // Check if Slidebars has been initialized 172 | if ( ! init ) { 173 | throw "Slidebars hasn't been initialized."; 174 | } 175 | 176 | // Loop through Slidebars to set negative margins 177 | for ( var id in offCanvas ) { 178 | // Check if Slidebar is registered 179 | if ( isRegisteredSlidebar( id ) ) { 180 | // Calculate offset 181 | var offset; 182 | 183 | if ( offCanvas[ id ].side === 'top' || offCanvas[ id ].side === 'bottom' ) { 184 | offset = offCanvas[ id ].element.css( 'height' ); 185 | } else { 186 | offset = offCanvas[ id ].element.css( 'width' ); 187 | } 188 | 189 | // Apply negative margins 190 | if ( offCanvas[ id ].style === 'push' || offCanvas[ id ].style === 'overlay' || offCanvas[ id ].style === 'shift' ) { 191 | offCanvas[ id ].element.css( 'margin-' + offCanvas[ id ].side, '-' + offset ); 192 | } 193 | } 194 | } 195 | 196 | // Reposition open Slidebars 197 | if ( this.getActiveSlidebar() ) { 198 | this.open( this.getActiveSlidebar() ); 199 | } 200 | 201 | // Trigger event 202 | $( events ).trigger( 'css' ); 203 | 204 | // Run callback 205 | if ( typeof callback === 'function' ) { 206 | callback(); 207 | } 208 | }; 209 | 210 | /** 211 | * Controls 212 | */ 213 | 214 | this.open = function ( id, callback ) { 215 | // Check if Slidebars has been initialized 216 | if ( ! init ) { 217 | throw "Slidebars hasn't been initialized."; 218 | } 219 | 220 | // Check if id wasn't passed 221 | if ( ! id ) { 222 | throw "You must pass a Slidebar id."; 223 | } 224 | 225 | // Check if Slidebar is registered 226 | if ( ! isRegisteredSlidebar( id ) ) { 227 | throw "Error opening Slidebar, there is no Slidebar with id '" + id + "'."; 228 | } 229 | 230 | // Open 231 | var open = function () { 232 | // Set active state to true 233 | offCanvas[ id ].active = true; 234 | 235 | // Display the Slidebar 236 | offCanvas[ id ].element.css( 'display', 'block' ); 237 | 238 | // Trigger event 239 | $( events ).trigger( 'opening', [ offCanvas[ id ].id ] ); 240 | 241 | // Get animation properties 242 | var animationProperties = getAnimationProperties( id ); 243 | 244 | // Apply css 245 | animationProperties.elements.css( { 246 | 'transition-duration': animationProperties.duration + 'ms', 247 | 'transform': 'translate(' + animationProperties.amount + ')' 248 | } ); 249 | 250 | // Transition completed 251 | setTimeout( function () { 252 | // Trigger event 253 | $( events ).trigger( 'opened', [ offCanvas[ id ].id ] ); 254 | 255 | // Run callback 256 | if ( typeof callback === 'function' ) { 257 | callback(); 258 | } 259 | }, animationProperties.duration ); 260 | }; 261 | 262 | // Call open, close open Slidebar if active 263 | if ( this.getActiveSlidebar() && this.getActiveSlidebar() !== id ) { 264 | this.close( open ); 265 | } else { 266 | open(); 267 | } 268 | }; 269 | 270 | this.close = function ( id, callback ) { 271 | // Shift callback arguments 272 | if ( typeof id === 'function' ) { 273 | callback = id; 274 | id = null; 275 | } 276 | 277 | // Check if Slidebars has been initialized 278 | if ( ! init ) { 279 | throw "Slidebars hasn't been initialized."; 280 | } 281 | 282 | // Check if id was passed but isn't a registered Slidebar 283 | if ( id && ! isRegisteredSlidebar( id ) ) { 284 | throw "Error closing Slidebar, there is no Slidebar with id '" + id + "'."; 285 | } 286 | 287 | // If no id was passed, get the active Slidebar 288 | if ( ! id ) { 289 | id = this.getActiveSlidebar(); 290 | } 291 | 292 | // Close a Slidebar 293 | if ( id && offCanvas[ id ].active ) { 294 | // Set active state to false 295 | offCanvas[ id ].active = false; 296 | 297 | // Trigger event 298 | $( events ).trigger( 'closing', [ offCanvas[ id ].id ] ); 299 | 300 | // Get animation properties 301 | var animationProperties = getAnimationProperties( id ); 302 | 303 | // Apply css 304 | animationProperties.elements.css( 'transform', '' ); 305 | 306 | // Transition completetion 307 | setTimeout( function () { 308 | // Remove transition duration 309 | animationProperties.elements.css( 'transition-duration', '' ); 310 | 311 | // Hide the Slidebar 312 | offCanvas[ id ].element.css( 'display', '' ); 313 | 314 | // Trigger event 315 | $( events ).trigger( 'closed', [ offCanvas[ id ].id ] ); 316 | 317 | // Run callback 318 | if ( typeof callback === 'function' ) { 319 | callback(); 320 | } 321 | }, animationProperties.duration ); 322 | } 323 | }; 324 | 325 | this.toggle = function ( id, callback ) { 326 | // Check if Slidebars has been initialized 327 | if ( ! init ) { 328 | throw "Slidebars hasn't been initialized."; 329 | } 330 | 331 | // Check if id wasn't passed 332 | if ( ! id ) { 333 | throw "You must pass a Slidebar id."; 334 | } 335 | 336 | // Check if Slidebar is registered 337 | if ( ! isRegisteredSlidebar( id ) ) { 338 | throw "Error toggling Slidebar, there is no Slidebar with id '" + id + "'."; 339 | } 340 | 341 | // Check Slidebar state 342 | if ( offCanvas[ id ].active ) { 343 | // It's open, close it 344 | this.close( id, function () { 345 | // Run callback 346 | if ( typeof callback === 'function' ) { 347 | callback(); 348 | } 349 | } ); 350 | } else { 351 | // It's closed, open it 352 | this.open( id, function () { 353 | // Run callback 354 | if ( typeof callback === 'function' ) { 355 | callback(); 356 | } 357 | } ); 358 | } 359 | }; 360 | 361 | /** 362 | * Active States 363 | */ 364 | 365 | this.isActive = function () { 366 | // Return init state 367 | return init; 368 | }; 369 | 370 | this.isActiveSlidebar = function ( id ) { 371 | // Check if Slidebars has been initialized 372 | if ( ! init ) { 373 | throw "Slidebars hasn't been initialized."; 374 | } 375 | 376 | // Check if id wasn't passed 377 | if ( ! id ) { 378 | throw "You must provide a Slidebar id."; 379 | } 380 | 381 | // Check if Slidebar is registered 382 | if ( ! isRegisteredSlidebar( id ) ) { 383 | throw "Error retrieving Slidebar, there is no Slidebar with id '" + id + "'."; 384 | } 385 | 386 | // Return the active state 387 | return offCanvas[ id ].active; 388 | }; 389 | 390 | this.getActiveSlidebar = function () { 391 | // Check if Slidebars has been initialized 392 | if ( ! init ) { 393 | throw "Slidebars hasn't been initialized."; 394 | } 395 | 396 | // Variable to return 397 | var active = false; 398 | 399 | // Loop through Slidebars 400 | for ( var id in offCanvas ) { 401 | // Check if Slidebar is registered 402 | if ( isRegisteredSlidebar( id ) ) { 403 | // Check if it's active 404 | if ( offCanvas[ id ].active ) { 405 | // Set the active id 406 | active = offCanvas[ id ].id; 407 | break; 408 | } 409 | } 410 | } 411 | 412 | // Return 413 | return active; 414 | }; 415 | 416 | this.getSlidebars = function () { 417 | // Check if Slidebars has been initialized 418 | if ( ! init ) { 419 | throw "Slidebars hasn't been initialized."; 420 | } 421 | 422 | // Create an array for the Slidebars 423 | var slidebarsArray = []; 424 | 425 | // Loop through Slidebars 426 | for ( var id in offCanvas ) { 427 | // Check if Slidebar is registered 428 | if ( isRegisteredSlidebar( id ) ) { 429 | // Add Slidebar id to array 430 | slidebarsArray.push( offCanvas[ id ].id ); 431 | } 432 | } 433 | 434 | // Return 435 | return slidebarsArray; 436 | }; 437 | 438 | this.getSlidebar = function ( id ) { 439 | // Check if Slidebars has been initialized 440 | if ( ! init ) { 441 | throw "Slidebars hasn't been initialized."; 442 | } 443 | 444 | // Check if id wasn't passed 445 | if ( ! id ) { 446 | throw "You must pass a Slidebar id."; 447 | } 448 | 449 | // Check if Slidebar is registered 450 | if ( ! isRegisteredSlidebar( id ) ) { 451 | throw "Error retrieving Slidebar, there is no Slidebar with id '" + id + "'."; 452 | } 453 | 454 | // Return the Slidebar's properties 455 | return offCanvas[ id ]; 456 | }; 457 | 458 | /** 459 | * Events 460 | */ 461 | 462 | this.events = {}; 463 | var events = this.events; 464 | 465 | /** 466 | * Resizes 467 | */ 468 | 469 | $( window ).on( 'resize', this.css.bind( this ) ); 470 | }; -------------------------------------------------------------------------------- /dev/style.css: -------------------------------------------------------------------------------- 1 | [canvas=container], 2 | [off-canvas] { 3 | padding: 10px 20px; 4 | } 5 | 6 | [class*=js-] { 7 | cursor: pointer; 8 | } -------------------------------------------------------------------------------- /dist/slidebars.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * Slidebars - A jQuery Framework for Off-Canvas Menus and Sidebars 3 | * Version: 2.0.2 4 | * Url: http://www.adchsm.com/slidebars/ 5 | * Author: Adam Charles Smith 6 | * Author url: http://www.adchsm.com/ 7 | * License: MIT 8 | * License url: http://www.adchsm.com/slidebars/license/ 9 | */ 10 | 11 | /** 12 | * Box Model, Html & Body 13 | */ 14 | 15 | html, body, [canvas=container], [off-canvas] { 16 | margin: 0; 17 | padding: 0; 18 | -webkit-box-sizing: border-box; 19 | -moz-box-sizing: border-box; 20 | box-sizing: border-box; 21 | } 22 | 23 | html, body { 24 | width: 100%; 25 | height: 100%; 26 | overflow: hidden; 27 | } 28 | 29 | /** 30 | * Canvas 31 | */ 32 | 33 | [canvas] { 34 | z-index: 1; 35 | } 36 | 37 | [canvas=container] { 38 | width: 100%; 39 | height: 100%; 40 | overflow-y: auto; 41 | position: relative; 42 | background-color: white; /* Basic background color, overwrite this in your own css. */ 43 | -webkit-overflow-scrolling: touch; /* Enables momentum scrolling on iOS devices, may be removed by setting to 'auto' in your own CSS. */ 44 | } 45 | 46 | [canvas=container]:before, [canvas=container]:after { 47 | clear: both; 48 | content: ''; 49 | display: table; 50 | } 51 | 52 | /** 53 | * Off-Canavs 54 | */ 55 | 56 | [off-canvas] { 57 | display: none; 58 | position: fixed; 59 | overflow: hidden; 60 | overflow-y: auto; 61 | background-color: black; /* Basic background color, overwrite this in your own css. */ 62 | color: white; /* Basic colors, overwrite this in your own css. */ 63 | -webkit-overflow-scrolling: touch; /* Enables momentum scrolling on iOS devices, may be removed by setting to 'auto' in your own CSS. */ 64 | } 65 | 66 | [off-canvas*=top] { 67 | width: 100%; 68 | height: 255px; 69 | top: 0; 70 | } 71 | 72 | [off-canvas*=right] { 73 | width: 255px; 74 | height: 100%; 75 | top: 0; 76 | right: 0; 77 | } 78 | 79 | [off-canvas*=bottom] { 80 | width: 100%; 81 | height: 255px; 82 | bottom: 0; 83 | } 84 | 85 | [off-canvas*=left] { 86 | width: 255px; 87 | height: 100%; 88 | top: 0; 89 | left: 0; 90 | } 91 | 92 | [off-canvas*=reveal] { 93 | z-index: 0; 94 | } 95 | 96 | [off-canvas*=push] { 97 | z-index: 1; 98 | } 99 | 100 | [off-canvas*=overlay] { 101 | z-index: 9999; 102 | } 103 | 104 | [off-canvas*=shift] { 105 | z-index: 0; 106 | } 107 | 108 | /** 109 | * Animation 110 | */ 111 | 112 | [canvas], [off-canvas] { 113 | -webkit-transform: translate( 0px, 0px ); 114 | -ms-transform: translate( 0px, 0px ); 115 | transform: translate( 0px, 0px ); 116 | -webkit-transition: -webkit-transform 300ms; 117 | transition: transform 300ms; 118 | -webkit-backface-visibility: hidden; /* Prevents flickering, may be removed if experiencing problems with fixed background images in Chrome. */ 119 | } 120 | 121 | [off-canvas*=shift][off-canvas*=top] { 122 | -webkit-transform: translate( 0px, 50% ); 123 | transform: translate( 0px, 50% ); 124 | } 125 | 126 | [off-canvas*=shift][off-canvas*=right] { 127 | -webkit-transform: translate( -50%, 0px ); 128 | transform: translate( -50%, 0px ); 129 | } 130 | 131 | [off-canvas*=shift][off-canvas*=bottom] { 132 | -webkit-transform: translate( 0px, -50% ); 133 | transform: translate( 0px, -50% ); 134 | } 135 | 136 | [off-canvas*=shift][off-canvas*=left] { 137 | -webkit-transform: translate( 50%, 0px ); 138 | transform: translate( 50%, 0px ); 139 | } 140 | 141 | /** 142 | * Print 143 | */ 144 | 145 | @media print { 146 | [canvas] { 147 | -webkit-transform: translate( 0px, 0px ) !important; 148 | -ms-transform: translate( 0px, 0px ) !important; 149 | transform: translate( 0px, 0px ) !important; 150 | } 151 | 152 | [off-canvas] { 153 | display: none !important; 154 | } 155 | } -------------------------------------------------------------------------------- /dist/slidebars.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * Slidebars - A jQuery Framework for Off-Canvas Menus and Sidebars 3 | * Version: 2.0.2 4 | * Url: http://www.adchsm.com/slidebars/ 5 | * Author: Adam Charles Smith 6 | * Author url: http://www.adchsm.com/ 7 | * License: MIT 8 | * License url: http://www.adchsm.com/slidebars/license/ 9 | */ 10 | 11 | var slidebars = function () { 12 | 13 | /** 14 | * Setup 15 | */ 16 | 17 | // Cache all canvas elements 18 | var canvas = $( '[canvas]' ), 19 | 20 | // Object of Slidebars 21 | offCanvas = {}, 22 | 23 | // Variables, permitted sides and styles 24 | init = false, 25 | registered = false, 26 | sides = [ 'top', 'right', 'bottom', 'left' ], 27 | styles = [ 'reveal', 'push', 'overlay', 'shift' ], 28 | 29 | /** 30 | * Get Animation Properties 31 | */ 32 | 33 | getAnimationProperties = function ( id ) { 34 | // Variables 35 | var elements = $(), 36 | amount = '0px, 0px', 37 | duration = parseFloat( offCanvas[ id ].element.css( 'transitionDuration' ), 10 ) * 1000; 38 | 39 | // Elements to animate 40 | if ( offCanvas[ id ].style === 'reveal' || offCanvas[ id ].style === 'push' || offCanvas[ id ].style === 'shift' ) { 41 | elements = elements.add( canvas ); 42 | } 43 | 44 | if ( offCanvas[ id ].style === 'push' || offCanvas[ id ].style === 'overlay' || offCanvas[ id ].style === 'shift' ) { 45 | elements = elements.add( offCanvas[ id ].element ); 46 | } 47 | 48 | // Amount to animate 49 | if ( offCanvas[ id ].active ) { 50 | if ( offCanvas[ id ].side === 'top' ) { 51 | amount = '0px, ' + offCanvas[ id ].element.css( 'height' ); 52 | } else if ( offCanvas[ id ].side === 'right' ) { 53 | amount = '-' + offCanvas[ id ].element.css( 'width' ) + ', 0px'; 54 | } else if ( offCanvas[ id ].side === 'bottom' ) { 55 | amount = '0px, -' + offCanvas[ id ].element.css( 'height' ); 56 | } else if ( offCanvas[ id ].side === 'left' ) { 57 | amount = offCanvas[ id ].element.css( 'width' ) + ', 0px'; 58 | } 59 | } 60 | 61 | // Return animation properties 62 | return { 'elements': elements, 'amount': amount, 'duration': duration }; 63 | }, 64 | 65 | /** 66 | * Slidebars Registration 67 | */ 68 | 69 | registerSlidebar = function ( id, side, style, element ) { 70 | // Check if Slidebar is registered 71 | if ( isRegisteredSlidebar( id ) ) { 72 | throw "Error registering Slidebar, a Slidebar with id '" + id + "' already exists."; 73 | } 74 | 75 | // Register the Slidebar 76 | offCanvas[ id ] = { 77 | 'id': id, 78 | 'side': side, 79 | 'style': style, 80 | 'element': element, 81 | 'active': false 82 | }; 83 | }, 84 | 85 | isRegisteredSlidebar = function ( id ) { 86 | // Return if Slidebar is registered 87 | if ( offCanvas.hasOwnProperty( id ) ) { 88 | return true; 89 | } else { 90 | return false; 91 | } 92 | }; 93 | 94 | /** 95 | * Initialization 96 | */ 97 | 98 | this.init = function ( callback ) { 99 | // Check if Slidebars has been initialized 100 | if ( init ) { 101 | throw "Slidebars has already been initialized."; 102 | } 103 | 104 | // Loop through and register Slidebars 105 | if ( ! registered ) { 106 | $( '[off-canvas]' ).each( function () { 107 | // Get Slidebar parameters 108 | var parameters = $( this ).attr( 'off-canvas' ).split( ' ', 3 ); 109 | 110 | // Make sure a valid id, side and style are specified 111 | if ( ! parameters || ! parameters[ 0 ] || sides.indexOf( parameters[ 1 ] ) === -1 || styles.indexOf( parameters[ 2 ] ) === -1 ) { 112 | throw "Error registering Slidebar, please specifiy a valid id, side and style'."; 113 | } 114 | 115 | // Register Slidebar 116 | registerSlidebar( parameters[ 0 ], parameters[ 1 ], parameters[ 2 ], $( this ) ); 117 | } ); 118 | 119 | // Set registered variable 120 | registered = true; 121 | } 122 | 123 | // Set initialized variable 124 | init = true; 125 | 126 | // Set CSS 127 | this.css(); 128 | 129 | // Trigger event 130 | $( events ).trigger( 'init' ); 131 | 132 | // Run callback 133 | if ( typeof callback === 'function' ) { 134 | callback(); 135 | } 136 | }; 137 | 138 | this.exit = function ( callback ) { 139 | // Check if Slidebars has been initialized 140 | if ( ! init ) { 141 | throw "Slidebars hasn't been initialized."; 142 | } 143 | 144 | // Exit 145 | var exit = function () { 146 | // Set init variable 147 | init = false; 148 | 149 | // Trigger event 150 | $( events ).trigger( 'exit' ); 151 | 152 | // Run callback 153 | if ( typeof callback === 'function' ) { 154 | callback(); 155 | } 156 | }; 157 | 158 | // Call exit, close open Slidebar if active 159 | if ( this.getActiveSlidebar() ) { 160 | this.close( exit ); 161 | } else { 162 | exit(); 163 | } 164 | }; 165 | 166 | /** 167 | * CSS 168 | */ 169 | 170 | this.css = function ( callback ) { 171 | // Check if Slidebars has been initialized 172 | if ( ! init ) { 173 | throw "Slidebars hasn't been initialized."; 174 | } 175 | 176 | // Loop through Slidebars to set negative margins 177 | for ( var id in offCanvas ) { 178 | // Check if Slidebar is registered 179 | if ( isRegisteredSlidebar( id ) ) { 180 | // Calculate offset 181 | var offset; 182 | 183 | if ( offCanvas[ id ].side === 'top' || offCanvas[ id ].side === 'bottom' ) { 184 | offset = offCanvas[ id ].element.css( 'height' ); 185 | } else { 186 | offset = offCanvas[ id ].element.css( 'width' ); 187 | } 188 | 189 | // Apply negative margins 190 | if ( offCanvas[ id ].style === 'push' || offCanvas[ id ].style === 'overlay' || offCanvas[ id ].style === 'shift' ) { 191 | offCanvas[ id ].element.css( 'margin-' + offCanvas[ id ].side, '-' + offset ); 192 | } 193 | } 194 | } 195 | 196 | // Reposition open Slidebars 197 | if ( this.getActiveSlidebar() ) { 198 | this.open( this.getActiveSlidebar() ); 199 | } 200 | 201 | // Trigger event 202 | $( events ).trigger( 'css' ); 203 | 204 | // Run callback 205 | if ( typeof callback === 'function' ) { 206 | callback(); 207 | } 208 | }; 209 | 210 | /** 211 | * Controls 212 | */ 213 | 214 | this.open = function ( id, callback ) { 215 | // Check if Slidebars has been initialized 216 | if ( ! init ) { 217 | throw "Slidebars hasn't been initialized."; 218 | } 219 | 220 | // Check if id wasn't passed or if Slidebar isn't registered 221 | if ( ! id || ! isRegisteredSlidebar( id ) ) { 222 | throw "Error opening Slidebar, there is no Slidebar with id '" + id + "'."; 223 | } 224 | 225 | // Open 226 | var open = function () { 227 | // Set active state to true 228 | offCanvas[ id ].active = true; 229 | 230 | // Display the Slidebar 231 | offCanvas[ id ].element.css( 'display', 'block' ); 232 | 233 | // Trigger event 234 | $( events ).trigger( 'opening', [ offCanvas[ id ].id ] ); 235 | 236 | // Get animation properties 237 | var animationProperties = getAnimationProperties( id ); 238 | 239 | // Apply css 240 | animationProperties.elements.css( { 241 | 'transition-duration': animationProperties.duration + 'ms', 242 | 'transform': 'translate(' + animationProperties.amount + ')' 243 | } ); 244 | 245 | // Transition completed 246 | setTimeout( function () { 247 | // Trigger event 248 | $( events ).trigger( 'opened', [ offCanvas[ id ].id ] ); 249 | 250 | // Run callback 251 | if ( typeof callback === 'function' ) { 252 | callback(); 253 | } 254 | }, animationProperties.duration ); 255 | }; 256 | 257 | // Call open, close open Slidebar if active 258 | if ( this.getActiveSlidebar() && this.getActiveSlidebar() !== id ) { 259 | this.close( open ); 260 | } else { 261 | open(); 262 | } 263 | }; 264 | 265 | this.close = function ( id, callback ) { 266 | // Shift callback arguments 267 | if ( typeof id === 'function' ) { 268 | callback = id; 269 | id = null; 270 | } 271 | 272 | // Check if Slidebars has been initialized 273 | if ( ! init ) { 274 | throw "Slidebars hasn't been initialized."; 275 | } 276 | 277 | // Check if id was passed but isn't a registered Slidebar 278 | if ( id && ! isRegisteredSlidebar( id ) ) { 279 | throw "Error closing Slidebar, there is no Slidebar with id '" + id + "'."; 280 | } 281 | 282 | // If no id was passed, get the active Slidebar 283 | if ( ! id ) { 284 | id = this.getActiveSlidebar(); 285 | } 286 | 287 | // Close a Slidebar 288 | if ( id && offCanvas[ id ].active ) { 289 | // Set active state to false 290 | offCanvas[ id ].active = false; 291 | 292 | // Trigger event 293 | $( events ).trigger( 'closing', [ offCanvas[ id ].id ] ); 294 | 295 | // Get animation properties 296 | var animationProperties = getAnimationProperties( id ); 297 | 298 | // Apply css 299 | animationProperties.elements.css( 'transform', '' ); 300 | 301 | // Transition completetion 302 | setTimeout( function () { 303 | // Remove transition duration 304 | animationProperties.elements.css( 'transition-duration', '' ); 305 | 306 | // Hide the Slidebar 307 | offCanvas[ id ].element.css( 'display', '' ); 308 | 309 | // Trigger event 310 | $( events ).trigger( 'closed', [ offCanvas[ id ].id ] ); 311 | 312 | // Run callback 313 | if ( typeof callback === 'function' ) { 314 | callback(); 315 | } 316 | }, animationProperties.duration ); 317 | } 318 | }; 319 | 320 | this.toggle = function ( id, callback ) { 321 | // Check if Slidebars has been initialized 322 | if ( ! init ) { 323 | throw "Slidebars hasn't been initialized."; 324 | } 325 | 326 | // Check if id wasn't passed or if Slidebar isn't registered 327 | if ( ! id || ! isRegisteredSlidebar( id ) ) { 328 | throw "Error toggling Slidebar, there is no Slidebar with id '" + id + "'."; 329 | } 330 | 331 | // Check Slidebar state 332 | if ( offCanvas[ id ].active ) { 333 | // It's open, close it 334 | this.close( id, function () { 335 | // Run callback 336 | if ( typeof callback === 'function' ) { 337 | callback(); 338 | } 339 | } ); 340 | } else { 341 | // It's closed, open it 342 | this.open( id, function () { 343 | // Run callback 344 | if ( typeof callback === 'function' ) { 345 | callback(); 346 | } 347 | } ); 348 | } 349 | }; 350 | 351 | /** 352 | * Active States 353 | */ 354 | 355 | this.isActive = function ( id ) { 356 | // Return init state 357 | return init; 358 | }; 359 | 360 | this.isActiveSlidebar = function ( id ) { 361 | // Check if Slidebars has been initialized 362 | if ( ! init ) { 363 | throw "Slidebars hasn't been initialized."; 364 | } 365 | 366 | // Check if id wasn't passed 367 | if ( ! id ) { 368 | throw "You must provide a Slidebar id."; 369 | } 370 | 371 | // Check if Slidebar is registered 372 | if ( ! isRegisteredSlidebar( id ) ) { 373 | throw "Error retrieving Slidebar, there is no Slidebar with id '" + id + "'."; 374 | } 375 | 376 | // Return the active state 377 | return offCanvas[ id ].active; 378 | }; 379 | 380 | this.getActiveSlidebar = function () { 381 | // Check if Slidebars has been initialized 382 | if ( ! init ) { 383 | throw "Slidebars hasn't been initialized."; 384 | } 385 | 386 | // Variable to return 387 | var active = false; 388 | 389 | // Loop through Slidebars 390 | for ( var id in offCanvas ) { 391 | // Check if Slidebar is registered 392 | if ( isRegisteredSlidebar( id ) ) { 393 | // Check if it's active 394 | if ( offCanvas[ id ].active ) { 395 | // Set the active id 396 | active = offCanvas[ id ].id; 397 | break; 398 | } 399 | } 400 | } 401 | 402 | // Return 403 | return active; 404 | }; 405 | 406 | this.getSlidebars = function () { 407 | // Check if Slidebars has been initialized 408 | if ( ! init ) { 409 | throw "Slidebars hasn't been initialized."; 410 | } 411 | 412 | // Create an array for the Slidebars 413 | var slidebarsArray = []; 414 | 415 | // Loop through Slidebars 416 | for ( var id in offCanvas ) { 417 | // Check if Slidebar is registered 418 | if ( isRegisteredSlidebar( id ) ) { 419 | // Add Slidebar id to array 420 | slidebarsArray.push( offCanvas[ id ].id ); 421 | } 422 | } 423 | 424 | // Return 425 | return slidebarsArray; 426 | }; 427 | 428 | this.getSlidebar = function ( id ) { 429 | // Check if Slidebars has been initialized 430 | if ( ! init ) { 431 | throw "Slidebars hasn't been initialized."; 432 | } 433 | 434 | // Check if id wasn't passed 435 | if ( ! id ) { 436 | throw "You must pass a Slidebar id."; 437 | } 438 | 439 | // Check if Slidebar is registered 440 | if ( ! id || ! isRegisteredSlidebar( id ) ) { 441 | throw "Error retrieving Slidebar, there is no Slidebar with id '" + id + "'."; 442 | } 443 | 444 | // Return the Slidebar's properties 445 | return offCanvas[ id ]; 446 | }; 447 | 448 | /** 449 | * Events 450 | */ 451 | 452 | this.events = {}; 453 | var events = this.events; 454 | 455 | /** 456 | * Resizes 457 | */ 458 | 459 | $( window ).on( 'resize', this.css.bind( this ) ); 460 | }; -------------------------------------------------------------------------------- /dist/slidebars.min.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * Slidebars - A jQuery Framework for Off-Canvas Menus and Sidebars 3 | * Version: 2.0.2 4 | * Url: http://www.adchsm.com/slidebars/ 5 | * Author: Adam Charles Smith 6 | * Author url: http://www.adchsm.com/ 7 | * License: MIT 8 | * License url: http://www.adchsm.com/slidebars/license/ 9 | */ 10 | 11 | [canvas],[off-canvas*=push]{z-index:1}[off-canvas*=reveal],[off-canvas*=shift]{z-index:0}[canvas=container],[off-canvas],body,html{margin:0;padding:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}body,html{width:100%;height:100%;overflow:hidden}[canvas=container]{width:100%;height:100%;overflow-y:auto;position:relative;background-color:#fff;-webkit-overflow-scrolling:touch}[canvas=container]:after,[canvas=container]:before{clear:both;content:'';display:table}[off-canvas]{display:none;position:fixed;overflow:hidden;overflow-y:auto;background-color:#000;color:#fff;-webkit-overflow-scrolling:touch}[off-canvas*=top]{width:100%;height:255px;top:0}[off-canvas*=right]{width:255px;height:100%;top:0;right:0}[off-canvas*=bottom]{width:100%;height:255px;bottom:0}[off-canvas*=left]{width:255px;height:100%;top:0;left:0}[off-canvas*=overlay]{z-index:9999}[canvas],[off-canvas]{-webkit-transform:translate(0,0);-ms-transform:translate(0,0);transform:translate(0,0);-webkit-transition:-webkit-transform .3s;transition:transform .3s;-webkit-backface-visibility:hidden}[off-canvas*=shift][off-canvas*=top]{-webkit-transform:translate(0,50%);transform:translate(0,50%)}[off-canvas*=shift][off-canvas*=right]{-webkit-transform:translate(-50%,0);transform:translate(-50%,0)}[off-canvas*=shift][off-canvas*=bottom]{-webkit-transform:translate(0,-50%);transform:translate(0,-50%)}[off-canvas*=shift][off-canvas*=left]{-webkit-transform:translate(50%,0);transform:translate(50%,0)}@media print{[canvas]{-webkit-transform:translate(0,0)!important;-ms-transform:translate(0,0)!important;transform:translate(0,0)!important}[off-canvas]{display:none!important}} -------------------------------------------------------------------------------- /dist/slidebars.min.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * Slidebars - A jQuery Framework for Off-Canvas Menus and Sidebars 3 | * Version: 2.0.2 4 | * Url: http://www.adchsm.com/slidebars/ 5 | * Author: Adam Charles Smith 6 | * Author url: http://www.adchsm.com/ 7 | * License: MIT 8 | * License url: http://www.adchsm.com/slidebars/license/ 9 | */ 10 | 11 | var slidebars=function(){var t=$("[canvas]"),e={},i=!1,n=!1,s=["top","right","bottom","left"],r=["reveal","push","overlay","shift"],o=function(i){var n=$(),s="0px, 0px",r=1e3*parseFloat(e[i].element.css("transitionDuration"),10);return("reveal"===e[i].style||"push"===e[i].style||"shift"===e[i].style)&&(n=n.add(t)),("push"===e[i].style||"overlay"===e[i].style||"shift"===e[i].style)&&(n=n.add(e[i].element)),e[i].active&&("top"===e[i].side?s="0px, "+e[i].element.css("height"):"right"===e[i].side?s="-"+e[i].element.css("width")+", 0px":"bottom"===e[i].side?s="0px, -"+e[i].element.css("height"):"left"===e[i].side&&(s=e[i].element.css("width")+", 0px")),{elements:n,amount:s,duration:r}},c=function(t,i,n,s){return a(t)?!1:void(e[t]={id:t,side:i,style:n,element:s,active:!1})},a=function(t){return e.hasOwnProperty(t)?!0:!1};this.init=function(t){return i?!1:(n||($("[off-canvas]").each(function(){var t=$(this).attr("off-canvas").split(" ",3);return t&&t[0]&&-1!==s.indexOf(t[1])&&-1!==r.indexOf(t[2])?void c(t[0],t[1],t[2],$(this)):!1}),n=!0),i=!0,this.css(),$(f).trigger("init"),void("function"==typeof t&&t()))},this.exit=function(t){if(!i)return!1;var e=function(){i=!1,$(f).trigger("exit"),"function"==typeof t&&t()};this.getActiveSlidebar()?this.close(e):e()},this.css=function(t){if(!i)return!1;for(var n in e)if(a(n)){var s;s="top"===e[n].side||"bottom"===e[n].side?e[n].element.css("height"):e[n].element.css("width"),("push"===e[n].style||"overlay"===e[n].style||"shift"===e[n].style)&&e[n].element.css("margin-"+e[n].side,"-"+s)}this.getActiveSlidebar()&&this.open(this.getActiveSlidebar()),$(f).trigger("css"),"function"==typeof t&&t()},this.open=function(t,n){if(!i)return!1;if(!t||!a(t))return!1;var s=function(){e[t].active=!0,e[t].element.css("display","block"),$(f).trigger("opening",[e[t].id]);var i=o(t);i.elements.css({"transition-duration":i.duration+"ms",transform:"translate("+i.amount+")"}),setTimeout(function(){$(f).trigger("opened",[e[t].id]),"function"==typeof n&&n()},i.duration)};this.getActiveSlidebar()&&this.getActiveSlidebar()!==t?this.close(s):s()},this.close=function(t,n){if("function"==typeof t&&(n=t,t=null),!i)return!1;if(t&&!a(t))return!1;if(t||(t=this.getActiveSlidebar()),t&&e[t].active){e[t].active=!1,$(f).trigger("closing",[e[t].id]);var s=o(t);s.elements.css("transform",""),setTimeout(function(){s.elements.css("transition-duration",""),e[t].element.css("display",""),$(f).trigger("closed",[e[t].id]),"function"==typeof n&&n()},s.duration)}},this.toggle=function(t,n){return i&&t&&a(t)?void(e[t].active?this.close(t,function(){"function"==typeof n&&n()}):this.open(t,function(){"function"==typeof n&&n()})):!1},this.isActive=function(){return i},this.isActiveSlidebar=function(t){return i&&t&&a(t)?e[t].active:!1},this.getActiveSlidebar=function(){if(!i)return!1;var t=!1;for(var n in e)if(a(n)&&e[n].active){t=e[n].id;break}return t},this.getSlidebars=function(){if(!i)return!1;var t=[];for(var n in e)a(n)&&t.push(e[n].id);return t},this.getSlidebar=function(t){return i&&t&&t&&a(t)?e[t]:!1},this.events={};var f=this.events;$(window).on("resize",this.css.bind(this))}; -------------------------------------------------------------------------------- /license.txt: -------------------------------------------------------------------------------- 1 | Copyright (c) 2014 - 2016 Adam Charles Smith 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 4 | 5 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 6 | 7 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "slidebars", 3 | "version": "2.0.2", 4 | "dependencies": { 5 | "jquery": ">=1.8" 6 | }, 7 | "main": "dist/slidebars.min.js", 8 | "style": "dist/slidebars.min.css" 9 | } -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | # Slidebars 2 | 3 | Slidebars is a jQuery Framework for Off-Canvas Menus and Sidebars into your website or web app. 4 | 5 | Version 2.0 is a complete rewrite which features clean and discreet markup, permits an unlimited number of off-canvas instances on any side and is equipped with a full API, callbacks and events for ultimate control. 6 | 7 | It is not compatible with previous versions, so check out the [Slidebars website](http://www.adchsm.com/slidebars/) for information on getting started, usage documentation and compatibility tables. 8 | 9 | Previous versions of Slidebars are no longer supported. 10 | 11 | ## How to Contribute to Slidebars Using GitHub 12 | 13 | ### Raising Issues 14 | 15 | If you're having problems with Slidebars, please read through the usage documentation first. Make sure your running the latest version of Slidebars and jQuery 1.8 or higher. 16 | 17 | There are a few common issues and fixes which can be found on the [Slidebars website](http://www.adchsm.com/slidebars/help/issues/). Please check there and the closed issues list to see if your problem has previously been answered. 18 | 19 | If the issue is being caused by your own markup, styling, scripts or a conflicting plugin, I won't be able to help. But if you've found an issue, that's great, I'd like to hear as I'm always looking to improve Slidebars. 20 | 21 | Please provide as much information about the bug as possible. Include a url which demonstrates the issue, or if you don't want to public reveal your url, create a [JSFiddle](http://jsfiddle.net/). 22 | 23 | ### Pull Requests 24 | 25 | Pull request are welcome, please make sure your modifications are to the development version of Slidebars and they are well tested! 26 | --------------------------------------------------------------------------------