https://github.com/takaneichinose/bootstrap-off-canvas
Just a simple implementation of off canvas on Bootstrap.
https://github.com/takaneichinose/bootstrap-off-canvas
bootstrap bootstrap-4 bootstrap4 css css3 helpers hide-show html html5 javascript jquery jquery-plugin menu menu-navigation offcanvas offcanvas-menu side side-menu sidemenu toggle
Last synced: 23 days ago
JSON representation
Just a simple implementation of off canvas on Bootstrap.
- Host: GitHub
- URL: https://github.com/takaneichinose/bootstrap-off-canvas
- Owner: takaneichinose
- License: mit
- Created: 2019-02-14T11:41:15.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2022-10-04T01:06:46.000Z (over 2 years ago)
- Last Synced: 2025-02-15T05:25:30.650Z (3 months ago)
- Topics: bootstrap, bootstrap-4, bootstrap4, css, css3, helpers, hide-show, html, html5, javascript, jquery, jquery-plugin, menu, menu-navigation, offcanvas, offcanvas-menu, side, side-menu, sidemenu, toggle
- Language: HTML
- Homepage:
- Size: 22.5 KB
- Stars: 2
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Bootstrap Off Canvas
Just a simple implementation of off canvas on Bootstrap.
# Basic Usage
Import these lines on your source code.
```html
```
Then wrap your usual Bootstrap code in these lines of HTML codes.
```html
```
# Options
In ```off-canvas-nav``` class, you may use the Bootstrap's utility [Colors](https://getbootstrap.com/docs/4.3/utilities/colors/).\
In ```off-canvas-content``` class, you may add ```overlay``` to add overlay mask on the content part of your source code.
Example:
```HTML
```
In ```off-canvas-content``` class, you may add ```off-canvas-no-close``` to disable close event if the content is clicked when opened.
Example:
```HTML
...
```
If you want your off-canvas menu to be floating over the content, you should make your HTML structure the way below:
Example:
```HTML
...
```