Minimal Touch-enabled Offcanvas Menu - jQuery Offcanvas.js
File Size: | 13.4 KB |
---|---|
Views Total: | 3931 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Offcanvas.js is a tiny and easy-to-use jQuery plugin to create responsive, touch-enabled, SEO-friendly, multi-level offcanvas sidebar menus with sliding sub menus on your cross-platform web applications.
More features:
- Hamburger toggle button to open/close the menu.
- Swipe the main content to close the menu.
- Semantic HTML markup. Based on nested HTML lists.
- Push mode: Push the main content to the other side when the menu is opened.
- Overlay mode: Cover the main content when the menu is opened.
- Fully customizable via CSS/SCSS.
- Easy to implement without any JS call.
How to use it:
1. Link to jQuery JavaScript library and the Offcanvas plugin's files.
<link href="css/offcanvas.min.css" rel="stylesheet"> <script src="/path/to/cdn/jquery.min.js"></script> <script src="js/offcanvas.js"></script>
2. Create the offcanvas sidebar menu from nested HTML unordered lists and then insert them into a container element with the CSS class of offcanvas-sidebar
.
<section id="offcanvas-sidebar"> <div> <h4>Menu 1</h4> <ul> <li><a href="#">Link 1.1</a> <ul> <li><a href="#">Link 1.1.1</a></li> <li><a href="#">Link 1.1.2</a></li> <li><a href="#">Link 1.1.3</a></li> <li><a href="#">Link 1.1.4</a></li> </ul> </li> <li><a href="#">Link 1.2</a></li> <li><a href="#">Link 1.3</a></li> <li><a href="#">Link 1.4</a></li> </ul> <h4>Menu 2</h4> <ul> <li><a href="#">Link 2.1</a></li> <li><a href="#">Link 2.2</a></li> <li><a href="#">Link 2.3</a></li> <li><a href="#">Link 2.4</a> <ul> <li><a href="#">Link 2.4.1</a></li> <li><a href="#">Link 2.4.2</a></li> <li><a href="#">Link 2.4.3</a></li> <li><a href="#">Link 2.4.4</a></li> </ul> </li> </ul> </div> </section>
3. To enable the Push mode, add the page-wrap
ID to the main content.
<main id="page-wrap"> <div class="container"> <h1>Main Content</h1> </div> </main>
4. Sometimes you might need to disable the offcanvas sidebar menu on large screens:
/* hide Offcanvas above 768px */ @media (min-width: 768px) { #offcanvas-navicon, #offcanvas-overlay, #offcanvas-sidebar { display: none; } }
5. To customize the menu, include one of these @mixins
(/import/_offcanvas-options.scss) in your body
styling.
- offcanvas-over-left: Slides in from the left and covers the main content
- offcanvas-over-right: Slides in from the right and covers the main content
- offcanvas-push-left: Slides in from the left and pushes the main content to the right
- offcanvas-push-right: Slides in from the right and pushes the main content to the left
- offcanvas-under-left: Slides the main content to the right to reveal the menu
- offcanvas-under-right: Slides the main content to the left to reveal the menu
body { @include offcanvas-push-left; }
6. Override the default variables in the /import/_offcanvas-variables.scss).
$offcanvas-navicon-inset-top: 8px; $offcanvas-navicon-inset-horizontal: 8px; $offcanvas-navicon-background: rgba(255,255,255, 0.5); $offcanvas-navicon-border-radius: 50%; $offcanvas-page-wrap-background: #fff; $offcanvas-color-overlay: #000; $offcanvas-opacity-overlay: 0.1; $offcanvas-overlay-z-index: 100; $offcanvas-transition: all 400ms ease; $offcanvas-box-shadow: 0 0 5px #000; $offcanvas-sidebar-width: 250px;
This awesome jQuery plugin is developed by SimonPadbury. For more Advanced Usages, please check the demo page or visit the official website.