├── .gitignore ├── bower.json ├── changelog.md ├── customize.html ├── dist ├── css │ ├── bootstrap-drawer.css │ └── bootstrap-drawer.min.css └── js │ ├── drawer.js │ └── drawer.min.js ├── docs ├── _footer.htm ├── _header.htm ├── customize.md ├── html │ ├── customize.html │ ├── index.html │ ├── javascript.html │ └── less.html ├── index.md ├── javascript.md └── less.md ├── example ├── bootstrap-drawer.css ├── bootstrap.drawer.css ├── bootstrap.min.css ├── bootstrap.min.js ├── docs.js ├── drawer-docs.css ├── drawer.js ├── github.css ├── highlight.pack.js └── index.html ├── gulpfile.js ├── index.html ├── javascript.html ├── js └── drawer.js ├── less.html ├── less ├── bootstrap-drawer.less ├── drawer-docs.less ├── drawer-variables.less ├── drawer.less └── mixins │ ├── drawer-framework.less │ └── fold.less ├── package.json └── readme.md /.gitignore: -------------------------------------------------------------------------------- 1 | bower_components 2 | node_modules 3 | *.sublime-project 4 | *.sublime-workspace 5 | npm-debug.log -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "bootstrap-drawer", 3 | "version": "1.0.6", 4 | "authors": [ 5 | "Caroline Amaba " 6 | ], 7 | "description": "A Bootstrap 3 add-on to create drawer (off-canvas) styled navigation", 8 | "moduleType": [ 9 | "globals" 10 | ], 11 | "main": [ 12 | "dist/css/*", 13 | "dist/js/*" 14 | ], 15 | "repository": { 16 | "type": "git", 17 | "url": "https://github.com/clineamb/bootstrap-drawer.git" 18 | }, 19 | "keywords": [ 20 | "bootstrap3", 21 | "bootstrap-3", 22 | "bootstrap", 23 | "offcanvas", 24 | "off-canvas", 25 | "off", 26 | "canvas", 27 | "navigation", 28 | "navs", 29 | "nav", 30 | "drawer", 31 | "menu", 32 | "html", 33 | "css", 34 | "less", 35 | "javascript", 36 | "js", 37 | "jquery" 38 | ], 39 | "license": "ISC", 40 | "ignore": [ 41 | "**/.*", 42 | "node_modules", 43 | "bower_components", 44 | "test", 45 | "tests" 46 | ], 47 | "dependencies": { 48 | "jquery": "2.x", 49 | "bootstrap": "3.x" 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /changelog.md: -------------------------------------------------------------------------------- 1 | # bootstrap-drawer 2 | 3 | A [Bootstrap](http://getbootstrap.com) add-on to create drawer (off-canvas) styled navigation. 4 | 5 | ---------- 6 | 7 | # Changelog 8 | 9 | #### v 1.0.5 10 | * Fix docs (fromn [PR#10](https://github.com/clineamb/bootstrap-drawer/issues/11)) 11 | * Update website to match docs. 12 | * Update `package.json` 13 | * Rebuild assets & example after upgrading `package.json` 14 | 15 | #### v 1.0.4 16 | * Fix docs. 17 | * Update `package.json`, `bower.json` 18 | 19 | 20 | #### v 1.0.3 21 | * Fixed to be backwards compatible with Bootstrap 3.0.0 - somwhere after 3.0.0, the name of the transition.end event changed 22 | 23 | 24 | #### v 1.0.2 25 | * Updated some typos in the docs [detailed documentation](http://clineamb.github.io/bootstrap-drawer). 26 | * Upgraded the Bootstrap version used to 3.3.4. No known breaks. 27 | 28 | 29 | #### v 1.0.0 30 | * Finished the [detailed documentation](http://clineamb.github.io/bootstrap-drawer). 31 | * Moved the "Using LESS / Build Your Own..." section to the full documentation from the readme. 32 | * Updated `example/index.html` to have an inside-drawer. 33 | 34 | 35 | #### v 0.9.1 36 | * Added `.has-inner-drawer` class to allow elements with a set width/height to 37 | have a drawer within it. 38 | * Added in `example/index.html` how to use the `.has-inner-drawer` feature. 39 | -------------------------------------------------------------------------------- /customize.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | bootstrap-drawer documentation 10 | 11 | 12 | 13 | 14 | 15 | 25 | 26 | 27 |
28 |
29 | 30 |
31 |
32 |
33 |

bootstrap-drawer

34 |
35 |
36 |   37 | 38 |
39 |
40 |

Basics

41 |
42 | 48 |
49 |

Other Links

50 |
51 | 57 |
58 | © 2015 Caroline Amaba 59 |
60 |
61 |
62 |
63 |
64 |
65 |

bootstrap-drawer

66 |

bootstrap-drawer is a Bootstrap add-on that gives you an off-canvas/drawer element to your page or container! Check it out by clicking the toggle in the top-left corner!

67 |
68 |
69 |
70 |

Drawer Customization

71 |

bootstrap-drawer comes with some built-in classes to customize some basics about your drawer. These utility classes are modeled after Bootstrap's Navbar components.

72 |
73 |

Position

74 |

Sometimes you might want the drawer to the right. You can do this quickly by adding .drawer-right to the .drawer container.

75 | 
<div id="drawerExample2" class="drawer drawer-right ...">
 76 |     ...
 77 | </div>
 78 |
79 |
80 |
81 |
82 | Menu 83 |
84 |
85 |
86 | right menu example 87 |
88 | 93 |
94 |
95 |
96 |

You can position the drawer to the right by adding the .drawer-right class. This also works on full-page drawers.

97 |
98 |
99 | 100 |
101 |

Inverse Color

102 |

Like the Bootstrap navbar, there is an inverse color option to the drawer. Just add .drawer-inverse to your .drawer container.

103 | 
<div id="drawerExample2" class="drawer drawer-inverse ...">
104 |     ...
105 | </div>
106 |
107 |
108 |
109 |
110 | Menu 111 |
112 |
113 |
114 | inverse menu example 115 |
116 | 121 |
122 |
123 |
124 |

You can inverse the drawer color (like navbar) by adding .drawer-inverse class.

125 |
126 |
129 |
130 | 131 | 132 | 133 | 134 | 135 | 136 | -------------------------------------------------------------------------------- /dist/css/bootstrap-drawer.css: -------------------------------------------------------------------------------- 1 | /* ======================================================================== 2 | * bootstrap-drawer: 1.0.6 3 | * ======================================================================== 4 | */ 5 | html { 6 | min-height: 100%; 7 | height: 100%; 8 | } 9 | body.has-drawer { 10 | min-height: 100%; 11 | height: 100%; 12 | } 13 | .has-inner-drawer { 14 | position: relative; 15 | overflow: hidden; 16 | } 17 | .drawer { 18 | display: block; 19 | background-color: #f8f8f8; 20 | color: #333333; 21 | border-right: 1px solid #dfdfdf; 22 | min-height: 1px; 23 | height: 100%; 24 | top: 0; 25 | left: 0; 26 | position: fixed; 27 | z-index: 1035; 28 | -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05); 29 | box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05); 30 | } 31 | .drawer-contents, 32 | .drawer-heading, 33 | .drawer-body, 34 | .drawer-nav, 35 | .drawer-footer, 36 | .drawer ul, 37 | .drawer li { 38 | display: inherit; 39 | margin: 0; 40 | width: 100%; 41 | position: relative; 42 | } 43 | .drawer-right { 44 | left: auto; 45 | right: 0; 46 | border-right: none; 47 | border-left: 1px solid #dfdfdf; 48 | -webkit-box-shadow: 0 -1px 1px rgba(0, 0, 0, 0.05); 49 | box-shadow: 0 -1px 1px rgba(0, 0, 0, 0.05); 50 | } 51 | .drawer-inverse { 52 | background-color: #333; 53 | color: #eeeeee; 54 | border-right: 1px solid #1a1a1a; 55 | } 56 | .drawer-inverse.drawer-right { 57 | border-right: 1px solid #dfdfdf; 58 | } 59 | .drawer-inside { 60 | position: absolute; 61 | } 62 | .drawer-controls { 63 | float: right; 64 | margin-right: -16.66666667%; 65 | padding: 10px; 66 | height: 100%; 67 | position: relative; 68 | width: 16.66666667%; 69 | z-index: 500; 70 | } 71 | .drawer-contents { 72 | background-color: #f8f8f8; 73 | height: 100%; 74 | width: 100%; 75 | overflow: auto; 76 | } 77 | .drawer-right .drawer-controls { 78 | float: left; 79 | margin-left: -16.66666667%; 80 | margin-right: 0; 81 | } 82 | .drawer-heading { 83 | border-bottom: 1px solid #dfdfdf; 84 | padding: 10px 15px; 85 | color: inherit; 86 | } 87 | .drawer-title { 88 | margin-top: 0; 89 | margin-bottom: 0; 90 | } 91 | .drawer-inner-toggle { 92 | position: absolute; 93 | top: 10px; 94 | right: 10px; 95 | } 96 | .drawer-body, 97 | .drawer-nav { 98 | padding: 10px 15px; 99 | } 100 | .drawer-nav, 101 | .drawer-fullnav { 102 | padding: 10px 15px; 103 | margin-bottom: 0; 104 | list-style: none; 105 | } 106 | .drawer-nav li, 107 | .drawer-fullnav li { 108 | position: relative; 109 | margin-bottom: 5px; 110 | } 111 | .drawer-nav li a, 112 | .drawer-fullnav li a { 113 | color: #777; 114 | border-radius: 4px; 115 | position: relative; 116 | display: block; 117 | padding: 10px 15px; 118 | } 119 | .drawer-nav li.active a, 120 | .drawer-fullnav li.active a, 121 | .drawer-nav li a:hover, 122 | .drawer-fullnav li a:hover, 123 | .drawer-nav li a:focus, 124 | .drawer-fullnav li a:focus { 125 | color: #515151; 126 | text-decoration: none; 127 | background-color: #ffffff; 128 | } 129 | .drawer-fullnav { 130 | color: #fff; 131 | padding: 0; 132 | } 133 | .drawer-fullnav li { 134 | margin-bottom: 0; 135 | } 136 | .drawer-fullnav li a { 137 | border-radius: 0; 138 | } 139 | .drawer-inverse .drawer-contents { 140 | background-color: #333; 141 | } 142 | .drawer-inverse .drawer-fullnav li a, 143 | .drawer-inverse .drawer-nav li a { 144 | color: #fff; 145 | padding: 10px 15px; 146 | } 147 | .drawer-inverse .drawer-fullnav li.active a, 148 | .drawer-inverse .drawer-fullnav li a:hover, 149 | .drawer-inverse .drawer-fullnav li a:active, 150 | .drawer-inverse .drawer-nav li.active a, 151 | .drawer-inverse .drawer-nav li a:hover, 152 | .drawer-inverse .drawer-nav li a:active { 153 | color: #eeeeee; 154 | background-color: #1a1a1a; 155 | } 156 | .drawer-footer { 157 | padding: 10px 15px; 158 | } 159 | .drawer-footer.locked { 160 | position: absolute; 161 | bottom: 0; 162 | left: 0; 163 | } 164 | .dw-xs-12 { 165 | width: 100%; 166 | } 167 | .fold.dw-xs-12 { 168 | margin-left: -100%; 169 | } 170 | .drawer-right.fold.dw-xs-12 { 171 | margin-right: -100%; 172 | } 173 | .dw-xs-11 { 174 | width: 91.66666667%; 175 | } 176 | .fold.dw-xs-11 { 177 | margin-left: -91.66666667%; 178 | } 179 | .drawer-right.fold.dw-xs-11 { 180 | margin-right: -91.66666667%; 181 | } 182 | .dw-xs-10 { 183 | width: 83.33333333%; 184 | } 185 | .fold.dw-xs-10 { 186 | margin-left: -83.33333333%; 187 | } 188 | .drawer-right.fold.dw-xs-10 { 189 | margin-right: -83.33333333%; 190 | } 191 | .dw-xs-9 { 192 | width: 75%; 193 | } 194 | .fold.dw-xs-9 { 195 | margin-left: -75%; 196 | } 197 | .drawer-right.fold.dw-xs-9 { 198 | margin-right: -75%; 199 | } 200 | .dw-xs-8 { 201 | width: 66.66666667%; 202 | } 203 | .fold.dw-xs-8 { 204 | margin-left: -66.66666667%; 205 | } 206 | .drawer-right.fold.dw-xs-8 { 207 | margin-right: -66.66666667%; 208 | } 209 | .dw-xs-7 { 210 | width: 58.33333333%; 211 | } 212 | .fold.dw-xs-7 { 213 | margin-left: -58.33333333%; 214 | } 215 | .drawer-right.fold.dw-xs-7 { 216 | margin-right: -58.33333333%; 217 | } 218 | .dw-xs-6 { 219 | width: 50%; 220 | } 221 | .fold.dw-xs-6 { 222 | margin-left: -50%; 223 | } 224 | .drawer-right.fold.dw-xs-6 { 225 | margin-right: -50%; 226 | } 227 | .dw-xs-5 { 228 | width: 41.66666667%; 229 | } 230 | .fold.dw-xs-5 { 231 | margin-left: -41.66666667%; 232 | } 233 | .drawer-right.fold.dw-xs-5 { 234 | margin-right: -41.66666667%; 235 | } 236 | .dw-xs-4 { 237 | width: 33.33333333%; 238 | } 239 | .fold.dw-xs-4 { 240 | margin-left: -33.33333333%; 241 | } 242 | .drawer-right.fold.dw-xs-4 { 243 | margin-right: -33.33333333%; 244 | } 245 | .dw-xs-3 { 246 | width: 25%; 247 | } 248 | .fold.dw-xs-3 { 249 | margin-left: -25%; 250 | } 251 | .drawer-right.fold.dw-xs-3 { 252 | margin-right: -25%; 253 | } 254 | .dw-xs-2 { 255 | width: 16.66666667%; 256 | } 257 | .fold.dw-xs-2 { 258 | margin-left: -16.66666667%; 259 | } 260 | .drawer-right.fold.dw-xs-2 { 261 | margin-right: -16.66666667%; 262 | } 263 | .dw-xs-1 { 264 | width: 8.33333333%; 265 | } 266 | .fold.dw-xs-1 { 267 | margin-left: -8.33333333%; 268 | } 269 | .drawer-right.fold.dw-xs-1 { 270 | margin-right: -8.33333333%; 271 | } 272 | @media (min-width: 768px) { 273 | .dw-sm-12 { 274 | width: 100%; 275 | } 276 | .fold.dw-sm-12 { 277 | margin-left: -100%; 278 | } 279 | .drawer-right.fold.dw-sm-12 { 280 | margin-right: -100%; 281 | } 282 | .dw-sm-11 { 283 | width: 91.66666667%; 284 | } 285 | .fold.dw-sm-11 { 286 | margin-left: -91.66666667%; 287 | } 288 | .drawer-right.fold.dw-sm-11 { 289 | margin-right: -91.66666667%; 290 | } 291 | .dw-sm-10 { 292 | width: 83.33333333%; 293 | } 294 | .fold.dw-sm-10 { 295 | margin-left: -83.33333333%; 296 | } 297 | .drawer-right.fold.dw-sm-10 { 298 | margin-right: -83.33333333%; 299 | } 300 | .dw-sm-9 { 301 | width: 75%; 302 | } 303 | .fold.dw-sm-9 { 304 | margin-left: -75%; 305 | } 306 | .drawer-right.fold.dw-sm-9 { 307 | margin-right: -75%; 308 | } 309 | .dw-sm-8 { 310 | width: 66.66666667%; 311 | } 312 | .fold.dw-sm-8 { 313 | margin-left: -66.66666667%; 314 | } 315 | .drawer-right.fold.dw-sm-8 { 316 | margin-right: -66.66666667%; 317 | } 318 | .dw-sm-7 { 319 | width: 58.33333333%; 320 | } 321 | .fold.dw-sm-7 { 322 | margin-left: -58.33333333%; 323 | } 324 | .drawer-right.fold.dw-sm-7 { 325 | margin-right: -58.33333333%; 326 | } 327 | .dw-sm-6 { 328 | width: 50%; 329 | } 330 | .fold.dw-sm-6 { 331 | margin-left: -50%; 332 | } 333 | .drawer-right.fold.dw-sm-6 { 334 | margin-right: -50%; 335 | } 336 | .dw-sm-5 { 337 | width: 41.66666667%; 338 | } 339 | .fold.dw-sm-5 { 340 | margin-left: -41.66666667%; 341 | } 342 | .drawer-right.fold.dw-sm-5 { 343 | margin-right: -41.66666667%; 344 | } 345 | .dw-sm-4 { 346 | width: 33.33333333%; 347 | } 348 | .fold.dw-sm-4 { 349 | margin-left: -33.33333333%; 350 | } 351 | .drawer-right.fold.dw-sm-4 { 352 | margin-right: -33.33333333%; 353 | } 354 | .dw-sm-3 { 355 | width: 25%; 356 | } 357 | .fold.dw-sm-3 { 358 | margin-left: -25%; 359 | } 360 | .drawer-right.fold.dw-sm-3 { 361 | margin-right: -25%; 362 | } 363 | .dw-sm-2 { 364 | width: 16.66666667%; 365 | } 366 | .fold.dw-sm-2 { 367 | margin-left: -16.66666667%; 368 | } 369 | .drawer-right.fold.dw-sm-2 { 370 | margin-right: -16.66666667%; 371 | } 372 | .dw-sm-1 { 373 | width: 8.33333333%; 374 | } 375 | .fold.dw-sm-1 { 376 | margin-left: -8.33333333%; 377 | } 378 | .drawer-right.fold.dw-sm-1 { 379 | margin-right: -8.33333333%; 380 | } 381 | } 382 | @media (min-width: 992px) { 383 | .dw-md-12 { 384 | width: 100%; 385 | } 386 | .fold.dw-md-12 { 387 | margin-left: -100%; 388 | } 389 | .drawer-right.fold.dw-md-12 { 390 | margin-right: -100%; 391 | } 392 | .dw-md-11 { 393 | width: 91.66666667%; 394 | } 395 | .fold.dw-md-11 { 396 | margin-left: -91.66666667%; 397 | } 398 | .drawer-right.fold.dw-md-11 { 399 | margin-right: -91.66666667%; 400 | } 401 | .dw-md-10 { 402 | width: 83.33333333%; 403 | } 404 | .fold.dw-md-10 { 405 | margin-left: -83.33333333%; 406 | } 407 | .drawer-right.fold.dw-md-10 { 408 | margin-right: -83.33333333%; 409 | } 410 | .dw-md-9 { 411 | width: 75%; 412 | } 413 | .fold.dw-md-9 { 414 | margin-left: -75%; 415 | } 416 | .drawer-right.fold.dw-md-9 { 417 | margin-right: -75%; 418 | } 419 | .dw-md-8 { 420 | width: 66.66666667%; 421 | } 422 | .fold.dw-md-8 { 423 | margin-left: -66.66666667%; 424 | } 425 | .drawer-right.fold.dw-md-8 { 426 | margin-right: -66.66666667%; 427 | } 428 | .dw-md-7 { 429 | width: 58.33333333%; 430 | } 431 | .fold.dw-md-7 { 432 | margin-left: -58.33333333%; 433 | } 434 | .drawer-right.fold.dw-md-7 { 435 | margin-right: -58.33333333%; 436 | } 437 | .dw-md-6 { 438 | width: 50%; 439 | } 440 | .fold.dw-md-6 { 441 | margin-left: -50%; 442 | } 443 | .drawer-right.fold.dw-md-6 { 444 | margin-right: -50%; 445 | } 446 | .dw-md-5 { 447 | width: 41.66666667%; 448 | } 449 | .fold.dw-md-5 { 450 | margin-left: -41.66666667%; 451 | } 452 | .drawer-right.fold.dw-md-5 { 453 | margin-right: -41.66666667%; 454 | } 455 | .dw-md-4 { 456 | width: 33.33333333%; 457 | } 458 | .fold.dw-md-4 { 459 | margin-left: -33.33333333%; 460 | } 461 | .drawer-right.fold.dw-md-4 { 462 | margin-right: -33.33333333%; 463 | } 464 | .dw-md-3 { 465 | width: 25%; 466 | } 467 | .fold.dw-md-3 { 468 | margin-left: -25%; 469 | } 470 | .drawer-right.fold.dw-md-3 { 471 | margin-right: -25%; 472 | } 473 | .dw-md-2 { 474 | width: 16.66666667%; 475 | } 476 | .fold.dw-md-2 { 477 | margin-left: -16.66666667%; 478 | } 479 | .drawer-right.fold.dw-md-2 { 480 | margin-right: -16.66666667%; 481 | } 482 | .dw-md-1 { 483 | width: 8.33333333%; 484 | } 485 | .fold.dw-md-1 { 486 | margin-left: -8.33333333%; 487 | } 488 | .drawer-right.fold.dw-md-1 { 489 | margin-right: -8.33333333%; 490 | } 491 | } 492 | @media (min-width: 1200px) { 493 | .dw-lg-12 { 494 | width: 100%; 495 | } 496 | .fold.dw-lg-12 { 497 | margin-left: -100%; 498 | } 499 | .drawer-right.fold.dw-lg-12 { 500 | margin-right: -100%; 501 | } 502 | .dw-lg-11 { 503 | width: 91.66666667%; 504 | } 505 | .fold.dw-lg-11 { 506 | margin-left: -91.66666667%; 507 | } 508 | .drawer-right.fold.dw-lg-11 { 509 | margin-right: -91.66666667%; 510 | } 511 | .dw-lg-10 { 512 | width: 83.33333333%; 513 | } 514 | .fold.dw-lg-10 { 515 | margin-left: -83.33333333%; 516 | } 517 | .drawer-right.fold.dw-lg-10 { 518 | margin-right: -83.33333333%; 519 | } 520 | .dw-lg-9 { 521 | width: 75%; 522 | } 523 | .fold.dw-lg-9 { 524 | margin-left: -75%; 525 | } 526 | .drawer-right.fold.dw-lg-9 { 527 | margin-right: -75%; 528 | } 529 | .dw-lg-8 { 530 | width: 66.66666667%; 531 | } 532 | .fold.dw-lg-8 { 533 | margin-left: -66.66666667%; 534 | } 535 | .drawer-right.fold.dw-lg-8 { 536 | margin-right: -66.66666667%; 537 | } 538 | .dw-lg-7 { 539 | width: 58.33333333%; 540 | } 541 | .fold.dw-lg-7 { 542 | margin-left: -58.33333333%; 543 | } 544 | .drawer-right.fold.dw-lg-7 { 545 | margin-right: -58.33333333%; 546 | } 547 | .dw-lg-6 { 548 | width: 50%; 549 | } 550 | .fold.dw-lg-6 { 551 | margin-left: -50%; 552 | } 553 | .drawer-right.fold.dw-lg-6 { 554 | margin-right: -50%; 555 | } 556 | .dw-lg-5 { 557 | width: 41.66666667%; 558 | } 559 | .fold.dw-lg-5 { 560 | margin-left: -41.66666667%; 561 | } 562 | .drawer-right.fold.dw-lg-5 { 563 | margin-right: -41.66666667%; 564 | } 565 | .dw-lg-4 { 566 | width: 33.33333333%; 567 | } 568 | .fold.dw-lg-4 { 569 | margin-left: -33.33333333%; 570 | } 571 | .drawer-right.fold.dw-lg-4 { 572 | margin-right: -33.33333333%; 573 | } 574 | .dw-lg-3 { 575 | width: 25%; 576 | } 577 | .fold.dw-lg-3 { 578 | margin-left: -25%; 579 | } 580 | .drawer-right.fold.dw-lg-3 { 581 | margin-right: -25%; 582 | } 583 | .dw-lg-2 { 584 | width: 16.66666667%; 585 | } 586 | .fold.dw-lg-2 { 587 | margin-left: -16.66666667%; 588 | } 589 | .drawer-right.fold.dw-lg-2 { 590 | margin-right: -16.66666667%; 591 | } 592 | .dw-lg-1 { 593 | width: 8.33333333%; 594 | } 595 | .fold.dw-lg-1 { 596 | margin-left: -8.33333333%; 597 | } 598 | .drawer-right.fold.dw-lg-1 { 599 | margin-right: -8.33333333%; 600 | } 601 | } 602 | .fold { 603 | margin-right: 0; 604 | } 605 | .folding { 606 | height: 100%; 607 | -webkit-transition-property: margin-left; 608 | transition-property: margin-left; 609 | -webkit-transition-duration: 0.35s; 610 | transition-duration: 0.35s; 611 | -webkit-transition-timing-function: ease; 612 | transition-timing-function: ease; 613 | } 614 | .drawer-right.fold { 615 | margin-left: 0; 616 | } 617 | .drawer-right.folding { 618 | -webkit-transition-property: margin-right; 619 | transition-property: margin-right; 620 | } 621 | .fold.open, 622 | .drawer-right.fold.open { 623 | margin-left: 0; 624 | margin-right: 0; 625 | } 626 | -------------------------------------------------------------------------------- /dist/css/bootstrap-drawer.min.css: -------------------------------------------------------------------------------- 1 | html{min-height:100%;height:100%}body.has-drawer{min-height:100%;height:100%}.has-inner-drawer{position:relative;overflow:hidden}.drawer{display:block;background-color:#f8f8f8;color:#333;border-right:1px solid #dfdfdf;min-height:1px;height:100%;top:0;left:0;position:fixed;z-index:1035;-webkit-box-shadow:0 1px 1px rgba(0,0,0,0.05);box-shadow:0 1px 1px rgba(0,0,0,0.05)}.drawer-contents,.drawer-heading,.drawer-body,.drawer-nav,.drawer-footer,.drawer ul,.drawer li{display:inherit;margin:0;width:100%;position:relative}.drawer-right{left:auto;right:0;border-right:none;border-left:1px solid #dfdfdf;-webkit-box-shadow:0 -1px 1px rgba(0,0,0,0.05);box-shadow:0 -1px 1px rgba(0,0,0,0.05)}.drawer-inverse{background-color:#333;color:#eee;border-right:1px solid #1a1a1a}.drawer-inverse.drawer-right{border-right:1px solid #dfdfdf}.drawer-inside{position:absolute}.drawer-controls{float:right;margin-right:-16.66666667%;padding:10px;height:100%;position:relative;width:16.66666667%;z-index:500}.drawer-contents{background-color:#f8f8f8;height:100%;width:100%;overflow:auto}.drawer-right .drawer-controls{float:left;margin-left:-16.66666667%;margin-right:0}.drawer-heading{border-bottom:1px solid #dfdfdf;padding:10px 15px;color:inherit}.drawer-title{margin-top:0;margin-bottom:0}.drawer-inner-toggle{position:absolute;top:10px;right:10px}.drawer-body,.drawer-nav{padding:10px 15px}.drawer-nav,.drawer-fullnav{padding:10px 15px;margin-bottom:0;list-style:none}.drawer-nav li,.drawer-fullnav li{position:relative;margin-bottom:5px}.drawer-nav li a,.drawer-fullnav li a{color:#777;border-radius:4px;position:relative;display:block;padding:10px 15px}.drawer-nav li.active a,.drawer-fullnav li.active a,.drawer-nav li a:hover,.drawer-fullnav li a:hover,.drawer-nav li a:focus,.drawer-fullnav li a:focus{color:#515151;text-decoration:none;background-color:#fff}.drawer-fullnav{color:#fff;padding:0}.drawer-fullnav li{margin-bottom:0}.drawer-fullnav li a{border-radius:0}.drawer-inverse .drawer-contents{background-color:#333}.drawer-inverse .drawer-fullnav li a,.drawer-inverse .drawer-nav li a{color:#fff;padding:10px 15px}.drawer-inverse .drawer-fullnav li.active a,.drawer-inverse .drawer-fullnav li a:hover,.drawer-inverse .drawer-fullnav li a:active,.drawer-inverse .drawer-nav li.active a,.drawer-inverse .drawer-nav li a:hover,.drawer-inverse .drawer-nav li a:active{color:#eee;background-color:#1a1a1a}.drawer-footer{padding:10px 15px}.drawer-footer.locked{position:absolute;bottom:0;left:0}.dw-xs-12{width:100%}.fold.dw-xs-12{margin-left:-100%}.drawer-right.fold.dw-xs-12{margin-right:-100%}.dw-xs-11{width:91.66666667%}.fold.dw-xs-11{margin-left:-91.66666667%}.drawer-right.fold.dw-xs-11{margin-right:-91.66666667%}.dw-xs-10{width:83.33333333%}.fold.dw-xs-10{margin-left:-83.33333333%}.drawer-right.fold.dw-xs-10{margin-right:-83.33333333%}.dw-xs-9{width:75%}.fold.dw-xs-9{margin-left:-75%}.drawer-right.fold.dw-xs-9{margin-right:-75%}.dw-xs-8{width:66.66666667%}.fold.dw-xs-8{margin-left:-66.66666667%}.drawer-right.fold.dw-xs-8{margin-right:-66.66666667%}.dw-xs-7{width:58.33333333%}.fold.dw-xs-7{margin-left:-58.33333333%}.drawer-right.fold.dw-xs-7{margin-right:-58.33333333%}.dw-xs-6{width:50%}.fold.dw-xs-6{margin-left:-50%}.drawer-right.fold.dw-xs-6{margin-right:-50%}.dw-xs-5{width:41.66666667%}.fold.dw-xs-5{margin-left:-41.66666667%}.drawer-right.fold.dw-xs-5{margin-right:-41.66666667%}.dw-xs-4{width:33.33333333%}.fold.dw-xs-4{margin-left:-33.33333333%}.drawer-right.fold.dw-xs-4{margin-right:-33.33333333%}.dw-xs-3{width:25%}.fold.dw-xs-3{margin-left:-25%}.drawer-right.fold.dw-xs-3{margin-right:-25%}.dw-xs-2{width:16.66666667%}.fold.dw-xs-2{margin-left:-16.66666667%}.drawer-right.fold.dw-xs-2{margin-right:-16.66666667%}.dw-xs-1{width:8.33333333%}.fold.dw-xs-1{margin-left:-8.33333333%}.drawer-right.fold.dw-xs-1{margin-right:-8.33333333%}@media (min-width:768px){.dw-sm-12{width:100%}.fold.dw-sm-12{margin-left:-100%}.drawer-right.fold.dw-sm-12{margin-right:-100%}.dw-sm-11{width:91.66666667%}.fold.dw-sm-11{margin-left:-91.66666667%}.drawer-right.fold.dw-sm-11{margin-right:-91.66666667%}.dw-sm-10{width:83.33333333%}.fold.dw-sm-10{margin-left:-83.33333333%}.drawer-right.fold.dw-sm-10{margin-right:-83.33333333%}.dw-sm-9{width:75%}.fold.dw-sm-9{margin-left:-75%}.drawer-right.fold.dw-sm-9{margin-right:-75%}.dw-sm-8{width:66.66666667%}.fold.dw-sm-8{margin-left:-66.66666667%}.drawer-right.fold.dw-sm-8{margin-right:-66.66666667%}.dw-sm-7{width:58.33333333%}.fold.dw-sm-7{margin-left:-58.33333333%}.drawer-right.fold.dw-sm-7{margin-right:-58.33333333%}.dw-sm-6{width:50%}.fold.dw-sm-6{margin-left:-50%}.drawer-right.fold.dw-sm-6{margin-right:-50%}.dw-sm-5{width:41.66666667%}.fold.dw-sm-5{margin-left:-41.66666667%}.drawer-right.fold.dw-sm-5{margin-right:-41.66666667%}.dw-sm-4{width:33.33333333%}.fold.dw-sm-4{margin-left:-33.33333333%}.drawer-right.fold.dw-sm-4{margin-right:-33.33333333%}.dw-sm-3{width:25%}.fold.dw-sm-3{margin-left:-25%}.drawer-right.fold.dw-sm-3{margin-right:-25%}.dw-sm-2{width:16.66666667%}.fold.dw-sm-2{margin-left:-16.66666667%}.drawer-right.fold.dw-sm-2{margin-right:-16.66666667%}.dw-sm-1{width:8.33333333%}.fold.dw-sm-1{margin-left:-8.33333333%}.drawer-right.fold.dw-sm-1{margin-right:-8.33333333%}}@media (min-width:992px){.dw-md-12{width:100%}.fold.dw-md-12{margin-left:-100%}.drawer-right.fold.dw-md-12{margin-right:-100%}.dw-md-11{width:91.66666667%}.fold.dw-md-11{margin-left:-91.66666667%}.drawer-right.fold.dw-md-11{margin-right:-91.66666667%}.dw-md-10{width:83.33333333%}.fold.dw-md-10{margin-left:-83.33333333%}.drawer-right.fold.dw-md-10{margin-right:-83.33333333%}.dw-md-9{width:75%}.fold.dw-md-9{margin-left:-75%}.drawer-right.fold.dw-md-9{margin-right:-75%}.dw-md-8{width:66.66666667%}.fold.dw-md-8{margin-left:-66.66666667%}.drawer-right.fold.dw-md-8{margin-right:-66.66666667%}.dw-md-7{width:58.33333333%}.fold.dw-md-7{margin-left:-58.33333333%}.drawer-right.fold.dw-md-7{margin-right:-58.33333333%}.dw-md-6{width:50%}.fold.dw-md-6{margin-left:-50%}.drawer-right.fold.dw-md-6{margin-right:-50%}.dw-md-5{width:41.66666667%}.fold.dw-md-5{margin-left:-41.66666667%}.drawer-right.fold.dw-md-5{margin-right:-41.66666667%}.dw-md-4{width:33.33333333%}.fold.dw-md-4{margin-left:-33.33333333%}.drawer-right.fold.dw-md-4{margin-right:-33.33333333%}.dw-md-3{width:25%}.fold.dw-md-3{margin-left:-25%}.drawer-right.fold.dw-md-3{margin-right:-25%}.dw-md-2{width:16.66666667%}.fold.dw-md-2{margin-left:-16.66666667%}.drawer-right.fold.dw-md-2{margin-right:-16.66666667%}.dw-md-1{width:8.33333333%}.fold.dw-md-1{margin-left:-8.33333333%}.drawer-right.fold.dw-md-1{margin-right:-8.33333333%}}@media (min-width:1200px){.dw-lg-12{width:100%}.fold.dw-lg-12{margin-left:-100%}.drawer-right.fold.dw-lg-12{margin-right:-100%}.dw-lg-11{width:91.66666667%}.fold.dw-lg-11{margin-left:-91.66666667%}.drawer-right.fold.dw-lg-11{margin-right:-91.66666667%}.dw-lg-10{width:83.33333333%}.fold.dw-lg-10{margin-left:-83.33333333%}.drawer-right.fold.dw-lg-10{margin-right:-83.33333333%}.dw-lg-9{width:75%}.fold.dw-lg-9{margin-left:-75%}.drawer-right.fold.dw-lg-9{margin-right:-75%}.dw-lg-8{width:66.66666667%}.fold.dw-lg-8{margin-left:-66.66666667%}.drawer-right.fold.dw-lg-8{margin-right:-66.66666667%}.dw-lg-7{width:58.33333333%}.fold.dw-lg-7{margin-left:-58.33333333%}.drawer-right.fold.dw-lg-7{margin-right:-58.33333333%}.dw-lg-6{width:50%}.fold.dw-lg-6{margin-left:-50%}.drawer-right.fold.dw-lg-6{margin-right:-50%}.dw-lg-5{width:41.66666667%}.fold.dw-lg-5{margin-left:-41.66666667%}.drawer-right.fold.dw-lg-5{margin-right:-41.66666667%}.dw-lg-4{width:33.33333333%}.fold.dw-lg-4{margin-left:-33.33333333%}.drawer-right.fold.dw-lg-4{margin-right:-33.33333333%}.dw-lg-3{width:25%}.fold.dw-lg-3{margin-left:-25%}.drawer-right.fold.dw-lg-3{margin-right:-25%}.dw-lg-2{width:16.66666667%}.fold.dw-lg-2{margin-left:-16.66666667%}.drawer-right.fold.dw-lg-2{margin-right:-16.66666667%}.dw-lg-1{width:8.33333333%}.fold.dw-lg-1{margin-left:-8.33333333%}.drawer-right.fold.dw-lg-1{margin-right:-8.33333333%}}.fold{margin-right:0}.folding{height:100%;-webkit-transition-property:margin-left;transition-property:margin-left;-webkit-transition-duration:.35s;transition-duration:.35s;-webkit-transition-timing-function:ease;transition-timing-function:ease}.drawer-right.fold{margin-left:0}.drawer-right.folding{-webkit-transition-property:margin-right;transition-property:margin-right}.fold.open,.drawer-right.fold.open{margin-left:0;margin-right:0} -------------------------------------------------------------------------------- /dist/js/drawer.js: -------------------------------------------------------------------------------- 1 | /* ======================================================================== 2 | * Bootstrap: drawer.js v1.0.6 3 | # Heavily based on collapse, but had to change the name to "fold" to 4 | # avoid transition conflicts. 5 | * ======================================================================== 6 | */ 7 | 8 | 9 | (function ($) { 10 | 'use strict'; 11 | 12 | // OFF CANVAS PUBLIC CLASS DEFINITION 13 | // ================================ 14 | 15 | var Drawer = function (element, options) { 16 | this.$element = $(element) 17 | this.options = $.extend({}, Drawer.DEFAULTS, options) 18 | this.$trigger = $(this.options.trigger).filter('[href="#' + element.id + '"], [data-target="#' + element.id + '"]') 19 | this.transitioning = null 20 | 21 | if (this.options.parent) { 22 | this.$parent = this.getParent() 23 | } else { 24 | this.addAriaAndDrawerdClass(this.$element, this.$trigger) 25 | } 26 | 27 | if (this.options.toggle) this.toggle() 28 | } 29 | 30 | Drawer.VERSION = '3.3.2' 31 | 32 | Drawer.TRANSITION_DURATION = 350 33 | 34 | Drawer.DEFAULTS = { 35 | toggle: true, 36 | trigger: '[data-toggle="drawer"]' 37 | } 38 | 39 | Drawer.prototype.dimension = function () { 40 | var isRight = this.$element.hasClass('drawer-right') 41 | return isRight ? 'margin-right' : 'margin-left' 42 | } 43 | 44 | Drawer.prototype.show = function () { 45 | if (this.transitioning || this.$element.hasClass('open')) return 46 | 47 | var activesData 48 | var actives = this.$parent && this.$parent.children('.panel').children('.in, .collapsing') 49 | 50 | if (actives && actives.length) { 51 | activesData = actives.data('bs.drawer') 52 | if (activesData && activesData.transitioning) return 53 | } 54 | 55 | var startEvent = $.Event('show.bs.drawer') 56 | this.$element.trigger(startEvent) 57 | if (startEvent.isDefaultPrevented()) return 58 | 59 | if (actives && actives.length) { 60 | Plugin.call(actives, 'hide') 61 | activesData || actives.data('bs.drawer', null) 62 | } 63 | 64 | var dimension = this.dimension() 65 | 66 | this.$element 67 | .addClass('folding').css(dimension, 0) 68 | .attr('aria-expanded', true) 69 | 70 | this.$trigger 71 | .removeClass('folded') 72 | .attr('aria-expanded', true) 73 | 74 | this.transitioning = 1 75 | 76 | var complete = function () { 77 | this.$element 78 | .removeClass('folding') 79 | .addClass('fold open').css(dimension, '') 80 | this.transitioning = 0 81 | this.$element 82 | .trigger('shown.bs.drawer') 83 | } 84 | 85 | if (!$.support.transition) { 86 | return complete.call(this) 87 | } else { 88 | this.transEventName = $.support.transition.end; 89 | } 90 | 91 | this.$element 92 | .one(this.transEventName, $.proxy(complete, this)) 93 | .emulateTransitionEnd(Drawer.TRANSITION_DURATION).css(dimension, 0) 94 | } 95 | 96 | Drawer.prototype.hide = function () { 97 | if (this.transitioning || !this.$element.hasClass('open')) return 98 | 99 | var startEvent = $.Event('hide.bs.drawer') 100 | this.$element.trigger(startEvent) 101 | if (startEvent.isDefaultPrevented()) return 102 | 103 | var dimension = this.dimension() 104 | 105 | this.$element 106 | .addClass('folding') 107 | .removeClass('open') 108 | .attr('aria-expanded', false) 109 | 110 | this.$trigger 111 | .addClass('folded') 112 | .attr('aria-expanded', false) 113 | 114 | this.transitioning = 1 115 | 116 | var complete = function () { 117 | this.transitioning = 0 118 | this.$element 119 | .removeClass('folding') 120 | .addClass('fold') 121 | .trigger('hidden.bs.drawer') 122 | } 123 | 124 | if (!$.support.transition) { 125 | return complete.call(this) 126 | } else { 127 | this.transEventName = $.support.transition.end; 128 | } 129 | 130 | this.$element 131 | .css(dimension, '') 132 | .one(this.transEventName, $.proxy(complete, this)) 133 | .emulateTransitionEnd(Drawer.TRANSITION_DURATION) 134 | } 135 | 136 | Drawer.prototype.toggle = function () { 137 | this[this.$element.hasClass('open') ? 'hide' : 'show']() 138 | } 139 | 140 | Drawer.prototype.getParent = function () { 141 | return $(this.options.parent) 142 | .find('[data-toggle="drawer"][data-parent="' + this.options.parent + '"]') 143 | .each($.proxy(function (i, element) { 144 | var $element = $(element) 145 | this.addAriaAndDrawerdClass(getTargetFromTrigger($element), $element) 146 | }, this)) 147 | .end() 148 | } 149 | 150 | Drawer.prototype.addAriaAndDrawerdClass = function ($element, $trigger) { 151 | var isOpen = $element.hasClass('open') 152 | 153 | $element.attr('aria-expanded', isOpen) 154 | $trigger 155 | .toggleClass('folded', !isOpen) 156 | .attr('aria-expanded', isOpen) 157 | } 158 | 159 | function getTargetFromTrigger($trigger) { 160 | var href 161 | var target = $trigger.attr('data-target') 162 | || (href = $trigger.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '') // strip for ie7 163 | 164 | return $(target) 165 | } 166 | 167 | 168 | // OFFCANVAS PLUGIN DEFINITION 169 | // ========================== 170 | 171 | function Plugin(option) { 172 | return this.each(function () { 173 | var $this = $(this) 174 | var data = $this.data('bs.drawer') 175 | var options = $.extend({}, Drawer.DEFAULTS, $this.data(), typeof option == 'object' && option) 176 | 177 | if (!data && options.toggle && option == 'show') options.toggle = false 178 | if (!data) $this.data('bs.drawer', (data = new Drawer(this, options))) 179 | if (typeof option == 'string') data[option]() 180 | }) 181 | } 182 | 183 | var old = $.fn.fold 184 | 185 | $.fn.drawer = Plugin 186 | $.fn.drawer.Constructor = Drawer 187 | 188 | 189 | // OFFCANVAS NO CONFLICT 190 | // ==================== 191 | 192 | $.fn.drawer.noConflict = function () { 193 | $.fn.fold = old 194 | return this 195 | } 196 | 197 | 198 | // OFFCANVAS DATA-API 199 | // ================= 200 | 201 | $(document).on('click.bs.drawer.data-api', '[data-toggle="drawer"]', function (e) { 202 | var $this = $(this) 203 | 204 | if (!$this.attr('data-target')) e.preventDefault() 205 | 206 | var $target = getTargetFromTrigger($this) 207 | var data = $target.data('bs.drawer') 208 | var option = data ? 'toggle' : $.extend({}, $this.data(), { trigger: this }) 209 | 210 | Plugin.call($target, option) 211 | }) 212 | 213 | })(window.jQuery || {}); 214 | -------------------------------------------------------------------------------- /dist/js/drawer.min.js: -------------------------------------------------------------------------------- 1 | !function(t){"use strict";function e(e){var n,a=e.attr("data-target")||(n=e.attr("href"))&&n.replace(/.*(?=#[^\s]+$)/,"");return t(a)}function n(e){return this.each(function(){var n=t(this),i=n.data("bs.drawer"),r=t.extend({},a.DEFAULTS,n.data(),"object"==typeof e&&e);!i&&r.toggle&&"show"==e&&(r.toggle=!1),i||n.data("bs.drawer",i=new a(this,r)),"string"==typeof e&&i[e]()})}var a=function(e,n){this.$element=t(e),this.options=t.extend({},a.DEFAULTS,n),this.$trigger=t(this.options.trigger).filter('[href="#'+e.id+'"], [data-target="#'+e.id+'"]'),this.transitioning=null,this.options.parent?this.$parent=this.getParent():this.addAriaAndDrawerdClass(this.$element,this.$trigger),this.options.toggle&&this.toggle()};a.VERSION="3.3.2",a.TRANSITION_DURATION=350,a.DEFAULTS={toggle:!0,trigger:'[data-toggle="drawer"]'},a.prototype.dimension=function(){var t=this.$element.hasClass("drawer-right");return t?"margin-right":"margin-left"},a.prototype.show=function(){if(!this.transitioning&&!this.$element.hasClass("open")){var e,i=this.$parent&&this.$parent.children(".panel").children(".in, .collapsing");if(!(i&&i.length&&(e=i.data("bs.drawer"),e&&e.transitioning))){var r=t.Event("show.bs.drawer");if(this.$element.trigger(r),!r.isDefaultPrevented()){i&&i.length&&(n.call(i,"hide"),e||i.data("bs.drawer",null));var s=this.dimension();this.$element.addClass("folding").css(s,0).attr("aria-expanded",!0),this.$trigger.removeClass("folded").attr("aria-expanded",!0),this.transitioning=1;var o=function(){this.$element.removeClass("folding").addClass("fold open").css(s,""),this.transitioning=0,this.$element.trigger("shown.bs.drawer")};if(!t.support.transition)return o.call(this);this.transEventName=t.support.transition.end,this.$element.one(this.transEventName,t.proxy(o,this)).emulateTransitionEnd(a.TRANSITION_DURATION).css(s,0)}}}},a.prototype.hide=function(){if(!this.transitioning&&this.$element.hasClass("open")){var e=t.Event("hide.bs.drawer");if(this.$element.trigger(e),!e.isDefaultPrevented()){var n=this.dimension();this.$element.addClass("folding").removeClass("open").attr("aria-expanded",!1),this.$trigger.addClass("folded").attr("aria-expanded",!1),this.transitioning=1;var i=function(){this.transitioning=0,this.$element.removeClass("folding").addClass("fold").trigger("hidden.bs.drawer")};if(!t.support.transition)return i.call(this);this.transEventName=t.support.transition.end,this.$element.css(n,"").one(this.transEventName,t.proxy(i,this)).emulateTransitionEnd(a.TRANSITION_DURATION)}}},a.prototype.toggle=function(){this[this.$element.hasClass("open")?"hide":"show"]()},a.prototype.getParent=function(){return t(this.options.parent).find('[data-toggle="drawer"][data-parent="'+this.options.parent+'"]').each(t.proxy(function(n,a){var i=t(a);this.addAriaAndDrawerdClass(e(i),i)},this)).end()},a.prototype.addAriaAndDrawerdClass=function(t,e){var n=t.hasClass("open");t.attr("aria-expanded",n),e.toggleClass("folded",!n).attr("aria-expanded",n)};var i=t.fn.fold;t.fn.drawer=n,t.fn.drawer.Constructor=a,t.fn.drawer.noConflict=function(){return t.fn.fold=i,this},t(document).on("click.bs.drawer.data-api",'[data-toggle="drawer"]',function(a){var i=t(this);i.attr("data-target")||a.preventDefault();var r=e(i),s=r.data("bs.drawer"),o=s?"toggle":t.extend({},i.data(),{trigger:this});n.call(r,o)})}(window.jQuery||{}); -------------------------------------------------------------------------------- /docs/_footer.htm: -------------------------------------------------------------------------------- 1 | 4 |
5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /docs/_header.htm: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | bootstrap-drawer documentation 10 | 11 | 12 | 13 | 14 | 15 | 25 | 26 | 27 |
28 |
29 | 30 |
31 |
32 |
33 |

bootstrap-drawer

34 |
35 |
36 |   37 | 38 |
39 |
40 |

Basics

41 |
42 | 48 |
49 |

Other Links

50 |
51 | 57 |
58 | © 2015 Caroline Amaba 59 |
60 |
61 |
62 |
63 |
64 |
65 |

bootstrap-drawer

66 |

bootstrap-drawer is a Bootstrap add-on that gives you an off-canvas/drawer element to your page or container! Check it out by clicking the toggle in the top-left corner!

67 |
68 |
69 |
70 | -------------------------------------------------------------------------------- /docs/customize.md: -------------------------------------------------------------------------------- 1 | ## Drawer Customization 2 | 3 | **bootstrap-drawer** comes with some built-in classes to customize some basics about your drawer. These utility classes are modeled after Bootstrap's Navbar components. 4 | 5 | ---------- 6 | 7 | ## Position 8 | 9 | Sometimes you might want the drawer to the right. You can do this quickly by adding `.drawer-right` to the `.drawer` container. 10 | 11 | ```html 12 |
13 | ... 14 |
15 | ``` 16 | 17 |
18 |
19 |
20 | Menu 21 |
22 |
23 |
24 | right menu example 25 |
26 | 31 |
32 |
33 |
34 |

You can position the drawer to the right by adding the .drawer-right class. This also works on full-page drawers.

35 |
36 |
37 | 38 | ---------- 39 | 40 | ## Inverse Color 41 | 42 | Like the Bootstrap navbar, there is an inverse color option to the drawer. Just add `.drawer-inverse` to your `.drawer` container. 43 | 44 | ```html 45 |
46 | ... 47 |
48 | ``` 49 | 50 |
51 |
52 |
53 | Menu 54 |
55 |
56 |
57 | inverse menu example 58 |
59 | 64 |
65 |
66 |
67 |

You can inverse the drawer color (like navbar) by adding .drawer-inverse class.

68 |
69 |
-------------------------------------------------------------------------------- /docs/html/customize.html: -------------------------------------------------------------------------------- 1 |

Drawer Customization

2 |

bootstrap-drawer comes with some built-in classes to customize some basics about your drawer. These utility classes are modeled after Bootstrap's Navbar components.

3 |
4 |

Position

5 |

Sometimes you might want the drawer to the right. You can do this quickly by adding .drawer-right to the .drawer container.

6 | 
<div id="drawerExample2" class="drawer drawer-right ...">
 7 |     ...
 8 | </div>
 9 |
10 |
11 |
12 |
13 | Menu 14 |
15 |
16 |
17 | right menu example 18 |
19 | 24 |
25 |
26 |
27 |

You can position the drawer to the right by adding the .drawer-right class. This also works on full-page drawers.

28 |
29 |
30 | 31 |
32 |

Inverse Color

33 |

Like the Bootstrap navbar, there is an inverse color option to the drawer. Just add .drawer-inverse to your .drawer container.

34 | 
<div id="drawerExample2" class="drawer drawer-inverse ...">
35 |     ...
36 | </div>
37 |
38 |
39 |
40 |
41 | Menu 42 |
43 |
44 |
45 | inverse menu example 46 |
47 | 52 |
53 |
54 |
55 |

You can inverse the drawer color (like navbar) by adding .drawer-inverse class.

56 |
57 |
-------------------------------------------------------------------------------- /docs/html/index.html: -------------------------------------------------------------------------------- 1 |

What Is It?

2 |

bootstrap-drawer is a Bootstrap add-on/plugin that, in Bootstrap style, adds an "off-canvas" element to your pages and containers. We call it a "drawer" in these parts.*

3 |

I've looked around for fast-and-easy ways of implementing this constantly (and consistently), and I've had to rebuild it a few times. Tired of doing this, I created this! I imagine there's a lot of people like me looking for something like this, especially one that easily works with their front-end framework of choice, Bootstrap.

4 |

* Mostly because "bootstrap-offcanvas" was taken, and I've always referred to it as a mobile "drawer".

5 |
6 |

Requirements

7 |

Bootstrap is required for this plugin, since bootstrap-drawer is built on top of the framework. (Thus, jQuery is also required.)

8 |

Download

9 |

bower install bootstrap-drawer or npm install bootstrap-drawer

10 |

You can also find all the release on the GitHub repo releases page. For your convenience, here are some links to the latest releases:

11 |

Get Latest Vesion (1.0.6) 12 | Download bootstrap-drawer-1.0.6.zip

13 |
14 |

Basic Setup

15 |

If you simply just want to quickly use bootstrap-drawer with Bootstrap, you just need to include dist/bootstrap-drawer.css after Bootstrap, and then include any other files after that.

16 | 
<html>
 17 |     <head>
 18 |         <link rel="stylesheet" type="text/css" href="bootstrap.min.css">
 19 |         <link rel="stylesheet" type="text/css" href="bootstrap-drawer.min.css">
 20 |         <link rel="stylesheet" type="text/css" href="YOUR_OTHER_STYLES.css">
 21 |     </head>
 22 |     <body class="has-canvas">
 23 |         <!-- Off Canvas & other HTML here -->
 24 |         <script src="jquery.min.js"></script>
 25 |         <script src="bootstrap.min.js"></script>
 26 |         <script src="drawer.min.js"></script>
 27 |         <script src="YOUR_CUSTOM_JS.js"></script>
 28 |     </body>
 29 | </html>
 30 |
31 |

Basic Usage

32 |

Full Page Drawer

33 |

To get a simple, full-page drawer, like the one here in the docs, simply add .has-drawer to your body, and add the .drawer container like so:

34 | 
<body class="has-drawer"> <!-- add this class to your body for proper sizing -->
 35 |     <div id="drawerExample" class="drawer dw-xs-10 dw-sm-6 dw-md-4 fold" aria-labelledby="drawerExample">
 36 |         <div class="drawer-controls">
 37 |             <a href="#drawerExample" data-toggle="drawer" aria-foldedopen="false" aria-controls="drawerExample" class="btn btn-primary btn-sm">Menu</a>
 38 |         </div>
 39 |         <div class="drawer-contents">
 40 |             <div class="drawer-heading">
 41 |                 <h2 class="drawer-title">Menu</h2>
 42 |             </div>
 43 |             <div class="drawer-body">
 44 |                 <p>
 45 |                     This is a properly padded container for content in the
 46 |                     drawer that isn't a navigation.
 47 |                 </p>
 48 |                 <a href="#">A Regular Link</a>
 49 |             </div>
 50 |             <ul class="drawer-nav">
 51 |                 <li role="presentation" class="active"><a href="#">Home</a></li>
 52 |                 <li role="presentation"><a href="#">Profile</a></li>
 53 |                 <li role="presentation"><a href="#">Messages</a></li>
 54 |             </ul>
 55 |             <div class="drawer-footer">
 56 |                 <small>&copy; Caroline Amaba</small>
 57 |             </div>
 58 |         </div>
 59 |     </div>
 60 |     <div class="container">
 61 |         <!-- content as per usual -->
 62 |     </div>
 63 | </body>
 64 |
65 |

Container-nested Drawer

66 |
67 |
68 |
69 | Menu 70 |
71 |
72 |
73 |

Menu

74 |
75 | 80 |
81 |
82 |
83 |

You can also nest the drawer in a block container by adding the .drawer-inside class to .drawer and adding .has-inner-drawer to your parent container, like so:

84 |

You can also use panels inside of other elements that have a defined with and height. A z-index will also need to be defined.

85 |

You'll also have to make sure that you give your controls (however you do them) are visible. In this example, the .panel-body was given padding-left: 10% so that the Menu button isn't running into the content of the panel.

86 |
87 |
88 | 89 | 
<div class="panel panel-default has-inner-drawer">
 90 |     <div id="drawerExample2" class="drawer drawer-inside dw-xs-5 fold" aria-labelledby="drawerExample2">
 91 |         <div class="drawer-controls">
 92 |             <a href="#drawerExample2" data-toggle="drawer" href="#drawerExample2" aria-foldedopen="false" aria-controls="drawerExample2" class="btn btn-primary btn-sm">Menu</a>
 93 |         </div>
 94 |         <div class="drawer-contents">
 95 |             <div class="drawer-heading">
 96 |                 <h2 class="drawer-title">Menu</h2>
 97 |             </div>
 98 |             <ul class="drawer-nav">
 99 |                 <li role="presentation" class="active"><a href="#">Link</a></li>
100 |                 <li role="presentation"><a href="#">Link</a></li>
101 |                 <li role="presentation"><a href="#">Link</a></li>
102 |             </ul>
103 |         </div>
104 |     </div>
105 |     <div class="panel-body" style="padding-left: 10%">
106 |         <p>You can also use panels inside of other elements that have
107 |         a defined with and height.</p>
108 |         <p>You'll have to be responsible for making sure your controls accessible.</p>
109 |     </div>
110 | </div>
111 |
112 |


113 |

bootstrap-drawer components

114 |

bootstrap_drawer was built with a Bootstrap-minded style. The classes used are very similar to the .nav and .panel classes in Bootstrap. The Bootstrap data-api for toggling the drawer is, likewise, built like .collapse and its javascript component.

115 |

bootstrap-drawer does not (yet) have a class that expands to a navbar on bigger screens. For now, the main focus of bootstrap-drawer was to do one thing well. In a later version, there may be an additional ".drawer-navbar" class to remove the drawer on larger screens.

116 |

Class Breakdown

117 |

.drawer is the main class. The sizing system is based on the 12-column system of Bootstrap, using .dw-SIZE-#COLS. The drawer is built mobile-first, like the rest of Bootstrap, and the size in width is based on the document's fluid width (a percentage of it, based on the columns). This size becomes relative when using it inside another container.

118 |

.fold started the menu closed (.fold.open starts the menu opened). This class, as well as the 119 | javascript component are built similarly to the .collapse components. It had to 120 | be named differently because bootstrap-drawer is folding horizontally and not collapsing vertically.

121 | 
<div class="drawer dw-xs-10 dw-sm-6 dw-md-4 fold">
122 |     ...
123 | </div>
124 |
125 |

.drawer-controls is a special drawer column made to house a toggle button for the drawer that moves with the component. It's an optional piece, since the menu can be toggled by other buttons either using the built-in data-toggle="drawer" or the jQuery API ($('.drawer').drawer();).

126 | 
<div id="drawerExample2" class="drawer dw-xs-5 fold" aria-labelledby="drawerExample2">
127 |     <div class="drawer-controls">
128 |         <a href="#drawerExample2" data-toggle="drawer" href="#drawerExample2" aria-foldedopen="false" aria-controls="drawerExample2" class="btn btn-primary btn-sm">Menu</a>
129 |     </div>
130 |     <div class="drawer-contents">
131 |         ...
132 |     </div>
133 | </div>
134 |
135 |


136 |

Drawer Contents

137 |

.drawer-contents wraps the main parts of the drawer: .drawer-heading, .drawer-body, .drawer-nav / .drawer-fullnav, .drawer-footer. These classes are very similar to how Bootstrap's .panel inner classes work.

138 |

.drawer-nav and .drawer-fullnav are already-built nav classes that are based on the .nav.nav-pills.nav-stacked combination of classes. The difference between the two is that .drawer-nav has padding on the left and right, while .drawer-fullnav goes the entire width of the drawer.

139 |

You can use .drawer-body to wrap you own navigation, as well, or just include content.

140 |

DEMOS:

141 |
142 |
143 |
144 |
145 |
146 |
147 |

.drawer-nav example

148 |
149 | 154 |
155 |
156 |
157 |
158 |
159 |
160 |
161 |
162 |
163 |

.drawer-fullnav example

164 |
165 | 170 |
171 |
172 |
173 |
174 |
175 | 176 |

.drawer-heading, like .panel-heading is specially styled to be the top of the drawer. In addition, there is a .drawer-title class that can be put within .drawer-heading for a specially styled <h#> tag.

177 |

.drawer-footer finishes off the components of the drawer (again, like .panel-footer). Additionally, by giving the .drawer-footer an additional locked class, the footer will then stick to the bottom of the drawer. This is absolutely positioned within the drawer, and you should be careful that your content does not overlap the .drawer-footer.

178 | -------------------------------------------------------------------------------- /docs/html/javascript.html: -------------------------------------------------------------------------------- 1 |

Component jQuery API

2 |

Bootstrap drawer comes with drawer.js to be added to the bootstrap.js component suite. If you're including separate components, drawer.js depends on transition.js plugin.

3 |

drawer.js is built similarly to collapse.js.

4 |
5 |

Example

6 |
7 |
8 |
9 |
10 | Button/Link Toggle Example 11 |
12 | 17 |
18 |
19 |
20 |
21 |
22 | Try the buttons over there to toggle the menu that pops out on the left! 23 |
24 |
25 |

26 | 27 |

28 |

29 | 32 |

33 |
34 |
35 |
36 |
37 | 38 | 39 |

Usage

40 |

The drawer plugin utilizes a few classes to do all the work:

41 |
    42 |
  • .fold hides content
    • 43 |
  • .fold.open shows content.
    • 44 |
  • .folding is applied during transitions, and removed when it finishes.
    • 45 |
46 |

These classes can be found in less/mixins/drawer-framework.less. They are built in loops with the .dw-SIZE-# classes because they utilize margins based on the column width.

47 |

Via data attributes

48 |

Just add data-toggle="drawer" and a data-target to the element to automatically assign control of drawer element. The data-target attribute accepts a CSS selector to apply the folding animation to. Be sure to add the class .fold to the collapsible element. If you'd like it to default open, add the additional class .open.

49 |

Via JavaScript

50 |

Enable manually with:

51 | 
$('.drawer').drawer();
 52 |
53 |

Options

54 |

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-parent="".

55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 |
Nameselectordefaultdescription
parentselectorfalseIf a selector is provided, then all collapsible elements under the specified parent will be closed when this drawer is open.
togglebooleantrueToggle the drawer element on invocation.
75 | 76 |

Methods

77 |
.drawer(options)
78 |

Activates your content as a drawer element. Accepts an optional options object.

79 | 
$('#myDrawer').drawer({
 80 |     toggle: false
 81 | });
 82 |
83 |
.drawer('toggle')
84 |

Toggles a drawer element as folded or open.

85 |
.drawer('show')
86 |

Shows drawer element as opened.

87 |
.drawer('hide')
88 |

Hide a drawer element.

89 |

Events

90 |

drawer-bootstrap drawer class exposes drawer events (very similarly to how Bootstrap collapse) for hooking 91 | into the drawer functionality.

92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 |
Event TypeDescription
show.bs.drawerThis event fires immediately when the show instance method is called.
shown.bs.drawerThis event is fired when a collapse element has been made visible to the user (will wait for CSS transitions to complete).
hide.bs.drawerThis event is fired immediately when the hide method has been called.
hidden.bs.drawerThis event is fired when a collapse element has been hidden from the user (will wait for CSS transitions to complete).
114 | 115 | 
$('#myDrawer').on('hidden.bs.drawer', function() {
116 |     // do something here...
117 | });
118 |
119 | -------------------------------------------------------------------------------- /docs/html/less.html: -------------------------------------------------------------------------------- 1 |

LESS / Custom Builds

2 |

If you're familiar with LESS, bootstrap-drawer has less files that you can use to either build your own custom bootstrap-drawer or directly incoroprate with other LESS files in your project.

3 |

bootstrap-drawer currently uses Gulp and LESS, but it'd be great if people can contribute grunt and SASS components! Check out the repo to contribute!

4 |
5 |

Building Your Own Flavor of Drawer

6 |

You'll need gulp and Node if you want to build your own version.

7 |

Run npm install in order to get all the devDependencies from the package.json.

8 |

Most of the tasks are outlined in gulpfile.js. The gulp build will also update the assets for example/index.html so you can see your changes.

9 |

To customize bootstrap-drawer, just edit some of the variables in less/drawer-variables.less to the sizes and colors, etc. you want. Then run gulp build and a new dist/css/bootstrap-drawer(.min).css should be made just for you! Include the file right after the Bootstrap core file, and you should be good to go!

10 |

Things to keep in mind:

11 |
    12 |
  • bootstrap-drawer uses some variables (@grid-gutter-width, @zindex-navbar-fixed, @link-color, to 13 | name most of them), so if you're using a different varibles.less file, be sure to replace it in less/bootstrap-drawer.less.
    • 14 |
  • The .dw-SIZE-# columns are built in LESS loops, and can change as you change the @grid-columns variable. If you're using 16-columns instead of 12, less/mixins/drawer-framework.less is built to build more columns (like .dw-md-13, etc.).
    • 15 |
16 |
17 |

Using Less

18 |

I am assuming for this section you are familiar with using less and the Bootstrap less source. There are files in the less/ directory that are parallel to Bootstrap's less source files. drawer.less already includes its custom variable package as well as less loop framework. To include the less in your build files, you can do one of the following:

19 |

Add to your main less file after bootstrap

20 | 
    @import "bootstrap.less";
21 |     @import "path/to/drawer.less";
22 | 
23 |     /* Your styles */
24 |
25 |

Add to bootstrap.less

26 | 
    @import "variables.less";
27 |     @import "mixins.less";
28 | 
29 |     // Bootstrap Core
30 |     // ...
31 | 
32 |     // ... etc ...
33 | 
34 |     // Components w/ JavaScript
35 |     @import "modals.less";
36 |     @import "tooltip.less";
37 |     @import "popovers.less";
38 |     @import "carousel.less";
39 |     @import "path/to/drawer.less";
40 | 
41 |     // Utility Classes
42 |     // ... etc ...
43 |
44 |

Move Contents

45 |

The first two lines in less/drawer.less can be removed and moved

46 |

Feel free to move drawer-variables.less and drawer-framework.less to appropriate folders to maintain bootstrap structure. The component's variables rely on a few variables from the core bootstrap framework, likewise for the mixin framework. Be sure to simply include them after the bootstrap core variables/mixins files:

47 |
    48 |
  • @import "./drawer-variables"; can be put after importing variables.less
    • 49 |
  • @import "./mixins/drawer-framework"; can be put after importing mixins.less
    • 50 |
51 | 
    @import "variables.less";
52 |     @import "path/to/drawer-variables.less"
53 |     @import "mixins.less";
54 |     @import "path/to/drawer-framework.less";
55 | 
56 |     // Bootstrap Core
57 |     // ...
58 | 
59 |     // ... etc ...
60 | 
61 |     // Components w/ JavaScript
62 |     @import "modals.less";
63 |     @import "tooltip.less";
64 |     @import "popovers.less";
65 |     @import "carousel.less";
66 |     @import "path/to/drawer.less";
67 | 
68 |     // Utility Classes
69 |     // ... etc ...
70 |
71 | -------------------------------------------------------------------------------- /docs/index.md: -------------------------------------------------------------------------------- 1 | ## What Is It? 2 | 3 | [bootstrap-drawer](http://github.com/clineamb/bootstrap-drawer) is a Bootstrap add-on/plugin that, in Bootstrap style, adds an "off-canvas" element to your pages and containers. We call it a "drawer" in these parts.* 4 | 5 | I've looked around for fast-and-easy ways of implementing this constantly (and consistently), and I've had to rebuild it a few times. Tired of doing this, I created this! I imagine there's a lot of people like me looking for something like this, especially one that easily works with their front-end framework of choice, Bootstrap. 6 | 7 | * Mostly because "bootstrap-offcanvas" was taken, and I've always referred to it as a mobile "drawer". 8 | 9 | ---------- 10 | 11 | ## Requirements 12 | 13 | Bootstrap is required for this plugin, since bootstrap-drawer is built on top of the framework. (Thus, jQuery is also required.) 14 | 15 | ### Download 16 | 17 | `bower install bootstrap-drawer` or `npm install bootstrap-drawer` 18 | 19 | You can also find all the release on the GitHub repo releases page. For your convenience, here are some links to the latest releases: 20 | 21 | Get Latest Vesion (1.0.6) 22 | Download bootstrap-drawer-1.0.6.zip 23 | 24 | ---------- 25 | 26 | ## Basic Setup 27 | 28 | If you simply just want to quickly use bootstrap-drawer with Bootstrap, you just need to include `dist/bootstrap-drawer.css` after Bootstrap, and then include any other files after that. 29 | 30 | ```html 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | ``` 46 | 47 | ## Basic Usage 48 | 49 | ### Full Page Drawer 50 | 51 | To get a simple, full-page drawer, like the one here in the docs, simply add `.has-drawer` to your body, and add the `.drawer` container like so: 52 | 53 | ```html 54 | 55 |
56 |
57 | Menu 58 |
59 |
60 |
61 |

Menu

62 |
63 |
64 |

65 | This is a properly padded container for content in the 66 | drawer that isn't a navigation. 67 |

68 | A Regular Link 69 |
70 | 75 |
76 | © Caroline Amaba 77 |
78 |
79 |
80 |
81 | 82 |
83 | 84 | ``` 85 | 86 | ### Container-nested Drawer 87 | 88 |
89 |
90 |
91 | Menu 92 |
93 |
94 |
95 |

Menu

96 |
97 | 102 |
103 |
104 |
105 |

You can also nest the drawer in a block container by adding the .drawer-inside class to .drawer and adding .has-inner-drawer to your parent container, like so:

106 |

You can also use panels inside of other elements that have a defined with and height. A z-index will also need to be defined.

107 |

You'll also have to make sure that you give your controls (however you do them) are visible. In this example, the `.panel-body` was given `padding-left: 10%` so that the Menu button isn't running into the content of the panel.

108 |
109 |
110 | 111 | ```html 112 |
113 |
114 |
115 | Menu 116 |
117 |
118 |
119 |

Menu

120 |
121 | 126 |
127 |
128 |
129 |

You can also use panels inside of other elements that have 130 | a defined with and height.

131 |

You'll have to be responsible for making sure your controls accessible.

132 |
133 |
134 | ``` 135 |
136 | 137 | ## bootstrap-drawer components 138 | 139 | **bootstrap_drawer** was built with a Bootstrap-minded style. The classes used are very similar to the `.nav` and `.panel` classes in Bootstrap. The Bootstrap `data-api` for toggling the drawer is, likewise, built like `.collapse` and its javascript component. 140 | 141 | bootstrap-drawer does **not** (yet) have a class that expands to a navbar on bigger screens. For now, the main focus of bootstrap-drawer was to do one thing well. In a later version, there may be an additional ".drawer-navbar" class to remove the drawer on larger screens. 142 | 143 | 144 | ### Class Breakdown 145 | 146 | `.drawer` is the main class. The sizing system is based on the 12-column system of Bootstrap, using `.dw-SIZE-#COLS`. The drawer is built mobile-first, like the rest of Bootstrap, and the size in width is based on the document's fluid width (a percentage of it, based on the columns). This size becomes relative when using it inside another container. 147 | 148 | `.fold` started the menu closed (`.fold.open` starts the menu opened). This class, as well as the 149 | [javascript component](javascript.html) are built similarly to the `.collapse` components. It had to 150 | be named differently because bootstrap-drawer is folding horizontally and not collapsing vertically. 151 | 152 | ```html 153 |
154 | ... 155 |
156 | ``` 157 | 158 | `.drawer-controls` is a special drawer column made to house a toggle button for the drawer that moves with the component. It's an optional piece, since the menu can be toggled by other buttons either using the built-in `data-toggle="drawer"` or the jQuery API (`$('.drawer').drawer();`). 159 | 160 | ```html 161 |
162 |
163 | Menu 164 |
165 |
166 | ... 167 |
168 |
169 | ``` 170 |
171 | 172 | #### Drawer Contents 173 | 174 | `.drawer-contents` wraps the main parts of the drawer: `.drawer-heading`, `.drawer-body`, `.drawer-nav` / `.drawer-fullnav`, `.drawer-footer`. These classes are very similar to how Bootstrap's `.panel` inner classes work. 175 | 176 | `.drawer-nav` and `.drawer-fullnav` are already-built nav classes that are based on the `.nav.nav-pills.nav-stacked` combination of classes. The difference between the two is that `.drawer-nav` has padding on the left and right, while `.drawer-fullnav` goes the entire width of the drawer. 177 | 178 | You can use `.drawer-body` to wrap you own navigation, as well, or just include content. 179 | 180 | **DEMOS:** 181 | 182 |
183 |
184 |
185 |
186 |
187 |
188 |

.drawer-nav example

189 |
190 | 195 |
196 |
197 |
198 |
199 |
200 |
201 |
202 |
203 |
204 |

.drawer-fullnav example

205 |
206 | 211 |
212 |
213 |
214 |
215 |
216 | 217 | `.drawer-heading`, like `.panel-heading` is specially styled to be the top of the drawer. In addition, there is a `.drawer-title` class that can be put within `.drawer-heading` for a specially styled `` tag. 218 | 219 | `.drawer-footer` finishes off the components of the drawer (again, like `.panel-footer`). Additionally, by giving the `.drawer-footer` an additional `locked` class, the footer will then stick to the bottom of the drawer. This is absolutely positioned within the drawer, and you should be careful that your content does not overlap the `.drawer-footer`. -------------------------------------------------------------------------------- /docs/javascript.md: -------------------------------------------------------------------------------- 1 | ## Component jQuery API 2 | 3 | Bootstrap drawer comes with `drawer.js` to be added to the `bootstrap.js` component suite. If you're including separate components, `drawer.js` depends on `transition.js` plugin. 4 | 5 | `drawer.js` is built similarly to `collapse.js`. 6 | 7 | ---------- 8 | 9 | ### Example 10 | 11 |
12 |
13 |
14 |
15 | Button/Link Toggle Example 16 |
17 | 22 |
23 |
24 |
25 |
26 |
27 | Try the buttons over there to toggle the menu that pops out on the left! 28 |
29 |
30 |

31 | 32 |

33 |

34 | 37 |

38 |
39 |
40 |
41 |
42 | 43 | 44 | ### Usage 45 | 46 | The drawer plugin utilizes a few classes to do all the work: 47 | 48 | * `.fold` hides content 49 | * `.fold.open` shows content. 50 | * `.folding` is applied during transitions, and removed when it finishes. 51 | 52 | These classes can be found in `less/mixins/drawer-framework.less`. They are built in loops with the `.dw-SIZE-#` classes because they utilize margins based on the column width. 53 | 54 | #### Via data attributes 55 | 56 | Just add `data-toggle="drawer"` and a data-target to the element to automatically assign control of drawer element. The data-target attribute accepts a CSS selector to apply the folding animation to. Be sure to add the class `.fold` to the collapsible element. If you'd like it to default open, add the additional class `.open`. 57 | 58 | #### Via JavaScript 59 | 60 | Enable manually with: 61 | 62 | ```js 63 | $('.drawer').drawer(); 64 | ``` 65 | 66 | #### Options 67 | 68 | Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-`, as in `data-parent=""`. 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 |
Nameselectordefaultdescription
parentselectorfalseIf a selector is provided, then all collapsible elements under the specified parent will be closed when this drawer is open.
togglebooleantrueToggle the drawer element on invocation.
90 | 91 | #### Methods 92 | 93 | ##### .drawer(options) 94 | 95 | Activates your content as a drawer element. Accepts an optional options `object`. 96 | 97 | ```js 98 | $('#myDrawer').drawer({ 99 | toggle: false 100 | }); 101 | ``` 102 | 103 | ##### .drawer('toggle') 104 | 105 | Toggles a drawer element as folded or open. 106 | 107 | ##### .drawer('show') 108 | 109 | Shows drawer element as opened. 110 | 111 | ##### .drawer('hide') 112 | 113 | Hide a drawer element. 114 | 115 | #### Events 116 | 117 | drawer-bootstrap drawer class exposes drawer events (very similarly to how Bootstrap collapse) for hooking 118 | into the drawer functionality. 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 |
Event TypeDescription
show.bs.drawerThis event fires immediately when the `show` instance method is called.
shown.bs.drawerThis event is fired when a collapse element has been made visible to the user (will wait for CSS transitions to complete).
hide.bs.drawerThis event is fired immediately when the `hide` method has been called.
hidden.bs.drawerThis event is fired when a collapse element has been hidden from the user (will wait for CSS transitions to complete).
142 | 143 | ```js 144 | $('#myDrawer').on('hidden.bs.drawer', function() { 145 | // do something here... 146 | }); 147 | ``` -------------------------------------------------------------------------------- /docs/less.md: -------------------------------------------------------------------------------- 1 | ## LESS / Custom Builds 2 | 3 | If you're familiar with LESS, bootstrap-drawer has less files that you can use to either build your own custom bootstrap-drawer or directly incoroprate with other LESS files in your project. 4 | 5 | bootstrap-drawer currently uses Gulp and LESS, but it'd be great if people can contribute grunt and SASS components! Check out the repo to contribute! 6 | 7 | -------- 8 | 9 | ### Building Your Own Flavor of Drawer 10 | 11 | You'll need gulp and Node if you want to build your own version. 12 | 13 | Run `npm install` in order to get all the devDependencies from the `package.json`. 14 | 15 | Most of the tasks are outlined in `gulpfile.js`. The `gulp build` will also update the assets for `example/index.html` so you can see your changes. 16 | 17 | To customize bootstrap-drawer, just edit some of the variables in `less/drawer-variables.less` to the sizes and colors, etc. you want. Then run `gulp build` and a new `dist/css/bootstrap-drawer(.min).css` should be made just for you! Include the file right after the Bootstrap core file, and you should be good to go! 18 | 19 | Things to keep in mind: 20 | * bootstrap-drawer uses some variables (`@grid-gutter-width`, `@zindex-navbar-fixed`, `@link-color`, to 21 | name most of them), so if you're using a different `varibles.less file`, be sure to replace it in `less/bootstrap-drawer.less`. 22 | * The `.dw-SIZE-#` columns are built in LESS loops, and can change as you change the `@grid-columns` variable. If you're using 16-columns instead of 12, `less/mixins/drawer-framework.less` is built to build more columns (like `.dw-md-13`, etc.). 23 | 24 | 25 | --------- 26 | 27 | ### Using Less 28 | 29 | I am assuming for this section you are familiar with using less and the Bootstrap less source. There are files in the `less/` directory that are parallel to Bootstrap's less source files. `drawer.less` already includes its custom variable package as well as less loop framework. To include the less in your build files, you can do one of the following: 30 | 31 | #### Add to your main less file after bootstrap 32 | 33 | ```less 34 | @import "bootstrap.less"; 35 | @import "path/to/drawer.less"; 36 | 37 | /* Your styles */ 38 | ``` 39 | 40 | #### Add to bootstrap.less 41 | 42 | ```less 43 | @import "variables.less"; 44 | @import "mixins.less"; 45 | 46 | // Bootstrap Core 47 | // ... 48 | 49 | // ... etc ... 50 | 51 | // Components w/ JavaScript 52 | @import "modals.less"; 53 | @import "tooltip.less"; 54 | @import "popovers.less"; 55 | @import "carousel.less"; 56 | @import "path/to/drawer.less"; 57 | 58 | // Utility Classes 59 | // ... etc ... 60 | ``` 61 | 62 | #### Move Contents 63 | 64 | The first two lines in `less/drawer.less` can be removed and moved 65 | 66 | Feel free to move `drawer-variables.less` and `drawer-framework.less` to appropriate folders to maintain bootstrap structure. The component's variables rely on a few variables from the core bootstrap framework, likewise for the mixin framework. Be sure to simply include them after the bootstrap core variables/mixins files: 67 | 68 | * `@import "./drawer-variables";` can be put after importing `variables.less` 69 | * `@import "./mixins/drawer-framework";` can be put after importing `mixins.less` 70 | 71 | ```less 72 | @import "variables.less"; 73 | @import "path/to/drawer-variables.less" 74 | @import "mixins.less"; 75 | @import "path/to/drawer-framework.less"; 76 | 77 | // Bootstrap Core 78 | // ... 79 | 80 | // ... etc ... 81 | 82 | // Components w/ JavaScript 83 | @import "modals.less"; 84 | @import "tooltip.less"; 85 | @import "popovers.less"; 86 | @import "carousel.less"; 87 | @import "path/to/drawer.less"; 88 | 89 | // Utility Classes 90 | // ... etc ... 91 | ``` -------------------------------------------------------------------------------- /example/bootstrap-drawer.css: -------------------------------------------------------------------------------- 1 | /* ======================================================================== 2 | * bootstrap-drawer: 1.0.6 3 | * ======================================================================== 4 | */ 5 | html { 6 | min-height: 100%; 7 | height: 100%; 8 | } 9 | body.has-drawer { 10 | min-height: 100%; 11 | height: 100%; 12 | } 13 | .has-inner-drawer { 14 | position: relative; 15 | overflow: hidden; 16 | } 17 | .drawer { 18 | display: block; 19 | background-color: #f8f8f8; 20 | color: #333333; 21 | border-right: 1px solid #dfdfdf; 22 | min-height: 1px; 23 | height: 100%; 24 | top: 0; 25 | left: 0; 26 | position: fixed; 27 | z-index: 1035; 28 | -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05); 29 | box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05); 30 | } 31 | .drawer-contents, 32 | .drawer-heading, 33 | .drawer-body, 34 | .drawer-nav, 35 | .drawer-footer, 36 | .drawer ul, 37 | .drawer li { 38 | display: inherit; 39 | margin: 0; 40 | width: 100%; 41 | position: relative; 42 | } 43 | .drawer-right { 44 | left: auto; 45 | right: 0; 46 | border-right: none; 47 | border-left: 1px solid #dfdfdf; 48 | -webkit-box-shadow: 0 -1px 1px rgba(0, 0, 0, 0.05); 49 | box-shadow: 0 -1px 1px rgba(0, 0, 0, 0.05); 50 | } 51 | .drawer-inverse { 52 | background-color: #333; 53 | color: #eeeeee; 54 | border-right: 1px solid #1a1a1a; 55 | } 56 | .drawer-inverse.drawer-right { 57 | border-right: 1px solid #dfdfdf; 58 | } 59 | .drawer-inside { 60 | position: absolute; 61 | } 62 | .drawer-controls { 63 | float: right; 64 | margin-right: -16.66666667%; 65 | padding: 10px; 66 | height: 100%; 67 | position: relative; 68 | width: 16.66666667%; 69 | z-index: 500; 70 | } 71 | .drawer-contents { 72 | background-color: #f8f8f8; 73 | height: 100%; 74 | width: 100%; 75 | overflow: auto; 76 | } 77 | .drawer-right .drawer-controls { 78 | float: left; 79 | margin-left: -16.66666667%; 80 | margin-right: 0; 81 | } 82 | .drawer-heading { 83 | border-bottom: 1px solid #dfdfdf; 84 | padding: 10px 15px; 85 | color: inherit; 86 | } 87 | .drawer-title { 88 | margin-top: 0; 89 | margin-bottom: 0; 90 | } 91 | .drawer-inner-toggle { 92 | position: absolute; 93 | top: 10px; 94 | right: 10px; 95 | } 96 | .drawer-body, 97 | .drawer-nav { 98 | padding: 10px 15px; 99 | } 100 | .drawer-nav, 101 | .drawer-fullnav { 102 | padding: 10px 15px; 103 | margin-bottom: 0; 104 | list-style: none; 105 | } 106 | .drawer-nav li, 107 | .drawer-fullnav li { 108 | position: relative; 109 | margin-bottom: 5px; 110 | } 111 | .drawer-nav li a, 112 | .drawer-fullnav li a { 113 | color: #777; 114 | border-radius: 4px; 115 | position: relative; 116 | display: block; 117 | padding: 10px 15px; 118 | } 119 | .drawer-nav li.active a, 120 | .drawer-fullnav li.active a, 121 | .drawer-nav li a:hover, 122 | .drawer-fullnav li a:hover, 123 | .drawer-nav li a:focus, 124 | .drawer-fullnav li a:focus { 125 | color: #515151; 126 | text-decoration: none; 127 | background-color: #ffffff; 128 | } 129 | .drawer-fullnav { 130 | color: #fff; 131 | padding: 0; 132 | } 133 | .drawer-fullnav li { 134 | margin-bottom: 0; 135 | } 136 | .drawer-fullnav li a { 137 | border-radius: 0; 138 | } 139 | .drawer-inverse .drawer-contents { 140 | background-color: #333; 141 | } 142 | .drawer-inverse .drawer-fullnav li a, 143 | .drawer-inverse .drawer-nav li a { 144 | color: #fff; 145 | padding: 10px 15px; 146 | } 147 | .drawer-inverse .drawer-fullnav li.active a, 148 | .drawer-inverse .drawer-fullnav li a:hover, 149 | .drawer-inverse .drawer-fullnav li a:active, 150 | .drawer-inverse .drawer-nav li.active a, 151 | .drawer-inverse .drawer-nav li a:hover, 152 | .drawer-inverse .drawer-nav li a:active { 153 | color: #eeeeee; 154 | background-color: #1a1a1a; 155 | } 156 | .drawer-footer { 157 | padding: 10px 15px; 158 | } 159 | .drawer-footer.locked { 160 | position: absolute; 161 | bottom: 0; 162 | left: 0; 163 | } 164 | .dw-xs-12 { 165 | width: 100%; 166 | } 167 | .fold.dw-xs-12 { 168 | margin-left: -100%; 169 | } 170 | .drawer-right.fold.dw-xs-12 { 171 | margin-right: -100%; 172 | } 173 | .dw-xs-11 { 174 | width: 91.66666667%; 175 | } 176 | .fold.dw-xs-11 { 177 | margin-left: -91.66666667%; 178 | } 179 | .drawer-right.fold.dw-xs-11 { 180 | margin-right: -91.66666667%; 181 | } 182 | .dw-xs-10 { 183 | width: 83.33333333%; 184 | } 185 | .fold.dw-xs-10 { 186 | margin-left: -83.33333333%; 187 | } 188 | .drawer-right.fold.dw-xs-10 { 189 | margin-right: -83.33333333%; 190 | } 191 | .dw-xs-9 { 192 | width: 75%; 193 | } 194 | .fold.dw-xs-9 { 195 | margin-left: -75%; 196 | } 197 | .drawer-right.fold.dw-xs-9 { 198 | margin-right: -75%; 199 | } 200 | .dw-xs-8 { 201 | width: 66.66666667%; 202 | } 203 | .fold.dw-xs-8 { 204 | margin-left: -66.66666667%; 205 | } 206 | .drawer-right.fold.dw-xs-8 { 207 | margin-right: -66.66666667%; 208 | } 209 | .dw-xs-7 { 210 | width: 58.33333333%; 211 | } 212 | .fold.dw-xs-7 { 213 | margin-left: -58.33333333%; 214 | } 215 | .drawer-right.fold.dw-xs-7 { 216 | margin-right: -58.33333333%; 217 | } 218 | .dw-xs-6 { 219 | width: 50%; 220 | } 221 | .fold.dw-xs-6 { 222 | margin-left: -50%; 223 | } 224 | .drawer-right.fold.dw-xs-6 { 225 | margin-right: -50%; 226 | } 227 | .dw-xs-5 { 228 | width: 41.66666667%; 229 | } 230 | .fold.dw-xs-5 { 231 | margin-left: -41.66666667%; 232 | } 233 | .drawer-right.fold.dw-xs-5 { 234 | margin-right: -41.66666667%; 235 | } 236 | .dw-xs-4 { 237 | width: 33.33333333%; 238 | } 239 | .fold.dw-xs-4 { 240 | margin-left: -33.33333333%; 241 | } 242 | .drawer-right.fold.dw-xs-4 { 243 | margin-right: -33.33333333%; 244 | } 245 | .dw-xs-3 { 246 | width: 25%; 247 | } 248 | .fold.dw-xs-3 { 249 | margin-left: -25%; 250 | } 251 | .drawer-right.fold.dw-xs-3 { 252 | margin-right: -25%; 253 | } 254 | .dw-xs-2 { 255 | width: 16.66666667%; 256 | } 257 | .fold.dw-xs-2 { 258 | margin-left: -16.66666667%; 259 | } 260 | .drawer-right.fold.dw-xs-2 { 261 | margin-right: -16.66666667%; 262 | } 263 | .dw-xs-1 { 264 | width: 8.33333333%; 265 | } 266 | .fold.dw-xs-1 { 267 | margin-left: -8.33333333%; 268 | } 269 | .drawer-right.fold.dw-xs-1 { 270 | margin-right: -8.33333333%; 271 | } 272 | @media (min-width: 768px) { 273 | .dw-sm-12 { 274 | width: 100%; 275 | } 276 | .fold.dw-sm-12 { 277 | margin-left: -100%; 278 | } 279 | .drawer-right.fold.dw-sm-12 { 280 | margin-right: -100%; 281 | } 282 | .dw-sm-11 { 283 | width: 91.66666667%; 284 | } 285 | .fold.dw-sm-11 { 286 | margin-left: -91.66666667%; 287 | } 288 | .drawer-right.fold.dw-sm-11 { 289 | margin-right: -91.66666667%; 290 | } 291 | .dw-sm-10 { 292 | width: 83.33333333%; 293 | } 294 | .fold.dw-sm-10 { 295 | margin-left: -83.33333333%; 296 | } 297 | .drawer-right.fold.dw-sm-10 { 298 | margin-right: -83.33333333%; 299 | } 300 | .dw-sm-9 { 301 | width: 75%; 302 | } 303 | .fold.dw-sm-9 { 304 | margin-left: -75%; 305 | } 306 | .drawer-right.fold.dw-sm-9 { 307 | margin-right: -75%; 308 | } 309 | .dw-sm-8 { 310 | width: 66.66666667%; 311 | } 312 | .fold.dw-sm-8 { 313 | margin-left: -66.66666667%; 314 | } 315 | .drawer-right.fold.dw-sm-8 { 316 | margin-right: -66.66666667%; 317 | } 318 | .dw-sm-7 { 319 | width: 58.33333333%; 320 | } 321 | .fold.dw-sm-7 { 322 | margin-left: -58.33333333%; 323 | } 324 | .drawer-right.fold.dw-sm-7 { 325 | margin-right: -58.33333333%; 326 | } 327 | .dw-sm-6 { 328 | width: 50%; 329 | } 330 | .fold.dw-sm-6 { 331 | margin-left: -50%; 332 | } 333 | .drawer-right.fold.dw-sm-6 { 334 | margin-right: -50%; 335 | } 336 | .dw-sm-5 { 337 | width: 41.66666667%; 338 | } 339 | .fold.dw-sm-5 { 340 | margin-left: -41.66666667%; 341 | } 342 | .drawer-right.fold.dw-sm-5 { 343 | margin-right: -41.66666667%; 344 | } 345 | .dw-sm-4 { 346 | width: 33.33333333%; 347 | } 348 | .fold.dw-sm-4 { 349 | margin-left: -33.33333333%; 350 | } 351 | .drawer-right.fold.dw-sm-4 { 352 | margin-right: -33.33333333%; 353 | } 354 | .dw-sm-3 { 355 | width: 25%; 356 | } 357 | .fold.dw-sm-3 { 358 | margin-left: -25%; 359 | } 360 | .drawer-right.fold.dw-sm-3 { 361 | margin-right: -25%; 362 | } 363 | .dw-sm-2 { 364 | width: 16.66666667%; 365 | } 366 | .fold.dw-sm-2 { 367 | margin-left: -16.66666667%; 368 | } 369 | .drawer-right.fold.dw-sm-2 { 370 | margin-right: -16.66666667%; 371 | } 372 | .dw-sm-1 { 373 | width: 8.33333333%; 374 | } 375 | .fold.dw-sm-1 { 376 | margin-left: -8.33333333%; 377 | } 378 | .drawer-right.fold.dw-sm-1 { 379 | margin-right: -8.33333333%; 380 | } 381 | } 382 | @media (min-width: 992px) { 383 | .dw-md-12 { 384 | width: 100%; 385 | } 386 | .fold.dw-md-12 { 387 | margin-left: -100%; 388 | } 389 | .drawer-right.fold.dw-md-12 { 390 | margin-right: -100%; 391 | } 392 | .dw-md-11 { 393 | width: 91.66666667%; 394 | } 395 | .fold.dw-md-11 { 396 | margin-left: -91.66666667%; 397 | } 398 | .drawer-right.fold.dw-md-11 { 399 | margin-right: -91.66666667%; 400 | } 401 | .dw-md-10 { 402 | width: 83.33333333%; 403 | } 404 | .fold.dw-md-10 { 405 | margin-left: -83.33333333%; 406 | } 407 | .drawer-right.fold.dw-md-10 { 408 | margin-right: -83.33333333%; 409 | } 410 | .dw-md-9 { 411 | width: 75%; 412 | } 413 | .fold.dw-md-9 { 414 | margin-left: -75%; 415 | } 416 | .drawer-right.fold.dw-md-9 { 417 | margin-right: -75%; 418 | } 419 | .dw-md-8 { 420 | width: 66.66666667%; 421 | } 422 | .fold.dw-md-8 { 423 | margin-left: -66.66666667%; 424 | } 425 | .drawer-right.fold.dw-md-8 { 426 | margin-right: -66.66666667%; 427 | } 428 | .dw-md-7 { 429 | width: 58.33333333%; 430 | } 431 | .fold.dw-md-7 { 432 | margin-left: -58.33333333%; 433 | } 434 | .drawer-right.fold.dw-md-7 { 435 | margin-right: -58.33333333%; 436 | } 437 | .dw-md-6 { 438 | width: 50%; 439 | } 440 | .fold.dw-md-6 { 441 | margin-left: -50%; 442 | } 443 | .drawer-right.fold.dw-md-6 { 444 | margin-right: -50%; 445 | } 446 | .dw-md-5 { 447 | width: 41.66666667%; 448 | } 449 | .fold.dw-md-5 { 450 | margin-left: -41.66666667%; 451 | } 452 | .drawer-right.fold.dw-md-5 { 453 | margin-right: -41.66666667%; 454 | } 455 | .dw-md-4 { 456 | width: 33.33333333%; 457 | } 458 | .fold.dw-md-4 { 459 | margin-left: -33.33333333%; 460 | } 461 | .drawer-right.fold.dw-md-4 { 462 | margin-right: -33.33333333%; 463 | } 464 | .dw-md-3 { 465 | width: 25%; 466 | } 467 | .fold.dw-md-3 { 468 | margin-left: -25%; 469 | } 470 | .drawer-right.fold.dw-md-3 { 471 | margin-right: -25%; 472 | } 473 | .dw-md-2 { 474 | width: 16.66666667%; 475 | } 476 | .fold.dw-md-2 { 477 | margin-left: -16.66666667%; 478 | } 479 | .drawer-right.fold.dw-md-2 { 480 | margin-right: -16.66666667%; 481 | } 482 | .dw-md-1 { 483 | width: 8.33333333%; 484 | } 485 | .fold.dw-md-1 { 486 | margin-left: -8.33333333%; 487 | } 488 | .drawer-right.fold.dw-md-1 { 489 | margin-right: -8.33333333%; 490 | } 491 | } 492 | @media (min-width: 1200px) { 493 | .dw-lg-12 { 494 | width: 100%; 495 | } 496 | .fold.dw-lg-12 { 497 | margin-left: -100%; 498 | } 499 | .drawer-right.fold.dw-lg-12 { 500 | margin-right: -100%; 501 | } 502 | .dw-lg-11 { 503 | width: 91.66666667%; 504 | } 505 | .fold.dw-lg-11 { 506 | margin-left: -91.66666667%; 507 | } 508 | .drawer-right.fold.dw-lg-11 { 509 | margin-right: -91.66666667%; 510 | } 511 | .dw-lg-10 { 512 | width: 83.33333333%; 513 | } 514 | .fold.dw-lg-10 { 515 | margin-left: -83.33333333%; 516 | } 517 | .drawer-right.fold.dw-lg-10 { 518 | margin-right: -83.33333333%; 519 | } 520 | .dw-lg-9 { 521 | width: 75%; 522 | } 523 | .fold.dw-lg-9 { 524 | margin-left: -75%; 525 | } 526 | .drawer-right.fold.dw-lg-9 { 527 | margin-right: -75%; 528 | } 529 | .dw-lg-8 { 530 | width: 66.66666667%; 531 | } 532 | .fold.dw-lg-8 { 533 | margin-left: -66.66666667%; 534 | } 535 | .drawer-right.fold.dw-lg-8 { 536 | margin-right: -66.66666667%; 537 | } 538 | .dw-lg-7 { 539 | width: 58.33333333%; 540 | } 541 | .fold.dw-lg-7 { 542 | margin-left: -58.33333333%; 543 | } 544 | .drawer-right.fold.dw-lg-7 { 545 | margin-right: -58.33333333%; 546 | } 547 | .dw-lg-6 { 548 | width: 50%; 549 | } 550 | .fold.dw-lg-6 { 551 | margin-left: -50%; 552 | } 553 | .drawer-right.fold.dw-lg-6 { 554 | margin-right: -50%; 555 | } 556 | .dw-lg-5 { 557 | width: 41.66666667%; 558 | } 559 | .fold.dw-lg-5 { 560 | margin-left: -41.66666667%; 561 | } 562 | .drawer-right.fold.dw-lg-5 { 563 | margin-right: -41.66666667%; 564 | } 565 | .dw-lg-4 { 566 | width: 33.33333333%; 567 | } 568 | .fold.dw-lg-4 { 569 | margin-left: -33.33333333%; 570 | } 571 | .drawer-right.fold.dw-lg-4 { 572 | margin-right: -33.33333333%; 573 | } 574 | .dw-lg-3 { 575 | width: 25%; 576 | } 577 | .fold.dw-lg-3 { 578 | margin-left: -25%; 579 | } 580 | .drawer-right.fold.dw-lg-3 { 581 | margin-right: -25%; 582 | } 583 | .dw-lg-2 { 584 | width: 16.66666667%; 585 | } 586 | .fold.dw-lg-2 { 587 | margin-left: -16.66666667%; 588 | } 589 | .drawer-right.fold.dw-lg-2 { 590 | margin-right: -16.66666667%; 591 | } 592 | .dw-lg-1 { 593 | width: 8.33333333%; 594 | } 595 | .fold.dw-lg-1 { 596 | margin-left: -8.33333333%; 597 | } 598 | .drawer-right.fold.dw-lg-1 { 599 | margin-right: -8.33333333%; 600 | } 601 | } 602 | .fold { 603 | margin-right: 0; 604 | } 605 | .folding { 606 | height: 100%; 607 | -webkit-transition-property: margin-left; 608 | transition-property: margin-left; 609 | -webkit-transition-duration: 0.35s; 610 | transition-duration: 0.35s; 611 | -webkit-transition-timing-function: ease; 612 | transition-timing-function: ease; 613 | } 614 | .drawer-right.fold { 615 | margin-left: 0; 616 | } 617 | .drawer-right.folding { 618 | -webkit-transition-property: margin-right; 619 | transition-property: margin-right; 620 | } 621 | .fold.open, 622 | .drawer-right.fold.open { 623 | margin-left: 0; 624 | margin-right: 0; 625 | } 626 | -------------------------------------------------------------------------------- /example/docs.js: -------------------------------------------------------------------------------- 1 | (function($, hljs) { 2 | var page = window.location.pathname.split("/").pop(); 3 | 4 | hljs.initHighlightingOnLoad(); 5 | 6 | $('#doc-nav li').each(function() { 7 | var href = $(this).find('a').attr('href'); 8 | 9 | if((page === href) || (page.length <= 0 && href === 'index.html')) { 10 | $(this).addClass('active'); 11 | } 12 | }); 13 | 14 | $('#doc-nav a').click(function() { 15 | var href = $(this).attr('href'); 16 | 17 | if((page === href) || (page.length <= 0 && href === 'index.html')) { 18 | $('#docDrawer').drawer('hide'); 19 | return false; 20 | } 21 | }); 22 | 23 | })(jQuery || {}, hljs); -------------------------------------------------------------------------------- /example/drawer.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/clineamb/bootstrap-drawer/4a4769f38f15b078c8d1a5634e5741ace6198a22/example/drawer.js -------------------------------------------------------------------------------- /example/github.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | github.com style (c) Vasily Polovnyov 4 | 5 | */ 6 | 7 | .hljs { 8 | display: block; 9 | overflow-x: auto; 10 | padding: 0.5em; 11 | color: #333; 12 | background: #f8f8f8; 13 | -webkit-text-size-adjust: none; 14 | } 15 | 16 | .hljs-comment, 17 | .diff .hljs-header, 18 | .hljs-javadoc { 19 | color: #998; 20 | font-style: italic; 21 | } 22 | 23 | .hljs-keyword, 24 | .css .rule .hljs-keyword, 25 | .hljs-winutils, 26 | .nginx .hljs-title, 27 | .hljs-subst, 28 | .hljs-request, 29 | .hljs-status { 30 | color: #333; 31 | font-weight: bold; 32 | } 33 | 34 | .hljs-number, 35 | .hljs-hexcolor, 36 | .ruby .hljs-constant { 37 | color: #008080; 38 | } 39 | 40 | .hljs-string, 41 | .hljs-tag .hljs-value, 42 | .hljs-phpdoc, 43 | .hljs-dartdoc, 44 | .tex .hljs-formula { 45 | color: #d14; 46 | } 47 | 48 | .hljs-title, 49 | .hljs-id, 50 | .scss .hljs-preprocessor { 51 | color: #900; 52 | font-weight: bold; 53 | } 54 | 55 | .hljs-list .hljs-keyword, 56 | .hljs-subst { 57 | font-weight: normal; 58 | } 59 | 60 | .hljs-class .hljs-title, 61 | .hljs-type, 62 | .vhdl .hljs-literal, 63 | .tex .hljs-command { 64 | color: #458; 65 | font-weight: bold; 66 | } 67 | 68 | .hljs-tag, 69 | .hljs-tag .hljs-title, 70 | .hljs-rules .hljs-property, 71 | .django .hljs-tag .hljs-keyword { 72 | color: #000080; 73 | font-weight: normal; 74 | } 75 | 76 | .hljs-attribute, 77 | .hljs-variable, 78 | .lisp .hljs-body { 79 | color: #008080; 80 | } 81 | 82 | .hljs-regexp { 83 | color: #009926; 84 | } 85 | 86 | .hljs-symbol, 87 | .ruby .hljs-symbol .hljs-string, 88 | .lisp .hljs-keyword, 89 | .clojure .hljs-keyword, 90 | .scheme .hljs-keyword, 91 | .tex .hljs-special, 92 | .hljs-prompt { 93 | color: #990073; 94 | } 95 | 96 | .hljs-built_in { 97 | color: #0086b3; 98 | } 99 | 100 | .hljs-preprocessor, 101 | .hljs-pragma, 102 | .hljs-pi, 103 | .hljs-doctype, 104 | .hljs-shebang, 105 | .hljs-cdata { 106 | color: #999; 107 | font-weight: bold; 108 | } 109 | 110 | .hljs-deletion { 111 | background: #fdd; 112 | } 113 | 114 | .hljs-addition { 115 | background: #dfd; 116 | } 117 | 118 | .diff .hljs-change { 119 | background: #0086b3; 120 | } 121 | 122 | .hljs-chunk { 123 | color: #aaa; 124 | } 125 | -------------------------------------------------------------------------------- /example/highlight.pack.js: -------------------------------------------------------------------------------- 1 | !function(e){"undefined"!=typeof exports?e(exports):(window.hljs=e({}),"function"==typeof define&&define.amd&&define([],function(){return window.hljs}))}(function(e){function n(e){return e.replace(/&/gm,"&").replace(//gm,">")}function t(e){return e.nodeName.toLowerCase()}function r(e,n){var t=e&&e.exec(n);return t&&0==t.index}function a(e){var n=(e.className+" "+(e.parentNode?e.parentNode.className:"")).split(/\s+/);return n=n.map(function(e){return e.replace(/^lang(uage)?-/,"")}),n.filter(function(e){return N(e)||/no(-?)highlight/.test(e)})[0]}function o(e,n){var t={};for(var r in e)t[r]=e[r];if(n)for(var r in n)t[r]=n[r];return t}function i(e){var n=[];return function r(e,a){for(var o=e.firstChild;o;o=o.nextSibling)3==o.nodeType?a+=o.nodeValue.length:1==o.nodeType&&(n.push({event:"start",offset:a,node:o}),a=r(o,a),t(o).match(/br|hr|img|input/)||n.push({event:"stop",offset:a,node:o}));return a}(e,0),n}function c(e,r,a){function o(){return e.length&&r.length?e[0].offset!=r[0].offset?e[0].offset"}function c(e){l+=""}function u(e){("start"==e.event?i:c)(e.node)}for(var s=0,l="",f=[];e.length||r.length;){var g=o();if(l+=n(a.substr(s,g[0].offset-s)),s=g[0].offset,g==e){f.reverse().forEach(c);do u(g.splice(0,1)[0]),g=o();while(g==e&&g.length&&g[0].offset==s);f.reverse().forEach(i)}else"start"==g[0].event?f.push(g[0].node):f.pop(),u(g.splice(0,1)[0])}return l+n(a.substr(s))}function u(e){function n(e){return e&&e.source||e}function t(t,r){return RegExp(n(t),"m"+(e.cI?"i":"")+(r?"g":""))}function r(a,i){if(!a.compiled){if(a.compiled=!0,a.k=a.k||a.bK,a.k){var c={},u=function(n,t){e.cI&&(t=t.toLowerCase()),t.split(" ").forEach(function(e){var t=e.split("|");c[t[0]]=[n,t[1]?Number(t[1]):1]})};"string"==typeof a.k?u("keyword",a.k):Object.keys(a.k).forEach(function(e){u(e,a.k[e])}),a.k=c}a.lR=t(a.l||/\b[A-Za-z0-9_]+\b/,!0),i&&(a.bK&&(a.b="\\b("+a.bK.split(" ").join("|")+")\\b"),a.b||(a.b=/\B|\b/),a.bR=t(a.b),a.e||a.eW||(a.e=/\B|\b/),a.e&&(a.eR=t(a.e)),a.tE=n(a.e)||"",a.eW&&i.tE&&(a.tE+=(a.e?"|":"")+i.tE)),a.i&&(a.iR=t(a.i)),void 0===a.r&&(a.r=1),a.c||(a.c=[]);var s=[];a.c.forEach(function(e){e.v?e.v.forEach(function(n){s.push(o(e,n))}):s.push("self"==e?a:e)}),a.c=s,a.c.forEach(function(e){r(e,a)}),a.starts&&r(a.starts,i);var l=a.c.map(function(e){return e.bK?"\\.?("+e.b+")\\.?":e.b}).concat([a.tE,a.i]).map(n).filter(Boolean);a.t=l.length?t(l.join("|"),!0):{exec:function(){return null}}}}r(e)}function s(e,t,a,o){function i(e,n){for(var t=0;t";return o+=e+'">',o+n+i}function d(){if(!w.k)return n(y);var e="",t=0;w.lR.lastIndex=0;for(var r=w.lR.exec(y);r;){e+=n(y.substr(t,r.index-t));var a=g(w,r);a?(B+=a[1],e+=p(a[0],n(r[0]))):e+=n(r[0]),t=w.lR.lastIndex,r=w.lR.exec(y)}return e+n(y.substr(t))}function h(){if(w.sL&&!R[w.sL])return n(y);var e=w.sL?s(w.sL,y,!0,L[w.sL]):l(y);return w.r>0&&(B+=e.r),"continuous"==w.subLanguageMode&&(L[w.sL]=e.top),p(e.language,e.value,!1,!0)}function v(){return void 0!==w.sL?h():d()}function b(e,t){var r=e.cN?p(e.cN,"",!0):"";e.rB?(M+=r,y=""):e.eB?(M+=n(t)+r,y=""):(M+=r,y=t),w=Object.create(e,{parent:{value:w}})}function m(e,t){if(y+=e,void 0===t)return M+=v(),0;var r=i(t,w);if(r)return M+=v(),b(r,t),r.rB?0:t.length;var a=c(w,t);if(a){var o=w;o.rE||o.eE||(y+=t),M+=v();do w.cN&&(M+=""),B+=w.r,w=w.parent;while(w!=a.parent);return o.eE&&(M+=n(t)),y="",a.starts&&b(a.starts,""),o.rE?0:t.length}if(f(t,w))throw new Error('Illegal lexeme "'+t+'" for mode "'+(w.cN||"")+'"');return y+=t,t.length||1}var x=N(e);if(!x)throw new Error('Unknown language: "'+e+'"');u(x);for(var w=o||x,L={},M="",k=w;k!=x;k=k.parent)k.cN&&(M=p(k.cN,"",!0)+M);var y="",B=0;try{for(var C,j,I=0;;){if(w.t.lastIndex=I,C=w.t.exec(t),!C)break;j=m(t.substr(I,C.index-I),C[0]),I=C.index+j}m(t.substr(I));for(var k=w;k.parent;k=k.parent)k.cN&&(M+="");return{r:B,value:M,language:e,top:w}}catch(A){if(-1!=A.message.indexOf("Illegal"))return{r:0,value:n(t)};throw A}}function l(e,t){t=t||E.languages||Object.keys(R);var r={r:0,value:n(e)},a=r;return t.forEach(function(n){if(N(n)){var t=s(n,e,!1);t.language=n,t.r>a.r&&(a=t),t.r>r.r&&(a=r,r=t)}}),a.language&&(r.second_best=a),r}function f(e){return E.tabReplace&&(e=e.replace(/^((<[^>]+>|\t)+)/gm,function(e,n){return n.replace(/\t/g,E.tabReplace)})),E.useBR&&(e=e.replace(/\n/g,"
")),e}function g(e,n,t){var r=n?x[n]:t,a=[e.trim()];return e.match(/(\s|^)hljs(\s|$)/)||a.push("hljs"),r&&a.push(r),a.join(" ").trim()}function p(e){var n=a(e);if(!/no(-?)highlight/.test(n)){var t;E.useBR?(t=document.createElementNS("http://www.w3.org/1999/xhtml","div"),t.innerHTML=e.innerHTML.replace(/\n/g,"").replace(//g,"\n")):t=e;var r=t.textContent,o=n?s(n,r,!0):l(r),u=i(t);if(u.length){var p=document.createElementNS("http://www.w3.org/1999/xhtml","div");p.innerHTML=o.value,o.value=c(u,i(p),r)}o.value=f(o.value),e.innerHTML=o.value,e.className=g(e.className,n,o.language),e.result={language:o.language,re:o.r},o.second_best&&(e.second_best={language:o.second_best.language,re:o.second_best.r})}}function d(e){E=o(E,e)}function h(){if(!h.called){h.called=!0;var e=document.querySelectorAll("pre code");Array.prototype.forEach.call(e,p)}}function v(){addEventListener("DOMContentLoaded",h,!1),addEventListener("load",h,!1)}function b(n,t){var r=R[n]=t(e);r.aliases&&r.aliases.forEach(function(e){x[e]=n})}function m(){return Object.keys(R)}function N(e){return R[e]||R[x[e]]}var E={classPrefix:"hljs-",tabReplace:null,useBR:!1,languages:void 0},R={},x={};return e.highlight=s,e.highlightAuto=l,e.fixMarkup=f,e.highlightBlock=p,e.configure=d,e.initHighlighting=h,e.initHighlightingOnLoad=v,e.registerLanguage=b,e.listLanguages=m,e.getLanguage=N,e.inherit=o,e.IR="[a-zA-Z][a-zA-Z0-9_]*",e.UIR="[a-zA-Z_][a-zA-Z0-9_]*",e.NR="\\b\\d+(\\.\\d+)?",e.CNR="(\\b0[xX][a-fA-F0-9]+|(\\b\\d+(\\.\\d*)?|\\.\\d+)([eE][-+]?\\d+)?)",e.BNR="\\b(0b[01]+)",e.RSR="!|!=|!==|%|%=|&|&&|&=|\\*|\\*=|\\+|\\+=|,|-|-=|/=|/|:|;|<<|<<=|<=|<|===|==|=|>>>=|>>=|>=|>>>|>>|>|\\?|\\[|\\{|\\(|\\^|\\^=|\\||\\|=|\\|\\||~",e.BE={b:"\\\\[\\s\\S]",r:0},e.ASM={cN:"string",b:"'",e:"'",i:"\\n",c:[e.BE]},e.QSM={cN:"string",b:'"',e:'"',i:"\\n",c:[e.BE]},e.PWM={b:/\b(a|an|the|are|I|I'm|isn't|don't|doesn't|won't|but|just|should|pretty|simply|enough|gonna|going|wtf|so|such)\b/},e.CLCM={cN:"comment",b:"//",e:"$",c:[e.PWM]},e.CBCM={cN:"comment",b:"/\\*",e:"\\*/",c:[e.PWM]},e.HCM={cN:"comment",b:"#",e:"$",c:[e.PWM]},e.NM={cN:"number",b:e.NR,r:0},e.CNM={cN:"number",b:e.CNR,r:0},e.BNM={cN:"number",b:e.BNR,r:0},e.CSSNM={cN:"number",b:e.NR+"(%|em|ex|ch|rem|vw|vh|vmin|vmax|cm|mm|in|pt|pc|px|deg|grad|rad|turn|s|ms|Hz|kHz|dpi|dpcm|dppx)?",r:0},e.RM={cN:"regexp",b:/\//,e:/\/[gimuy]*/,i:/\n/,c:[e.BE,{b:/\[/,e:/\]/,r:0,c:[e.BE]}]},e.TM={cN:"title",b:e.IR,r:0},e.UTM={cN:"title",b:e.UIR,r:0},e});hljs.registerLanguage("xml",function(){var t="[A-Za-z0-9\\._:-]+",e={b:/<\?(php)?(?!\w)/,e:/\?>/,sL:"php",subLanguageMode:"continuous"},c={eW:!0,i:/]+/}]}]}]};return{aliases:["html","xhtml","rss","atom","xsl","plist"],cI:!0,c:[{cN:"doctype",b:"",r:10,c:[{b:"\\[",e:"\\]"}]},{cN:"comment",b:"",r:10},{cN:"cdata",b:"<\\!\\[CDATA\\[",e:"\\]\\]>",r:10},{cN:"tag",b:"|$)",e:">",k:{title:"style"},c:[c],starts:{e:"",rE:!0,sL:"css"}},{cN:"tag",b:"|$)",e:">",k:{title:"script"},c:[c],starts:{e:"",rE:!0,sL:"javascript"}},e,{cN:"pi",b:/<\?\w+/,e:/\?>/,r:10},{cN:"tag",b:"",c:[{cN:"title",b:/[^ \/><\n\t]+/,r:0},c]}]}});hljs.registerLanguage("css",function(e){var c="[a-zA-Z-][a-zA-Z0-9_-]*",a={cN:"function",b:c+"\\(",rB:!0,eE:!0,e:"\\("};return{cI:!0,i:"[=/|']",c:[e.CBCM,{cN:"id",b:"\\#[A-Za-z0-9_-]+"},{cN:"class",b:"\\.[A-Za-z0-9_-]+",r:0},{cN:"attr_selector",b:"\\[",e:"\\]",i:"$"},{cN:"pseudo",b:":(:)?[a-zA-Z0-9\\_\\-\\+\\(\\)\\\"\\']+"},{cN:"at_rule",b:"@(font-face|page)",l:"[a-z-]+",k:"font-face page"},{cN:"at_rule",b:"@",e:"[{;]",c:[{cN:"keyword",b:/\S+/},{b:/\s/,eW:!0,eE:!0,r:0,c:[a,e.ASM,e.QSM,e.CSSNM]}]},{cN:"tag",b:c,r:0},{cN:"rules",b:"{",e:"}",i:"[^\\s]",r:0,c:[e.CBCM,{cN:"rule",b:"[^\\s]",rB:!0,e:";",eW:!0,c:[{cN:"attribute",b:"[A-Z\\_\\.\\-]+",e:":",eE:!0,i:"[^\\s]",starts:{cN:"value",eW:!0,eE:!0,c:[a,e.CSSNM,e.QSM,e.ASM,e.CBCM,{cN:"hexcolor",b:"#[0-9A-Fa-f]+"},{cN:"important",b:"!important"}]}}]}]}]}});hljs.registerLanguage("javascript",function(r){return{aliases:["js"],k:{keyword:"in if for while finally var new function do return void else break catch instanceof with throw case default try this switch continue typeof delete let yield const class",literal:"true false null undefined NaN Infinity",built_in:"eval isFinite isNaN parseFloat parseInt decodeURI decodeURIComponent encodeURI encodeURIComponent escape unescape Object Function Boolean Error EvalError InternalError RangeError ReferenceError StopIteration SyntaxError TypeError URIError Number Math Date String RegExp Array Float32Array Float64Array Int16Array Int32Array Int8Array Uint16Array Uint32Array Uint8Array Uint8ClampedArray ArrayBuffer DataView JSON Intl arguments require module console window document"},c:[{cN:"pi",r:10,v:[{b:/^\s*('|")use strict('|")/},{b:/^\s*('|")use asm('|")/}]},r.ASM,r.QSM,r.CLCM,r.CBCM,r.CNM,{b:"("+r.RSR+"|\\b(case|return|throw)\\b)\\s*",k:"return throw case",c:[r.CLCM,r.CBCM,r.RM,{b:/;/,r:0,sL:"xml"}],r:0},{cN:"function",bK:"function",e:/\{/,eE:!0,c:[r.inherit(r.TM,{b:/[A-Za-z$_][0-9A-Za-z$_]*/}),{cN:"params",b:/\(/,e:/\)/,c:[r.CLCM,r.CBCM],i:/["'\(]/}],i:/\[|%/},{b:/\$[(.]/},{b:"\\."+r.IR,r:0}]}}); -------------------------------------------------------------------------------- /example/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | bootstrap-drawer example 10 | 11 | 12 | 13 | 14 | 15 | 25 | 26 | 27 |
28 |
29 | Menu 30 |
31 |
32 |
33 |

Menu

34 |
35 | 40 |
41 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 42 | tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 43 | quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 44 | consequat.

45 | A Regular Link 46 |
47 |
48 | © Caroline Amaba 49 |
50 |
51 |
52 |
53 |
54 |

Bootstrap Off-Canvas

55 |

The more common name for a drawer menu, I learned, is "off-canvas"; but, that name was taken for other packages that also did this. Even so, the current bootstrap package (3.2.2) doesn't have any off-canvas elements by default even though it is becoming a growing mobile design trend. Granted, this might change in the future, but - hey - I made this for now.

56 |

This page contains a basic example of how to use the full page. See the documentation page for more details and more examples!

57 |

If you have any issues or questions, please check out out the repo and drop an issue. 58 |

The toggle below uses the programmatic javascript API to help demo that feature.

59 |

Another Toggle!

60 |
61 | 62 |
63 |
64 |
65 | Menu 66 |
67 |
68 |
69 |

Menu

70 |
71 | 76 |
77 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 78 | tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 79 | quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 80 | consequat.

81 | A Regular Link 82 |
83 |
84 | © Caroline Amaba 85 |
86 |
87 |
88 |
89 |

You can also use panels inside of other elements that have 90 | a defined with and height.

91 |

You'll have to be responsible for making sure your controls accessible.

92 |
93 |
94 |
95 | 96 | 97 | 98 | 99 | 107 | 108 | 109 | -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | // --- bootstrap.offcanvas gulpfile 2 | var gulp = require('gulp'), 3 | less = require('gulp-less'), 4 | uglify = require('gulp-uglify'), 5 | rename = require('gulp-rename'), 6 | markdown = require('gulp-markdown'), 7 | through2 = require('through2'), 8 | fs = require('fs') 9 | ; 10 | 11 | gulp.task("build", ['less', 'less.min', 'js', 'js.min', 'example']); 12 | 13 | gulp.task('example', function() { 14 | gulp.src([ 15 | "./dist/js/drawer.js", 16 | "./bower_components/bootstrap/dist/css/bootstrap.min.css", 17 | "./bower_components/bootstrap/dist/js/bootstrap.min.js" 18 | ]) 19 | .pipe(gulp.dest("./example")) 20 | ; 21 | }); 22 | 23 | gulp.task("less", function() { 24 | gulp.src("./less/bootstrap-drawer.less") 25 | .pipe(less({ 26 | paths: ["./less"] 27 | })) 28 | .pipe(gulp.dest("./example")) 29 | ; 30 | 31 | gulp.src("./less/bootstrap-drawer.less") 32 | .pipe(less({ 33 | paths: ["./less"], 34 | debug: true 35 | })) 36 | .pipe(gulp.dest("./dist/css")) 37 | ; 38 | }); 39 | 40 | gulp.task("less.min", function() { 41 | gulp.src("./less/bootstrap-drawer.less") 42 | .pipe(less({ 43 | paths: ["./less"], 44 | compress: true 45 | })) 46 | .pipe(rename("bootstrap-drawer.min.css")) 47 | .pipe(gulp.dest("./dist/css")) 48 | ; 49 | }); 50 | 51 | gulp.task('js', function() { 52 | gulp.src("./js/*.js") 53 | .pipe(gulp.dest("./dist/js")) 54 | ; 55 | 56 | gulp.src("./js/*.js") 57 | .pipe(gulp.dest("./example")) 58 | ; 59 | }); 60 | 61 | gulp.task('js.min', function() { 62 | gulp.src("./js/*.js") 63 | .pipe(uglify()) 64 | .pipe(rename({extname: ".min.js"})) 65 | .pipe(gulp.dest("./dist/js")) 66 | ; 67 | }); 68 | 69 | gulp.task('docs.less', function() { 70 | gulp.src("./less/drawer-docs.less") 71 | .pipe(less({compress: true})) 72 | .pipe(gulp.dest("./example")) 73 | ; 74 | }); 75 | 76 | gulp.task('docs.md', function() { 77 | gulp.src("./docs/*.md") 78 | .pipe(markdown()) 79 | .pipe(gulp.dest("./docs/html")) 80 | }); 81 | 82 | gulp.task('docs', ['docs.less', 'docs.md'], function() { 83 | var header = fs.readFileSync("./docs/_header.htm") 84 | , footer = fs.readFileSync("./docs/_footer.htm") 85 | ; 86 | 87 | gulp.src("./docs/html/*.html") 88 | .pipe(through2.obj(function(file, enc, cb){ 89 | 90 | if (file.isNull()) { 91 | // return empty file 92 | cb(null); 93 | } 94 | 95 | if (file.isStream()) { 96 | return callback(new gutil.PluginError(PLUGIN_NAME, 'No stream support.')); 97 | } 98 | 99 | file.contents = Buffer.concat([ 100 | header, file.contents, footer 101 | ]); 102 | 103 | cb(null, file); 104 | })) 105 | .pipe(gulp.dest("./")) 106 | ; 107 | }); -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | bootstrap-drawer documentation 10 | 11 | 12 | 13 | 14 | 15 | 25 | 26 | 27 |
28 |
29 | 30 |
31 |
32 |
33 |

bootstrap-drawer

34 |
35 |
36 |   37 | 38 |
39 |
40 |

Basics

41 |
42 | 48 |
49 |

Other Links

50 |
51 | 57 |
58 | © 2015 Caroline Amaba 59 |
60 |
61 |
62 |
63 |
64 |
65 |

bootstrap-drawer

66 |

bootstrap-drawer is a Bootstrap add-on that gives you an off-canvas/drawer element to your page or container! Check it out by clicking the toggle in the top-left corner!

67 |
68 |
69 |
70 |

What Is It?

71 |

bootstrap-drawer is a Bootstrap add-on/plugin that, in Bootstrap style, adds an "off-canvas" element to your pages and containers. We call it a "drawer" in these parts.*

72 |

I've looked around for fast-and-easy ways of implementing this constantly (and consistently), and I've had to rebuild it a few times. Tired of doing this, I created this! I imagine there's a lot of people like me looking for something like this, especially one that easily works with their front-end framework of choice, Bootstrap.

73 |

* Mostly because "bootstrap-offcanvas" was taken, and I've always referred to it as a mobile "drawer".

74 |
75 |

Requirements

76 |

Bootstrap is required for this plugin, since bootstrap-drawer is built on top of the framework. (Thus, jQuery is also required.)

77 |

Download

78 |

bower install bootstrap-drawer or npm install bootstrap-drawer

79 |

You can also find all the release on the GitHub repo releases page. For your convenience, here are some links to the latest releases:

80 |

Get Latest Vesion (1.0.5) 81 | Download bootstrap-drawer-1.0.5.zip

82 |
83 |

Basic Setup

84 |

If you simply just want to quickly use bootstrap-drawer with Bootstrap, you just need to include dist/bootstrap-drawer.css after Bootstrap, and then include any other files after that.

85 | 
<html>
 86 |     <head>
 87 |         <link rel="stylesheet" type="text/css" href="bootstrap.min.css">
 88 |         <link rel="stylesheet" type="text/css" href="bootstrap-drawer.min.css">
 89 |         <link rel="stylesheet" type="text/css" href="YOUR_OTHER_STYLES.css">
 90 |     </head>
 91 |     <body class="has-canvas">
 92 |         <!-- Off Canvas & other HTML here -->
 93 |         <script src="jquery.min.js"></script>
 94 |         <script src="bootstrap.min.js"></script>
 95 |         <script src="drawer.min.js"></script>
 96 |         <script src="YOUR_CUSTOM_JS.js"></script>
 97 |     </body>
 98 | </html>
 99 |
100 |

Basic Usage

101 |

Full Page Drawer

102 |

To get a simple, full-page drawer, like the one here in the docs, simply add .has-drawer to your body, and add the .drawer container like so:

103 | 
<body class="has-drawer"> <!-- add this class to your body for proper sizing -->
104 |     <div id="drawerExample" class="drawer dw-xs-10 dw-sm-6 dw-md-4 fold" aria-labelledby="drawerExample">
105 |         <div class="drawer-controls">
106 |             <a href="#drawerExample" data-toggle="drawer" aria-foldedopen="false" aria-controls="drawerExample" class="btn btn-primary btn-sm">Menu</a>
107 |         </div>
108 |         <div class="drawer-contents">
109 |             <div class="drawer-heading">
110 |                 <h2 class="drawer-title">Menu</h2>
111 |             </div>
112 |             <div class="drawer-body">
113 |                 <p>
114 |                     This is a properly padded container for content in the
115 |                     drawer that isn't a navigation.
116 |                 </p>
117 |                 <a href="#">A Regular Link</a>
118 |             </div>
119 |             <ul class="drawer-nav">
120 |                 <li role="presentation" class="active"><a href="#">Home</a></li>
121 |                 <li role="presentation"><a href="#">Profile</a></li>
122 |                 <li role="presentation"><a href="#">Messages</a></li>
123 |             </ul>
124 |             <div class="drawer-footer">
125 |                 <small>&copy; Caroline Amaba</small>
126 |             </div>
127 |         </div>
128 |     </div>
129 |     <div class="container">
130 |         <!-- content as per usual -->
131 |     </div>
132 | </body>
133 |
134 |

Container-nested Drawer

135 |
136 |
137 |
138 | Menu 139 |
140 |
141 |
142 |

Menu

143 |
144 | 149 |
150 |
151 |
152 |

You can also nest the drawer in a block container by adding the .drawer-inside class to .drawer and adding .has-inner-drawer to your parent container, like so:

153 |

You can also use panels inside of other elements that have a defined with and height. A z-index will also need to be defined.

154 |

You'll also have to make sure that you give your controls (however you do them) are visible. In this example, the .panel-body was given padding-left: 10% so that the Menu button isn't running into the content of the panel.

155 |
156 |
157 | 158 | 
<div class="panel panel-default has-inner-drawer">
159 |     <div id="drawerExample2" class="drawer drawer-inside dw-xs-5 fold" aria-labelledby="drawerExample2">
160 |         <div class="drawer-controls">
161 |             <a href="#drawerExample2" data-toggle="drawer" href="#drawerExample2" aria-foldedopen="false" aria-controls="drawerExample2" class="btn btn-primary btn-sm">Menu</a>
162 |         </div>
163 |         <div class="drawer-contents">
164 |             <div class="drawer-heading">
165 |                 <h2 class="drawer-title">Menu</h2>
166 |             </div>
167 |             <ul class="drawer-nav">
168 |                 <li role="presentation" class="active"><a href="#">Link</a></li>
169 |                 <li role="presentation"><a href="#">Link</a></li>
170 |                 <li role="presentation"><a href="#">Link</a></li>
171 |             </ul>
172 |         </div>
173 |     </div>
174 |     <div class="panel-body" style="padding-left: 10%">
175 |         <p>You can also use panels inside of other elements that have
176 |         a defined with and height.</p>
177 |         <p>You'll have to be responsible for making sure your controls accessible.</p>
178 |     </div>
179 | </div>
180 |
181 |


182 |

bootstrap-drawer components

183 |

bootstrap_drawer was built with a Bootstrap-minded style. The classes used are very similar to the .nav and .panel classes in Bootstrap. The Bootstrap data-api for toggling the drawer is, likewise, built like .collapse and its javascript component.

184 |

bootstrap-drawer does not (yet) have a class that expands to a navbar on bigger screens. For now, the main focus of bootstrap-drawer was to do one thing well. In a later version, there may be an additional ".drawer-navbar" class to remove the drawer on larger screens.

185 |

Class Breakdown

186 |

.drawer is the main class. The sizing system is based on the 12-column system of Bootstrap, using .dw-SIZE-#COLS. The drawer is built mobile-first, like the rest of Bootstrap, and the size in width is based on the document's fluid width (a percentage of it, based on the columns). This size becomes relative when using it inside another container.

187 |

.fold started the menu closed (.fold.open starts the menu opened). This class, as well as the 188 | javascript component are built similarly to the .collapse components. It had to 189 | be named differently because bootstrap-drawer is folding horizontally and not collapsing vertically.

190 | 
<div class="drawer dw-xs-10 dw-sm-6 dw-md-4 fold">
191 |     ...
192 | </div>
193 |
194 |

.drawer-controls is a special drawer column made to house a toggle button for the drawer that moves with the component. It's an optional piece, since the menu can be toggled by other buttons either using the built-in data-toggle="drawer" or the jQuery API ($('.drawer').drawer();).

195 | 
<div id="drawerExample2" class="drawer dw-xs-5 fold" aria-labelledby="drawerExample2">
196 |     <div class="drawer-controls">
197 |         <a href="#drawerExample2" data-toggle="drawer" href="#drawerExample2" aria-foldedopen="false" aria-controls="drawerExample2" class="btn btn-primary btn-sm">Menu</a>
198 |     </div>
199 |     <div class="drawer-contents">
200 |         ...
201 |     </div>
202 | </div>
203 |
204 |


205 |

Drawer Contents

206 |

.drawer-contents wraps the main parts of the drawer: .drawer-heading, .drawer-body, .drawer-nav / .drawer-fullnav, .drawer-footer. These classes are very similar to how Bootstrap's .panel inner classes work.

207 |

.drawer-nav and .drawer-fullnav are already-built nav classes that are based on the .nav.nav-pills.nav-stacked combination of classes. The difference between the two is that .drawer-nav has padding on the left and right, while .drawer-fullnav goes the entire width of the drawer.

208 |

You can use .drawer-body to wrap you own navigation, as well, or just include content.

209 |

DEMOS:

210 |
211 |
212 |
213 |
214 |
215 |
216 |

.drawer-nav example

217 |
218 | 223 |
224 |
225 |
226 |
227 |
228 |
229 |
230 |
231 |
232 |

.drawer-fullnav example

233 |
234 | 239 |
240 |
241 |
242 |
243 |
244 | 245 |

.drawer-heading, like .panel-heading is specially styled to be the top of the drawer. In addition, there is a .drawer-title class that can be put within .drawer-heading for a specially styled <h#> tag.

246 |

.drawer-footer finishes off the components of the drawer (again, like .panel-footer). Additionally, by giving the .drawer-footer an additional locked class, the footer will then stick to the bottom of the drawer. This is absolutely positioned within the drawer, and you should be careful that your content does not overlap the .drawer-footer.

247 | 250 |
251 | 252 | 253 | 254 | 255 | 256 | 257 | -------------------------------------------------------------------------------- /javascript.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | bootstrap-drawer documentation 10 | 11 | 12 | 13 | 14 | 15 | 25 | 26 | 27 |
28 |
29 | 30 |
31 |
32 |
33 |

bootstrap-drawer

34 |
35 |
36 |   37 | 38 |
39 |
40 |

Basics

41 |
42 | 48 |
49 |

Other Links

50 |
51 | 57 |
58 | © 2015 Caroline Amaba 59 |
60 |
61 |
62 |
63 |
64 |
65 |

bootstrap-drawer

66 |

bootstrap-drawer is a Bootstrap add-on that gives you an off-canvas/drawer element to your page or container! Check it out by clicking the toggle in the top-left corner!

67 |
68 |
69 |
70 |

Component jQuery API

71 |

Bootstrap drawer comes with drawer.js to be added to the bootstrap.js component suite. If you're including separate components, drawer.js depends on transition.js plugin.

72 |

drawer.js is built similarly to collapse.js.

73 |
74 |

Example

75 |
76 |
77 |
78 |
79 | Button/Link Toggle Example 80 |
81 | 86 |
87 |
88 |
89 |
90 |
91 | Try the buttons over there to toggle the menu that pops out on the left! 92 |
93 |
94 |

95 | 96 |

97 |

98 | 101 |

102 |
103 |
104 |
105 |
106 | 107 | 108 |

Usage

109 |

The drawer plugin utilizes a few classes to do all the work:

110 |
    111 |
  • .fold hides content
    • 112 |
  • .fold.open shows content.
    • 113 |
  • .folding is applied during transitions, and removed when it finishes.
    • 114 |
115 |

These classes can be found in less/mixins/drawer-framework.less. They are built in loops with the .dw-SIZE-# classes because they utilize margins based on the column width.

116 |

Via data attributes

117 |

Just add data-toggle="drawer" and a data-target to the element to automatically assign control of drawer element. The data-target attribute accepts a CSS selector to apply the folding animation to. Be sure to add the class .fold to the collapsible element. If you'd like it to default open, add the additional class .open.

118 |

Via JavaScript

119 |

Enable manually with:

120 | 
$('.drawer').drawer();
121 |
122 |

Options

123 |

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-parent="".

124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 |
Nameselectordefaultdescription
parentselectorfalseIf a selector is provided, then all collapsible elements under the specified parent will be closed when this drawer is open.
togglebooleantrueToggle the drawer element on invocation.
144 | 145 |

Methods

146 |
.drawer(options)
147 |

Activates your content as a drawer element. Accepts an optional options object.

148 | 
$('#myDrawer').drawer({
149 |     toggle: false
150 | });
151 |
152 |
.drawer('toggle')
153 |

Toggles a drawer element as folded or open.

154 |
.drawer('show')
155 |

Shows drawer element as opened.

156 |
.drawer('hide')
157 |

Hide a drawer element.

158 |

Events

159 |

drawer-bootstrap drawer class exposes drawer events (very similarly to how Bootstrap collapse) for hooking 160 | into the drawer functionality.

161 | 162 | 163 | 164 | 165 | 166 | 167 | 168 | 169 | 170 | 171 | 172 | 173 | 174 | 175 | 176 | 177 | 178 | 179 | 180 | 181 | 182 |
Event TypeDescription
show.bs.drawerThis event fires immediately when the show instance method is called.
shown.bs.drawerThis event is fired when a collapse element has been made visible to the user (will wait for CSS transitions to complete).
hide.bs.drawerThis event is fired immediately when the hide method has been called.
hidden.bs.drawerThis event is fired when a collapse element has been hidden from the user (will wait for CSS transitions to complete).
183 | 184 | 
$('#myDrawer').on('hidden.bs.drawer', function() {
185 |     // do something here...
186 | });
187 |
188 | 191 |
192 | 193 | 194 | 195 | 196 | 197 | 198 | -------------------------------------------------------------------------------- /js/drawer.js: -------------------------------------------------------------------------------- 1 | /* ======================================================================== 2 | * Bootstrap: drawer.js v1.0.6 3 | # Heavily based on collapse, but had to change the name to "fold" to 4 | # avoid transition conflicts. 5 | * ======================================================================== 6 | */ 7 | 8 | 9 | (function ($) { 10 | 'use strict'; 11 | 12 | // OFF CANVAS PUBLIC CLASS DEFINITION 13 | // ================================ 14 | 15 | var Drawer = function (element, options) { 16 | this.$element = $(element) 17 | this.options = $.extend({}, Drawer.DEFAULTS, options) 18 | this.$trigger = $(this.options.trigger).filter('[href="#' + element.id + '"], [data-target="#' + element.id + '"]') 19 | this.transitioning = null 20 | 21 | if (this.options.parent) { 22 | this.$parent = this.getParent() 23 | } else { 24 | this.addAriaAndDrawerdClass(this.$element, this.$trigger) 25 | } 26 | 27 | if (this.options.toggle) this.toggle() 28 | } 29 | 30 | Drawer.VERSION = '3.3.2' 31 | 32 | Drawer.TRANSITION_DURATION = 350 33 | 34 | Drawer.DEFAULTS = { 35 | toggle: true, 36 | trigger: '[data-toggle="drawer"]' 37 | } 38 | 39 | Drawer.prototype.dimension = function () { 40 | var isRight = this.$element.hasClass('drawer-right') 41 | return isRight ? 'margin-right' : 'margin-left' 42 | } 43 | 44 | Drawer.prototype.show = function () { 45 | if (this.transitioning || this.$element.hasClass('open')) return 46 | 47 | var activesData 48 | var actives = this.$parent && this.$parent.children('.panel').children('.in, .collapsing') 49 | 50 | if (actives && actives.length) { 51 | activesData = actives.data('bs.drawer') 52 | if (activesData && activesData.transitioning) return 53 | } 54 | 55 | var startEvent = $.Event('show.bs.drawer') 56 | this.$element.trigger(startEvent) 57 | if (startEvent.isDefaultPrevented()) return 58 | 59 | if (actives && actives.length) { 60 | Plugin.call(actives, 'hide') 61 | activesData || actives.data('bs.drawer', null) 62 | } 63 | 64 | var dimension = this.dimension() 65 | 66 | this.$element 67 | .addClass('folding').css(dimension, 0) 68 | .attr('aria-expanded', true) 69 | 70 | this.$trigger 71 | .removeClass('folded') 72 | .attr('aria-expanded', true) 73 | 74 | this.transitioning = 1 75 | 76 | var complete = function () { 77 | this.$element 78 | .removeClass('folding') 79 | .addClass('fold open').css(dimension, '') 80 | this.transitioning = 0 81 | this.$element 82 | .trigger('shown.bs.drawer') 83 | } 84 | 85 | if (!$.support.transition) { 86 | return complete.call(this) 87 | } else { 88 | this.transEventName = $.support.transition.end; 89 | } 90 | 91 | this.$element 92 | .one(this.transEventName, $.proxy(complete, this)) 93 | .emulateTransitionEnd(Drawer.TRANSITION_DURATION).css(dimension, 0) 94 | } 95 | 96 | Drawer.prototype.hide = function () { 97 | if (this.transitioning || !this.$element.hasClass('open')) return 98 | 99 | var startEvent = $.Event('hide.bs.drawer') 100 | this.$element.trigger(startEvent) 101 | if (startEvent.isDefaultPrevented()) return 102 | 103 | var dimension = this.dimension() 104 | 105 | this.$element 106 | .addClass('folding') 107 | .removeClass('open') 108 | .attr('aria-expanded', false) 109 | 110 | this.$trigger 111 | .addClass('folded') 112 | .attr('aria-expanded', false) 113 | 114 | this.transitioning = 1 115 | 116 | var complete = function () { 117 | this.transitioning = 0 118 | this.$element 119 | .removeClass('folding') 120 | .addClass('fold') 121 | .trigger('hidden.bs.drawer') 122 | } 123 | 124 | if (!$.support.transition) { 125 | return complete.call(this) 126 | } else { 127 | this.transEventName = $.support.transition.end; 128 | } 129 | 130 | this.$element 131 | .css(dimension, '') 132 | .one(this.transEventName, $.proxy(complete, this)) 133 | .emulateTransitionEnd(Drawer.TRANSITION_DURATION) 134 | } 135 | 136 | Drawer.prototype.toggle = function () { 137 | this[this.$element.hasClass('open') ? 'hide' : 'show']() 138 | } 139 | 140 | Drawer.prototype.getParent = function () { 141 | return $(this.options.parent) 142 | .find('[data-toggle="drawer"][data-parent="' + this.options.parent + '"]') 143 | .each($.proxy(function (i, element) { 144 | var $element = $(element) 145 | this.addAriaAndDrawerdClass(getTargetFromTrigger($element), $element) 146 | }, this)) 147 | .end() 148 | } 149 | 150 | Drawer.prototype.addAriaAndDrawerdClass = function ($element, $trigger) { 151 | var isOpen = $element.hasClass('open') 152 | 153 | $element.attr('aria-expanded', isOpen) 154 | $trigger 155 | .toggleClass('folded', !isOpen) 156 | .attr('aria-expanded', isOpen) 157 | } 158 | 159 | function getTargetFromTrigger($trigger) { 160 | var href 161 | var target = $trigger.attr('data-target') 162 | || (href = $trigger.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '') // strip for ie7 163 | 164 | return $(target) 165 | } 166 | 167 | 168 | // OFFCANVAS PLUGIN DEFINITION 169 | // ========================== 170 | 171 | function Plugin(option) { 172 | return this.each(function () { 173 | var $this = $(this) 174 | var data = $this.data('bs.drawer') 175 | var options = $.extend({}, Drawer.DEFAULTS, $this.data(), typeof option == 'object' && option) 176 | 177 | if (!data && options.toggle && option == 'show') options.toggle = false 178 | if (!data) $this.data('bs.drawer', (data = new Drawer(this, options))) 179 | if (typeof option == 'string') data[option]() 180 | }) 181 | } 182 | 183 | var old = $.fn.fold 184 | 185 | $.fn.drawer = Plugin 186 | $.fn.drawer.Constructor = Drawer 187 | 188 | 189 | // OFFCANVAS NO CONFLICT 190 | // ==================== 191 | 192 | $.fn.drawer.noConflict = function () { 193 | $.fn.fold = old 194 | return this 195 | } 196 | 197 | 198 | // OFFCANVAS DATA-API 199 | // ================= 200 | 201 | $(document).on('click.bs.drawer.data-api', '[data-toggle="drawer"]', function (e) { 202 | var $this = $(this) 203 | 204 | if (!$this.attr('data-target')) e.preventDefault() 205 | 206 | var $target = getTargetFromTrigger($this) 207 | var data = $target.data('bs.drawer') 208 | var option = data ? 'toggle' : $.extend({}, $this.data(), { trigger: this }) 209 | 210 | Plugin.call($target, option) 211 | }) 212 | 213 | })(window.jQuery || {}); 214 | -------------------------------------------------------------------------------- /less.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | bootstrap-drawer documentation 10 | 11 | 12 | 13 | 14 | 15 | 25 | 26 | 27 |
28 |
29 | 30 |
31 |
32 |
33 |

bootstrap-drawer

34 |
35 |
36 |   37 | 38 |
39 |
40 |

Basics

41 |
42 | 48 |
49 |

Other Links

50 |
51 | 57 |
58 | © 2015 Caroline Amaba 59 |
60 |
61 |
62 |
63 |
64 |
65 |

bootstrap-drawer

66 |

bootstrap-drawer is a Bootstrap add-on that gives you an off-canvas/drawer element to your page or container! Check it out by clicking the toggle in the top-left corner!

67 |
68 |
69 |
70 |

LESS / Custom Builds

71 |

If you're familiar with LESS, bootstrap-drawer has less files that you can use to either build your own custom bootstrap-drawer or directly incoroprate with other LESS files in your project.

72 |

bootstrap-drawer currently uses Gulp and LESS, but it'd be great if people can contribute grunt and SASS components! Check out the repo to contribute!

73 |
74 |

Building Your Own Flavor of Drawer

75 |

You'll need gulp and Node if you want to build your own version.

76 |

Run npm install in order to get all the devDependencies from the package.json.

77 |

Most of the tasks are outlined in gulpfile.js. The gulp build will also update the assets for example/index.html so you can see your changes.

78 |

To customize bootstrap-drawer, just edit some of the variables in less/drawer-variables.less to the sizes and colors, etc. you want. Then run gulp build and a new dist/css/bootstrap-drawer(.min).css should be made just for you! Include the file right after the Bootstrap core file, and you should be good to go!

79 |

Things to keep in mind:

80 |
    81 |
  • bootstrap-drawer uses some variables (@grid-gutter-width, @zindex-navbar-fixed, @link-color, to 82 | name most of them), so if you're using a different varibles.less file, be sure to replace it in less/bootstrap-drawer.less.
    • 83 |
  • The .dw-SIZE-# columns are built in LESS loops, and can change as you change the @grid-columns variable. If you're using 16-columns instead of 12, less/mixins/drawer-framework.less is built to build more columns (like .dw-md-13, etc.).
    • 84 |
85 |
86 |

Using Less

87 |

I am assuming for this section you are familiar with using less and the Bootstrap less source. There are files in the less/ directory that are parallel to Bootstrap's less source files. drawer.less already includes its custom variable package as well as less loop framework. To include the less in your build files, you can do one of the following:

88 |

Add to your main less file after bootstrap

89 | 
    @import "bootstrap.less";
 90 |     @import "path/to/drawer.less";
 91 | 
 92 |     /* Your styles */
 93 |
94 |

Add to bootstrap.less

95 | 
    @import "variables.less";
 96 |     @import "mixins.less";
 97 | 
 98 |     // Bootstrap Core
 99 |     // ...
100 | 
101 |     // ... etc ...
102 | 
103 |     // Components w/ JavaScript
104 |     @import "modals.less";
105 |     @import "tooltip.less";
106 |     @import "popovers.less";
107 |     @import "carousel.less";
108 |     @import "path/to/drawer.less";
109 | 
110 |     // Utility Classes
111 |     // ... etc ...
112 |
113 |

Move Contents

114 |

The first two lines in less/drawer.less can be removed and moved

115 |

Feel free to move drawer-variables.less and drawer-framework.less to appropriate folders to maintain bootstrap structure. The component's variables rely on a few variables from the core bootstrap framework, likewise for the mixin framework. Be sure to simply include them after the bootstrap core variables/mixins files:

116 |
    117 |
  • @import "./drawer-variables"; can be put after importing variables.less
    • 118 |
  • @import "./mixins/drawer-framework"; can be put after importing mixins.less
    • 119 |
120 | 
    @import "variables.less";
121 |     @import "path/to/drawer-variables.less"
122 |     @import "mixins.less";
123 |     @import "path/to/drawer-framework.less";
124 | 
125 |     // Bootstrap Core
126 |     // ...
127 | 
128 |     // ... etc ...
129 | 
130 |     // Components w/ JavaScript
131 |     @import "modals.less";
132 |     @import "tooltip.less";
133 |     @import "popovers.less";
134 |     @import "carousel.less";
135 |     @import "path/to/drawer.less";
136 | 
137 |     // Utility Classes
138 |     // ... etc ...
139 |
140 | 143 |
144 | 145 | 146 | 147 | 148 | 149 | 150 | -------------------------------------------------------------------------------- /less/bootstrap-drawer.less: -------------------------------------------------------------------------------- 1 | // FOR BUILDING CSS FILE FOR DIST 2 | 3 | @import "../bower_components/bootstrap/less/variables"; 4 | @import "../bower_components/bootstrap/less/mixins"; 5 | @import "./drawer"; -------------------------------------------------------------------------------- /less/drawer-docs.less: -------------------------------------------------------------------------------- 1 | // FOR DOCS 2 | 3 | @import url(//fonts.googleapis.com/css?family=Open+Sans:400,600,700); 4 | 5 | @bsdir: "../bower_components/bootstrap/less/"; 6 | @teal: lighten(#447e8e, 5%); 7 | @teal-light: lighten(@teal, 5%); 8 | 9 | 10 | // Core variables and mixins 11 | @import "@{bsdir}variables.less"; 12 | /*** variable overrides ***/ 13 | @brand-primary: @teal; 14 | @font-size-h1: 225%; 15 | @font-size-h2: 200%; 16 | @font-size-h3: 150%; 17 | @font-size-h4: 110%; 18 | @font-size-h5: 100%; 19 | @font-size-h6: 95%; 20 | 21 | @import "./drawer-variables.less"; 22 | @import "@{bsdir}mixins.less"; 23 | @import "./mixins/drawer-framework.less"; 24 | 25 | // Reset and dependencies 26 | @import "@{bsdir}normalize.less"; 27 | 28 | // Core CSS 29 | @import "@{bsdir}scaffolding.less"; 30 | @import "@{bsdir}type.less"; 31 | @import "@{bsdir}code.less"; 32 | @import "@{bsdir}grid.less"; 33 | @import "@{bsdir}tables.less"; 34 | @import "@{bsdir}forms.less"; 35 | @import "@{bsdir}buttons.less"; 36 | 37 | // Components 38 | @import "@{bsdir}component-animations.less"; 39 | @import "@{bsdir}tables.less"; 40 | @import "@{bsdir}panels.less"; 41 | 42 | // Components w/ JavaScript 43 | @import "./drawer.less"; 44 | 45 | // Utility classes 46 | @import "@{bsdir}utilities.less"; 47 | @import "@{bsdir}responsive-utilities.less"; 48 | 49 | body { 50 | font-family: 'Open Sans', Arial, sans-serif; 51 | font-size: 14pt; 52 | line-height: 24pt; 53 | } 54 | 55 | .container { 56 | max-width: 1000px; 57 | } 58 | 59 | #drawer-docs, #drawer-docs-content { 60 | p { 61 | padding-bottom: @grid-gutter-width/2; 62 | } 63 | } 64 | 65 | #drawer-docs { 66 | min-height: 100%; 67 | width: 100%; 68 | margin: 0 auto; 69 | padding-bottom: 100px; 70 | 71 | .jumbotron.page-topper { 72 | padding-top: @grid-gutter-width; 73 | padding-bottom: @grid-gutter-width; 74 | #gradient > .vertical(@teal, @teal-light); 75 | color: #fff; 76 | margin-bottom: @grid-gutter-width/2; 77 | 78 | h4 { 79 | line-height: 150%; 80 | font-weight: 400; 81 | } 82 | } 83 | 84 | h1, h2, h3, h4, h5, h6 { 85 | font-weight: 600; 86 | } 87 | } 88 | 89 | #drawer-docs-content { 90 | 91 | hr { 92 | margin-bottom: @grid-gutter-width; 93 | } 94 | 95 | h1, h2 { 96 | border-bottom: 2px solid @brand-primary; 97 | padding-bottom: @grid-gutter-width/2; 98 | color: @gray; 99 | font-weight: 700; 100 | } 101 | 102 | pre { 103 | background: #f8f8f8; 104 | } 105 | } 106 | 107 | #drawer-docs-footer { 108 | margin: @grid-gutter-width auto 0 auto; 109 | display: block; 110 | padding: @grid-gutter-width 0; 111 | border-top: 1px solid @gray-light; 112 | } 113 | 114 | .example-container, .example-container-right { 115 | font-size: 12pt; 116 | line-height: 16pt; 117 | height: 400px; 118 | z-index: 500; 119 | } 120 | 121 | .example-container { 122 | 123 | .panel-body { 124 | padding-left: 10%; 125 | } 126 | 127 | &-right .panel-body { 128 | padding-right: 10%; 129 | } 130 | } 131 | 132 | .give-height { 133 | height: 350px; 134 | } -------------------------------------------------------------------------------- /less/drawer-variables.less: -------------------------------------------------------------------------------- 1 | // You can either include this file in your less after 2 | // variables.less and before offcanvas.less, or you 3 | // just copy+paste these to bootstrap's usual variables.less 4 | // ------------------------------------------------------------------------- 5 | 6 | 7 | //== Off Canvas 8 | // 9 | //## Customizes the `.drawer` component with basic values, each used across all drawer variations. 10 | 11 | // Basics of Off Canvas 12 | @half-gutter: (@grid-gutter-width / 2); 13 | 14 | @drawer-bg: #f8f8f8; 15 | @drawer-color: @gray-dark; 16 | @drawer-border-color: darken(@drawer-bg, 10%); 17 | @drawer-link-color: @link-color; 18 | @drawer-link-hover-color: darken(@drawer-link-color, 15%); 19 | 20 | @drawer-base-padding: 10px; 21 | @zindex-drawer: @zindex-navbar-fixed + 5; 22 | 23 | @drawer-heading-padding: @drawer-base-padding @half-gutter; 24 | @drawer-body-padding: @drawer-base-padding @half-gutter; 25 | @drawer-footer-padding: @drawer-base-padding @half-gutter; 26 | 27 | // Off Canvas Controls 28 | @drawer-ctrls-default-cols: 2; 29 | @drawer-ctrls-default-width: @drawer-ctrls-default-cols / @grid-columns * 100%; 30 | @drawer-ctrls-padding: @drawer-base-padding; 31 | 32 | // Off Canvas nav styles 33 | @drawer-nav-border-radius: @nav-pills-border-radius; 34 | @drawer-nav-padding: @drawer-base-padding @drawer-base-padding @drawer-base-padding 0; 35 | 36 | @drawer-nav-link-padding: @drawer-base-padding @half-gutter; 37 | @drawer-nav-link-color: #777; 38 | @drawer-nav-link-hover-color: darken(@drawer-nav-link-color, 15%); 39 | @drawer-nav-link-hover-bg: lighten(@drawer-bg, 15%); 40 | 41 | @drawer-nav-padding: @drawer-base-padding @half-gutter; 42 | @drawer-navfull-padding: @drawer-base-padding @half-gutter; 43 | 44 | 45 | // Inverse Off Canvas 46 | @drawer-inverse-bg: #333; 47 | @drawer-inverse-color: @gray-lighter; 48 | @drawer-inverse-border-color: darken(@drawer-inverse-bg, 10%); 49 | @drawer-inverse-link-color: lighten(@link-color, 25%); 50 | @drawer-inverse-link-hover-color: darken(@drawer-inverse-link-color, 15%); 51 | 52 | @drawer-inverse-nav-link-color: #fff; 53 | @drawer-inverse-nav-link-hover-color: @gray-lighter; 54 | @drawer-inverse-nav-link-hover-bg: darken(@drawer-inverse-bg, 10%); -------------------------------------------------------------------------------- /less/drawer.less: -------------------------------------------------------------------------------- 1 | @import "./mixins/drawer-framework"; 2 | @import "./drawer-variables"; 3 | 4 | /* ======================================================================== 5 | * bootstrap-drawer: 1.0.6 6 | * ======================================================================== 7 | */ 8 | 9 | // 10 | // Off-Canvas 11 | // -------------------------------------------------- 12 | 13 | html { 14 | min-height: 100%; 15 | height: 100%; 16 | } 17 | 18 | body.has-drawer { 19 | min-height: 100%; 20 | height: 100%; 21 | } 22 | 23 | .has-inner-drawer { 24 | position: relative; 25 | overflow: hidden; 26 | } 27 | 28 | // Base class 29 | // -------------------------------------------------- 30 | 31 | 32 | .drawer { 33 | display: block; 34 | background-color: @drawer-bg; 35 | color: @drawer-color; 36 | border-right: 1px solid @drawer-border-color; 37 | min-height: 1px; 38 | height: 100%; 39 | top: 0; 40 | left: 0; 41 | position: fixed; 42 | z-index: @zindex-drawer; 43 | .box-shadow(0 1px 1px rgba(0,0,0,.05)); 44 | 45 | &-contents, &-heading, &-body, &-nav, &-footer, ul, li { 46 | display: inherit; 47 | margin: 0; 48 | width: 100%; 49 | position: relative; 50 | } 51 | } 52 | 53 | .drawer-right { 54 | left: auto; 55 | right: 0; 56 | border-right: none; 57 | border-left: 1px solid @drawer-border-color; 58 | .box-shadow(0 -1px 1px rgba(0,0,0,.05)) 59 | } 60 | 61 | .drawer-inverse { 62 | background-color: @drawer-inverse-bg; 63 | color: @drawer-inverse-color; 64 | border-right: 1px solid @drawer-inverse-border-color; 65 | 66 | &.drawer-right { 67 | border-right: 1px solid @drawer-border-color; 68 | } 69 | } 70 | 71 | .drawer-inside { 72 | position: absolute; 73 | } 74 | 75 | .drawer-controls { 76 | float: right; 77 | margin-right: (-1 * @drawer-ctrls-default-width); 78 | padding: @drawer-ctrls-padding; 79 | height: 100%; 80 | position: relative; 81 | width: @drawer-ctrls-default-width; 82 | z-index: 500; 83 | } 84 | 85 | .drawer-contents { 86 | background-color: @drawer-bg; 87 | height: 100%; 88 | width: 100%; 89 | overflow: auto; 90 | @z-index: 100; 91 | } 92 | 93 | .drawer-right { 94 | .drawer-controls { 95 | float: left; 96 | margin-left: -1 * @drawer-ctrls-default-width; 97 | margin-right: 0; 98 | } 99 | } 100 | 101 | // OFF CANVAS CONTENT STYLES 102 | 103 | .drawer-heading { 104 | border-bottom: 1px solid @drawer-border-color; 105 | padding: @drawer-heading-padding; 106 | color: inherit; 107 | } 108 | 109 | .drawer-title { 110 | margin-top: 0; 111 | margin-bottom: 0; 112 | } 113 | 114 | .drawer-inner-toggle { 115 | position: absolute; 116 | top: @drawer-base-padding; 117 | right: @drawer-base-padding; 118 | } 119 | 120 | .drawer-body, .drawer-nav { 121 | padding: @drawer-body-padding; 122 | } 123 | 124 | .drawer-nav, .drawer-fullnav { 125 | padding: @drawer-nav-padding; 126 | margin-bottom: 0; 127 | list-style: none; 128 | &:extend(.clearfix all); 129 | } 130 | 131 | .drawer-nav li, .drawer-fullnav li { 132 | position: relative; 133 | margin-bottom: 5px; 134 | 135 | a { 136 | color: @drawer-nav-link-color; 137 | border-radius: @drawer-nav-border-radius; 138 | position: relative; 139 | display: block; 140 | padding: @drawer-nav-link-padding; 141 | } 142 | 143 | &.active a, a:hover, a:focus { 144 | color: @drawer-nav-link-hover-color; 145 | text-decoration: none; 146 | background-color: @drawer-nav-link-hover-bg; 147 | } 148 | } 149 | 150 | .drawer-fullnav { 151 | color: @drawer-inverse-nav-link-color; 152 | padding: 0; 153 | 154 | li { 155 | margin-bottom: 0; 156 | 157 | a { 158 | border-radius: 0; 159 | } 160 | } 161 | } 162 | 163 | .drawer-inverse { 164 | .drawer-contents { 165 | background-color: @drawer-inverse-bg; 166 | } 167 | 168 | .drawer-fullnav li a, .drawer-nav li a { 169 | color: @drawer-inverse-nav-link-color; 170 | padding: @drawer-navfull-padding; 171 | } 172 | 173 | .drawer-fullnav li.active a, .drawer-fullnav li a:hover, .drawer-fullnav li a:active, 174 | .drawer-nav li.active a, .drawer-nav li a:hover, .drawer-nav li a:active, { 175 | color: @drawer-inverse-nav-link-hover-color; 176 | background-color: @drawer-inverse-nav-link-hover-bg; 177 | } 178 | } 179 | 180 | .drawer-footer { 181 | padding: @drawer-footer-padding; 182 | 183 | &.locked { 184 | position: absolute; 185 | bottom: 0; 186 | left: 0; 187 | } 188 | } 189 | 190 | // Extra small grid 191 | // 192 | // Columns, offsets, pushes, and pulls for extra small devices like 193 | // smartphones. 194 | 195 | .make-drawer(xs); 196 | 197 | // Small grid 198 | // 199 | // Columns, offsets, pushes, and pulls for the small device range, from phones 200 | // to tablets. 201 | 202 | @media (min-width: @screen-sm-min) { 203 | .make-drawer(sm); 204 | } 205 | 206 | 207 | // Medium grid 208 | // 209 | // Columns, offsets, pushes, and pulls for the desktop device range. 210 | 211 | @media (min-width: @screen-md-min) { 212 | .make-drawer(md); 213 | } 214 | 215 | 216 | // Large grid 217 | // 218 | // Columns, offsets, pushes, and pulls for the large desktop device range. 219 | 220 | @media (min-width: @screen-lg-min) { 221 | .make-drawer(lg); 222 | } 223 | 224 | @import "mixins/fold"; 225 | -------------------------------------------------------------------------------- /less/mixins/drawer-framework.less: -------------------------------------------------------------------------------- 1 | // Framework for drawer grid generation 2 | // Parallel to the grid framework of bootstrap 3 | // uses any value of `@grid-columns` 4 | 5 | 6 | .dw-base(@index) { 7 | width: percentage((@index / @grid-columns)); 8 | } 9 | 10 | .calc-drawer-column(@index, @class, @type) when (@type = width) and (@index > 0) { 11 | 12 | .dw-@{class}-@{index} { 13 | width: percentage((@index / @grid-columns)); 14 | } 15 | 16 | 17 | .fold.dw-@{class}-@{index} { 18 | margin-left: -1 * percentage((@index / @grid-columns));; 19 | } 20 | 21 | .drawer-right { 22 | &.fold.dw-@{class}-@{index} { 23 | // margin-left: 0; 24 | margin-right: -1 * percentage((@index / @grid-columns)); 25 | } 26 | } 27 | } 28 | 29 | // Basic looping in LESS 30 | .loop-drawer-columns(@index, @class, @type) when (@index >= 0) { 31 | .calc-drawer-column(@index, @class, @type); 32 | .loop-drawer-columns((@index - 1), @class, @type); 33 | } 34 | 35 | // Create grid for specific class 36 | .make-drawer(@class) { 37 | .loop-drawer-columns(@grid-columns, @class, width); 38 | } -------------------------------------------------------------------------------- /less/mixins/fold.less: -------------------------------------------------------------------------------- 1 | .fold { 2 | margin-right: 0; 3 | } 4 | 5 | .folding { 6 | height: 100%; 7 | .transition-property(~"margin-left"); 8 | .transition-duration(.35s); 9 | .transition-timing-function(ease); 10 | } 11 | 12 | .drawer-right { 13 | &.fold { 14 | margin-left: 0; 15 | } 16 | 17 | &.folding { 18 | .transition-property(~"margin-right"); 19 | } 20 | } 21 | 22 | .fold.open, 23 | .drawer-right.fold.open { 24 | margin-left: 0; 25 | margin-right: 0; 26 | } -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "bootstrap-drawer", 3 | "version": "1.0.6", 4 | "description": "A Bootstrap add-on to create drawer (off-canvas) styled navigation", 5 | "main": "index.js", 6 | "directories": { 7 | "example": "example" 8 | }, 9 | "scripts": {}, 10 | "repository": { 11 | "type": "git", 12 | "url": "https://github.com/clineamb/bootstrap-drawer.git" 13 | }, 14 | "keywords": [ 15 | "bootstrap3", 16 | "bootstrap-3", 17 | "bootstrap", 18 | "offcanvas", 19 | "off-canvas", 20 | "off", 21 | "canvas", 22 | "navigation", 23 | "navs", 24 | "nav", 25 | "drawer", 26 | "menu", 27 | "html", 28 | "css", 29 | "less", 30 | "javascript", 31 | "js", 32 | "jquery" 33 | ], 34 | "author": "Caroline Amaba ", 35 | "license": "ISC", 36 | "bugs": { 37 | "url": "https://github.com/clineamb/bootstrap-drawer-menu/issues" 38 | }, 39 | "homepage": "https://github.com/clineamb/bootstrap-drawer-menu", 40 | "devDependencies": { 41 | "gulp": "^3.9.1", 42 | "gulp-concat": "^2.6.0", 43 | "gulp-less": "^3.0.5", 44 | "gulp-markdown": "^1.2.0", 45 | "gulp-rename": "^1.2.2", 46 | "gulp-uglify": "^1.5.3", 47 | "gulp-util": "^3.0.7", 48 | "nunjucks": "^2.4.1", 49 | "through2": "^2.0.1" 50 | }, 51 | "dependencies": { 52 | "jquery": "2.x", 53 | "bootstrap": "3.x" 54 | } 55 | } 56 | -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | ### ⚠️⚠️ This repo is no longer actively matinained. ⚠️⚠️ 2 | 3 | # bootstrap-drawer 4 | 5 | A [Bootstrap](http://getbootstrap.com) add-on to create drawer (off-canvas) styled navigation. 6 | 7 | ---------- 8 | 9 | As of Bootstrap 3, there is no "drawer" element - a drawer-like menu that 10 | goes off screen. This is an add-on to the core Bootstrap framework that adds various 11 | `.drawer` classes to quickly and easily create the drawer component. 12 | 13 | This Readme is actually a quick start. [Check out the full documentation](http://clineamb.github.io/bootstrap-drawer) for detailed usage and style guide. 14 | 15 | **Version:** 1.0.6 16 | 17 | ## Requirements 18 | 19 | * [Bootstrap](http://getbootstrap.com) 20 | * [jQuery](http://jquery.com/) (already a Bootstrap dependency) 21 | * [Node](http://nodejs.org/) & [gulp](http://gulpjs.com/) if you want to build your own version. 22 | 23 | ## Download 24 | 25 | ### Get it via Bower or NPM: 26 | 27 | `bower install bootstrap-drawer` / `npm install bootstrap-drawer` 28 | 29 | or you can [download the latest release](https://github.com/clineamb/bootstrap-drawer/releases) from the release page. 30 | 31 | 32 | ## Installing 33 | 34 | For more detailed use on the bootstrap-drawer framework, check out the [documentation](http://clineamb.github.io/bootstrap-drawer). 35 | 36 | ### When using the full Bootstrap Framework: 37 | 38 | ```html 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | ``` 54 | 55 | ### Basic Usage 56 | 57 | You can check out [example/index.html](example/index.html) for a more robust example, 58 | but the basic usage is very similar to using Bootstrap's col-SIZE-# classes, when it comes 59 | to sizing the component. In addition, the inner elements (`.drawer-heading`, `-nav/-navfull`, 60 | `-body`, `-footer`) are similar to how the `.panel` class family works. 61 | 62 | The `.fold` class starts the drawer closed. Becomes `.fold.open` when it's opened. 63 | 64 | The sizing classes are dictated by the screen size to be responsive. `.dw-SIZE-12` will cover 65 | the whole screen/canvas of that size. If you want to use the drawer in another container 66 | instead of the ``, check out [the full documentation](http://clineamb.github.io/bootstrap-drawer). 67 | 68 | ```html 69 | 70 |
71 |
72 | Menu 73 |
74 |
75 |
76 |

Menu

77 |
78 |
79 |

80 | This is a properly padded container for content in the 81 | drawer that isn't a navigation. 82 |

83 | A Regular Link 84 |
85 | 90 |
91 | © Caroline Amaba 92 |
93 |
94 |
95 |
96 | 97 |
98 | 99 | ``` 100 | 101 | ### Using LESS / Building Your Own Drawer 102 | 103 | You can find out how to incorporate bootstrap-drawer and builr your own in [LESS section of the documentation](http://clineamb.github.io/bootstrap-drawer/less.html). 104 | 105 | ### Javascript 106 | 107 | The Javascript/jQuery plugin requires the `transition.js` file from the core Bootstrap 108 | framework in order to work. Usage is nearly the same as the [collapse](http://getbootstrap.com/javascript/#collapse) component, but checkout out the documentation for more detailed usage for `$('.drawer').drawer()`. The events emitted are `*.bs.drawer`. 109 | 110 | ## Latest Changelog 111 | 112 | [Check out the full changelog](changelog.md) for past version changes. 113 | 114 | #### Version 1.0.1 115 | 116 | * Optimize LESS to produce smaller css files. 117 | 118 | 119 | ---------------------------------------------------- 120 | 121 | ## License 122 | 123 | Copyright (c) 2015, [Caroline Amaba](mailto:github@carolineamaba.com) 124 | 125 | Permission to use, copy, modify, and/or distribute this software for any purpose with or without fee is hereby granted, provided that the above copyright notice and this permission notice appear in all copies. 126 | 127 | THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE. 128 | --------------------------------------------------------------------------------