A lightweight, flexible jQuery off-canvas navigation plugin which lets you create fully accessible sidebar or top/bottom sliding (or push) panels with keyboard interactions and ARIA attributes.
Home Page: http://codepen.io/vmitsaras/pen/gwGwJE
License: MIT License
Hi,
when creating offcanvas without triggerButton specified, an error 'Element required to initialize object' is raised.
jQuery(function($) {
$('#offcanvas').offcanvas({
modifiers: 'left,overlay',
});
});
I use this code, as offcanvas in my case is not triggered by any alement, but appears as feedback to AJAX action (after user add something to cart).
I can bypass this issue by creating invisible element like this
jQuery(function($) {
$('#offcanvas').offcanvas({
modifiers: 'left,overlay',
triggerButton: jQuery('<span/>')
});
});
Is this expected behavior, or an issue? Would be nice to have option to omit triggerButton, when not needed.
thanks
Pavel
Your docs says to use CDN. It does a 302.
Doc should say this:
, 'https://cdn.jsdelivr.net/npm/[email protected]/dist/_js/js-offcanvas.pkgd.js'
, 'https://cdn.jsdelivr.net/npm/[email protected]/dist/_css/prefixed/js-offcanvas.css'
Hello sorry perhaps this is a simple issue to resolve but whenever the page loads first on https://lesfestivalsdewallonie.be the offcanvas elements seem to appear. Its mainly noticeable on https://lesfestivalsdewallonie.be (homepage) and https://lesfestivalsdewallonie.be/programme/.
Any ideas why this is?
Hi,
I've tested your example page: http://offcanvas.vasilis.co/examples.html on Samsung Galaxy S6,
open menu and try swipe up/down inside menu content, menu auto close.
Thank!
P/S: I've tested by add webkit prefix to your js-offcanvas.css by using https://autoprefixer.github.io/ and seem menu not auto close on mobile, could you review js-offcanvas.css?
Hi, thanks for this great plugin!
I'm trying to develop a Drupal contrib module and I get this error only using reveal, with overlay and push works fine.
This works:
`<a class="js-offcanvas-trigger"
data-offcanvas-trigger="off-canvas-id"
href="#off-canvas">Menu</a>
<div class="js-offcanvas"
data-offcanvas-options='{"modifiers": "right,push"}'
id="off-canvas-id">...</div>`
This isn't work:
`<a class="js-offcanvas-trigger"
data-offcanvas-trigger="off-canvas-id"
href="#off-canvas">Menu</a>
<div class="js-offcanvas"
data-offcanvas-options='{"modifiers": "right,reveal"}'
id="off-canvas-id">...</div>
`
Error message
js-offcanvas.pkgd.js?v=1.x:89 Uncaught TypeError: Cannot read property 'addEventListener' of undefined
at Object.utils.onEndTransition (js-offcanvas.pkgd.js?v=1.x:89)
at window.componentNamespace.Offcanvas.Offcanvas.open (js-offcanvas.pkgd.js?v=1.x:591)
at window.componentNamespace.Offcanvas.Offcanvas.toggle (js-offcanvas.pkgd.js?v=1.x:692)
at toggleOffcanvas (js-offcanvas.pkgd.js?v=1.x:857)
at HTMLAnchorElement. (js-offcanvas.pkgd.js?v=1.x:56)
at HTMLAnchorElement.dispatch (jquery.min.js?v=3.2.1:3)
at HTMLAnchorElement.q.handle (jquery.min.js?v=3.2.1:3)
Any idea?
Thanks!
Hi everyone,
First of all great plugin - work's so well and is easily customisable.
I have a site that uses the off canvas menu on some pages and not on others. This is moreso a question for anyone else that has experienced it,
I know this isn't a problem with the menu, its more about implementation - but I figured someone might have found a solution so I thought I would ask. Again, awesome plugin!
var
if ($ocRight.length) {
$('#off-canvas-right').offcanvas({
modifiers: "right,overlay",
triggerButton: '.js-offcanvas-trigger'
});
}
In demo file
js-offcanvas-master/demo/index.html
We have
<script src="../bower_components/jquery/dist/jquery.js"></script>
Burt there is no jquery.js in project folder
First, thank you for the good work.
I'm trying to use offcanvas with npm but I keep getting the same error:
app.js:20`` Uncaught TypeError: $(...).offcanvas is not a function
the app.js file:
import offcanvas from "js-offcanvas"
$('#off-canvas').offcanvas({
// options
});
$( function(){
$(document).trigger("enhance");
});
the html file:
<body>
<div class="c-offcanvas-content-wrap">
...
<a href="#off-canvas" data-offcanvas-trigger="off-canvas">Menu</a>
...
</div>
<aside id="off-canvas"></aside>
</body>
Hi,
I am using this plugin, but problem occurs in safari.
I have event on click which calss dataOffcanvas.close(). That is not working on safari, works fine on chrome.
Also I have tested http://offcanvas.vasilis.co , and also i demo when you click outside aside element , that is not triggering close method.
I would like to use multiple trigger buttons for my JS Offcanvas menu, but it seems that the options limit the triggerButton selector to the first element only:
if (options.triggerButton ) {
this.$triggerBtn = $(options.triggerButton);
new window.componentNamespace.OffcanvasTrigger(this.$triggerBtn[0], {"offcanvas": offcanvasID}).init();
}I'd like for all elements matching the selector used for options.triggerButton to work.
Edit:
I was able to create a workaround, but I do believe that the expected behavior of using a selector that allows class names is to apply the functionality to all instances found.
jQuery( function($) {
var drawerSelector = "#the-drawer";
var $drawer = $(drawerSelector).offcanvas({
triggerButton: '.drawer-toggle' // Button to open offcanvas
});
var drawerData = $drawer.data('offcanvas-component');
// Only the first instance of .drawer-toggle works as a toggler,
// so add a new class and manually trigger the togglin'
var $offcanvasMenuToggle = $(".menu-drawer-toggle");
$offcanvasMenuToggle.find("a").on("click", function(e) {
e.preventDefault();
drawerData.toggle();
});
});Hi,
I try to fixed navbar with css but not luck, the problem is translate(3d), do you have any jsfiddle
Thank!
Hello,
I am using Laravel Mix with Webpack to include js-offcanvas into my vendor.js file. However, when I click the off-canvas-trigger button I get the following error message:
Uncaught TypeError: Cannot read property 'activeElement' of undefined
Here is my setup:
package.js
"devDependencies": {
"Modernizr": "https://modernizr.com/download?ambientlight-batteryapi-webp-setclasses",
"bootstrap": "^4.1.0",
"js-offcanvas": "^1.2.2",
"jquery": "^3.1.1",
"popper.js": "^1.14.3"
...
}
webpack.mix.js
mix.webpackConfig({
resolve: {
alias: {
"jquery": "jquery/src/jquery",
"popper.js": "popper.js/dist/umd/popper.js",
"js-offcanvas": "js-offcanvas/dist/_js/js-offcanvas.pkgd.js",
}
}
});
mix.autoload({
"jquery": ["$", "jQuery", "window.jQuery"],
"popper.js": ["Popper", "window.Popper"]
});
mix.js("resources/assets/js/app.js", "public/js")
mix.extract([
"jquery",
"Modernizr",
"js-offcanvas",
"popper.js",
"bootstrap",
]);
HTML
<button type="button" id="js-offcanvas-trigger" class="navbar-toggler">
<i class="fa fa-bars" aria-hidden="true"></i>
</button>
<aside id="off-canvas-sidenav" class="bg-light d-none">
...
</aside>
Javascript
$(function(){
$(document).trigger("enhance");
$("#off-canvas-sidenav").offcanvas({
modifiers: "right,overlay",
triggerButton: "#js-offcanvas-trigger"
});
});
More Info
When I try this without Webpack (using CDN) everything works fine. However the package I build doesn't work. Here is the line of code that throughs the error.
if( doc.activeElement ){
this.lastFocus = doc.activeElement;
}
After looking at the error log the issue seems to be that w.document is a null value. Should this be the window object? If so, it does not seem to be injected in the w variable. It only contains two attributes componentNamespace and utils
Any help getting this to work in Laravel Webpack would be greatly appreciated.
Thanks!
There seems to be an issue with modals being inside an div with class c-offcanvas-content-wrap. Whenever a modal that's inside the class is being opened up, it creates two backdrops.
Both are from the modal backdrop and the canvas backdrop and closing the modal only removes one backdrop, being essentially stuck with a dark background.
Here's a Codepen example: https://codepen.io/anon/pen/djWgbY
Just click on "Launch demo modal"
This was mentioned in an closed issue here: #18 (comment)
i'm trying to get double modal without error but it is not easy...
i tried removeClass when the modal closing is related but there is some error when i open again after closing the modal..
and using esc key as well.
the issue step1.
open myBiz/test.html
the issue step2.
click this button
<button type="button" class="btn btn-l btn-black js-offcanvas-trigger" data-offcanvas-trigger="offcanvas-bank-1">계좌내역등록</button>
the issue step3.
click this button
Then you'll be able to see the double modal.
<button class="btn btn-s btn-solid-black js-offcanvas-trigger" data-offcanvas-trigger="offcanvas-file-form" data-offcanvas-double="true">등록</button>
could you help me please?
If you have many divs inside the menu when you scroll down. Close the menu with dataOffcanvas.close(); and open it again with dataOffcanvas.open(); then it scrolls to the top of menu.
How can you make it stay there instead of scrolling to top??
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8">
<title>Accessible Offcanvas </title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="publisher" href="https://plus.google.com/u/0/102875256234651427686/">
<script type="application/ld+json">
{
"@context": "http://schema.org/",
"@type": "SoftwareSourceCode",
"name": "Accessible Offcanvas Plugin",
"url": "http://offcanvas.vasilis.co",
"description": "Accessible Offcanvas jQuery plugin, using ARIA.",
"keywords": "offcanvas, accesible, jquery plugin",
"codeRepository":"https://github.com/vmitsaras/js-offcanvas"
}
</script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Roboto:300,400:500'>
<style type="text/css">
.c-offcanvas, .c-offcanvas-content-wrap {
transform: translate3d(0, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.c-offcanvas, .c-offcanvas-content-wrap, .c-offcanvas-bg.c-offcanvas-bg--reveal, .c-offcanvas-bg.c-offcanvas-bg--push {
transition: transform 300ms cubic-bezier(0.4, 0, 0.6, 1);
}
.c-offcanvas.is-open {
transform: translate3d(0, 0, 0);
visibility: visible;
}
/**
* Offcanvas-content-wrap
*/
.c-offcanvas-content-wrap {
position: relative;
z-index: 3;
overflow: hidden;
}
/**
* Offcanvas Panel
*/
.c-offcanvas {
position: fixed;
min-height: 100%;
max-height: none;
top: 0;
display: block;
background: #fff;
overflow: auto;
}
.c-offcanvas--opening {
transition-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
}
.c-offcanvas.is-closed {
max-height: 100%;
overflow: hidden;
visibility: hidden;
box-shadow: none;
}
.c-offcanvas.is-scrollable {
overflow-y: auto;
}
.c-offcanvas--overlay {
z-index: 6;
}
.c-offcanvas--reveal {
z-index: 2;
}
/**
* Offcanvas BG-Overlay
*/
.c-offcanvas-bg {
position: fixed;
top: 0;
height: 100%;
width: 100%;
z-index: 5;
left: -100%;
background-color: transparent;
transition: background-color 400ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
}
.c-offcanvas-bg.is-animating, .c-offcanvas-bg.is-open {
left: 0;
background-color: rgba(0, 0, 0, 0.68);
visibility: visible;
}
.c-offcanvas-bg.is-closed {
visibility: hidden;
}
/**
* Position Left
*
*/
.c-offcanvas--left {
height: 100%;
width: 17em;
transform: translate3d(-17em, 0, 0);
}
/**
* Position Right
*
*/
.c-offcanvas--right {
height: 100%;
width: 17em;
right: 0;
transform: translate3d(17em, 0, 0);
}
/**
* Position Top
*
*/
.c-offcanvas--top {
left: 0;
right: 0;
top: 0;
height: 12.5em;
min-height: auto;
width: 100%;
transform: translate3d(0, -12.5em, 0);
}
/**
* Position Bottom
*
*/
.c-offcanvas--bottom {
top: auto;
left: 0;
right: 0;
bottom: 0;
height: 12.5em;
min-height: auto;
width: 100%;
transform: translate3d(0, 12.5em, 0);
}
/**
* Reveal
*
*/
.c-offcanvas-content-wrap {
z-index: 3;
}
.c-offcanvas-content-wrap--reveal.c-offcanvas-content-wrap--left.is-open {
transform: translate3d(17em, 0, 0);
}
.c-offcanvas-content-wrap--reveal.c-offcanvas-content-wrap--right.is-open {
transform: translate3d(-17em, 0, 0);
}
.c-offcanvas--reveal {
z-index: 0;
transform: translate3d(0, 0, 0);
}
.c-offcanvas-bg.c-offcanvas-bg--reveal.c-offcanvas-bg--left.is-open {
transform: translate3d(17em, 0, 0);
}
.c-offcanvas-bg.c-offcanvas-bg--reveal.c-offcanvas-bg--right.is-open {
transform: translate3d(-17em, 0, 0);
}
/**
* Push
*
*/
.c-offcanvas--push {
z-index: 6;
}
.c-offcanvas--push--opening {
transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
.c-offcanvas-content-wrap {
z-index: 3;
}
.c-offcanvas-content-wrap--push.c-offcanvas-content-wrap--left.is-open {
transform: translate3d(17em, 0, 0);
}
.c-offcanvas-content-wrap--push.c-offcanvas-content-wrap--right.is-open {
transform: translate3d(-17em, 0, 0);
}
.c-offcanvas-bg.c-offcanvas-bg--push.c-offcanvas-bg--left.is-open {
transform: translate3d(17em, 0, 0);
}
.c-offcanvas-bg.c-offcanvas-bg--push.c-offcanvas-bg--right.is-open {
transform: translate3d(-17em, 0, 0);
}
.u-unstyled, .o-list-inline {
margin: 0;
padding: 0;
list-style: none;
}
.u-pos-relative {
position: relative !important;
}
.u-hidden-visually {
position: absolute !important;
overflow: hidden !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
border: 0 !important;
clip: rect(1px, 1px, 1px, 1px) !important;
}
.u-text-center {
text-align: center;
}
[tabindex="-1"]:focus {
outline: 0;
}
.o-list-inline {
padding: 0;
list-style: none;
}
.o-list-inline > li {
display: inline-block;
}
html {
overflow: hidden;
font-size: 1em;
font-family: "Roboto", sans-serif;
line-height: 1.5;
background-color: #fff;
color: #333;
overflow-y: scroll;
min-height: 100%;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
p {
font-size: 1.18em;
margin-bottom: 1.18em;
font-weight: 400;
font-style: normal;
color: #424242;
}
@media (min-width: 20em) and (max-width: 41.25em) {
p {
font-size: 1.18em;
}
}
@media (min-width: 41.25em) and (max-width: 46.25em) {
p {
font-size: 1.18em;
}
}
@media (min-width: 46.25em) and (max-width: 61.25em) {
p {
font-size: 1.18em;
}
}
@media (min-width: 61.25em) and (max-width: 81.25em) {
p {
font-size: 1.18em;
}
}
@media (min-width: 81.25em) {
p {
font-size: 1.18em;
}
}
h1 {
font-size: 1.6992em;
margin: 0 0 1em 0;
line-height: 1.1;
font-weight: 500;
font-style: normal;
}
@media (min-width: 20em) and (max-width: 41.25em) {
h1 {
font-size: 1.6992em;
}
}
@media (min-width: 41.25em) and (max-width: 46.25em) {
h1 {
font-size: 2.15055em;
}
}
@media (min-width: 46.25em) and (max-width: 61.25em) {
h1 {
font-size: 2.3128em;
}
}
@media (min-width: 61.25em) and (max-width: 81.25em) {
h1 {
font-size: 2.655em;
}
}
@media (min-width: 81.25em) {
h1 {
font-size: 3.0208em;
}
}
h2 {
font-size: 1.416em;
line-height: 1em;
font-weight: 400;
font-style: normal;
padding: 0 0 0.45074em;
margin: 1.18em 0 1.18em 0;
text-transform: capitalize;
text-indent: -2px;
}
@media (min-width: 20em) and (max-width: 41.25em) {
h2 {
font-size: 1.416em;
}
}
@media (min-width: 41.25em) and (max-width: 46.25em) {
h2 {
font-size: 1.593em;
}
}
@media (min-width: 46.25em) and (max-width: 61.25em) {
h2 {
font-size: 1.652em;
}
}
@media (min-width: 61.25em) and (max-width: 81.25em) {
h2 {
font-size: 1.77em;
}
}
@media (min-width: 81.25em) {
h2 {
font-size: 1.888em;
}
}
h3 {
font-size: 1.2em;
margin: 1.18em 0 0.7293em 0;
font-weight: 500;
font-style: normal;
line-height: 1.188em;
color: #2b2b2b;
text-indent: -1px;
}
@media (min-width: 20em) and (max-width: 41.25em) {
h3 {
font-size: 1.2em;
}
}
@media (min-width: 41.25em) and (max-width: 46.25em) {
h3 {
font-size: 1.35em;
}
}
@media (min-width: 46.25em) and (max-width: 61.25em) {
h3 {
font-size: 1.4em;
}
}
@media (min-width: 61.25em) and (max-width: 81.25em) {
h3 {
font-size: 1.5em;
}
}
@media (min-width: 81.25em) {
h3 {
font-size: 1.6em;
}
}
h4 {
font-size: 1.18em;
font-weight: 300;
line-height: 1.409em;
margin: 1em 0 0 0;
letter-spacing: 1px;
color: #727272;
text-transform: uppercase;
}
@media (min-width: 20em) and (max-width: 41.25em) {
h4 {
font-size: 1.18em;
}
}
@media (min-width: 41.25em) and (max-width: 46.25em) {
h4 {
font-size: 1.18em;
}
}
@media (min-width: 46.25em) and (max-width: 61.25em) {
h4 {
font-size: 1.18em;
}
}
@media (min-width: 61.25em) and (max-width: 81.25em) {
h4 {
font-size: 1.18em;
}
}
@media (min-width: 81.25em) {
h4 {
font-size: 1.18em;
}
}
.l-wrapper {
max-width: 100%;
margin: 0 auto;
padding-right: 12px;
padding-left: 12px;
}
@media (min-width: 41.25em) {
.l-wrapper {
padding-right: 24px;
padding-left: 24px;
}
}
@media (min-width: 46.25em) {
.l-wrapper {
max-width: 34.2556em;
}
}
@media (min-width: 81.25em) {
.l-wrapper {
max-width: 46.97082em;
}
}
.c-button {
background: transparent;
background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.08));
background-color: #4e4e4e;
border-color: #4e4e4e;
border-style: solid;
border-width: 1px;
box-sizing: border-box;
border-radius: 5px;
color: #fff;
cursor: pointer;
display: inline-block;
font: inherit;
font-weight: 300;
margin: 0;
padding: 0.38198em 0.7293em;
margin: 0 0 0.38198em;
position: relative;
text-align: center;
text-decoration: none;
user-select: none;
overflow: hidden;
vertical-align: middle;
}
.c-button:hover, .c-button:focus {
color: #fafafa;
}
@media (min-width: 46.25em) {
.c-button {
font-size: 1.18em;
}
}
.c-button::-moz-focus-inner {
border: 0;
padding: 0;
}
.c-button:hover,
.c-button:focus,
.c-button:active {
outline: 0;
text-decoration: none;
}
.c-button:focus:not(:hover) {
outline: 4px solid #c5dbfc;
}
.c-button--hard {
border-radius: 0;
}
.c-button--green {
color: #ffffff;
background-color: #8ecd73;
border-color: #8ecd73;
}
.c-button--green:hover, .c-button--green:focus, .c-button--green:active {
background-color: #9dd486;
border-color: #9dd486;
outline: none;
}
.c-button--blue {
color: #ffffff;
background-color: #378bb5;
border-color: #378bb5;
}
.c-button--blue:hover, .c-button--blue:focus, .c-button--blue:active {
background-color: #2b6d8e;
border-color: #2b6d8e;
outline: none;
}
.c-offcanvas .c-button {
margin-bottom: 0;
}
.c-button--close-bottom {
position: absolute;
left: 50%;
bottom: -10px;
z-index: 10;
margin-left: -37px;
}
.c-button--close-bottom:hover, .c-button--close-bottom:focus {
outline: none !important;
}
.c-button--close-right-top {
position: absolute;
top: -1px;
right: -1px;
border-radius: 0;
}
.c-button--close-right-top:hover, .c-button--close-right-top:focus {
outline: none !important;
}
.c-button--close-right {
position: absolute;
bottom: 0;
right: 0;
z-index: 1;
width: 100%;
left: 0;
}
.c-button--close-right:hover, .c-button--close-right:focus {
outline: none !important;
}
.c-input:focus {
z-index: 1;
outline: 0;
border-color: #757575;
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
}
.c-input-add-on {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
margin-bottom: 1.5em;
}
.c-input-add-on__field {
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
}
.c-input-add-on__field:not(:first-child) {
margin-left: -1px;
}
.c-input-add-on__field:not(:last-child) {
border-right: 0;
}
.c-input-add-on__item {
margin: 0;
}
.c-input-add-on__field,
.c-input-add-on__item {
border: 1px solid rgba(147, 128, 108, 0.25);
padding: 0.5em 0.75em;
}
.c-input-add-on__field:first-child,
.c-input-add-on__item:first-child {
border-radius: 2px 0 0 2px;
}
.c-input-add-on__field:last-child,
.c-input-add-on__item:last-child {
border-radius: 0 2px 2px 0;
}
.c-menu {
margin: 0;
}
.c-menu--border .c-menu__item {
border-bottom: 1px solid #e0e0e0;
}
.c-menu__item--heading {
padding: 1.18em;
text-indent: -0.27858em;
font-size: 1.2em;
}
@media (min-width: 20em) and (max-width: 41.25em) {
.c-menu__item--heading {
font-size: 1.2em;
}
}
@media (min-width: 41.25em) and (max-width: 46.25em) {
.c-menu__item--heading {
font-size: 1.35em;
}
}
@media (min-width: 46.25em) and (max-width: 61.25em) {
.c-menu__item--heading {
font-size: 1.4em;
}
}
@media (min-width: 61.25em) and (max-width: 81.25em) {
.c-menu__item--heading {
font-size: 1.5em;
}
}
@media (min-width: 81.25em) {
.c-menu__item--heading {
font-size: 1.6em;
}
}
.c-menu__link {
display: block;
width: 100%;
padding: 0.45074em 1.18em;
text-decoration: none;
line-height: 1.618em;
color: rgba(43, 43, 43, 0.9);
font-size: 1.18em;
background: #fafafa;
}
@media (min-width: 20em) and (max-width: 41.25em) {
.c-menu__link {
font-size: 1.18em;
}
}
@media (min-width: 41.25em) and (max-width: 46.25em) {
.c-menu__link {
font-size: 1.18em;
}
}
@media (min-width: 46.25em) and (max-width: 61.25em) {
.c-menu__link {
font-size: 1.18em;
}
}
@media (min-width: 61.25em) and (max-width: 81.25em) {
.c-menu__link {
font-size: 1.18em;
}
}
@media (min-width: 81.25em) {
.c-menu__link {
font-size: 1.18em;
}
}
.c-menu__link:hover, .c-menu__link:focus {
color: #212121;
outline: none;
text-decoration: none;
background: #eee;
}
.c-menu--small .c-menu__link {
font-size: 1.18em;
}
.c-page {
overflow: hidden;
padding-top: 1.6992em;
}
@media (min-width: 20em) and (max-width: 41.25em) {
.c-page {
padding-top: 1.6992em;
}
}
@media (min-width: 41.25em) and (max-width: 46.25em) {
.c-page {
padding-top: 2.15055em;
}
}
@media (min-width: 46.25em) and (max-width: 61.25em) {
.c-page {
padding-top: 2.3128em;
}
}
@media (min-width: 61.25em) and (max-width: 81.25em) {
.c-page {
padding-top: 2.655em;
}
}
@media (min-width: 81.25em) {
.c-page {
padding-top: 3.0208em;
}
}
.c-offcanvas--overflow-top {
overflow: visible;
}
body,
.c-offcanvas-content-wrap {
min-height: 100vh;
background-color: #f5f5f5;
}
.c-offcanvas--shadow.is-closed:after {
content: none;
}
.c-offcanvas--shadow:after {
content: '';
position: absolute;
top: 0;
bottom: 0;
width: 10px;
background: linear-gradient(to right, rgba(0, 0, 0, 0.38) 0%, rgba(0, 0, 0, 0) 100%);
pointer-events: none;
}
.c-offcanvas--shadow-left:after {
left: 0;
}
.c-offcanvas--shadow-right:after {
right: 0;
background: linear-gradient(to left, rgba(0, 0, 0, 0.38) 0%, rgba(0, 0, 0, 0) 100%);
}
.c-offcanvas--bottom.is-open {
box-shadow: 0 -5px 25px rgba(5, 5, 5, 0.38);
}
.c-offcanvas-bg--push.c-offcanvas-bg--push {
background: transparent;
}
.c-offcanvas--push.c-offcanvas--left {
border-right: 1px solid #e0e0e0;
}
.c-offcanvas--push.c-offcanvas--right {
border-left: 1px solid #e0e0e0;
}
.c-offcanvas--top .c-menu__item {
display: inline-flex;
}
.c-callout {
border: 2px solid #bdbdbd;
border-radius: 5px;
background: #eee;
padding: 1.18em;
margin-top: 3.08915em;
}
.c-callout__title {
margin: 0;
}
.c-callout__text {
font-size: 0.98333em;
margin-top: 0;
color: #757575;
}
@media (min-width: 20em) and (max-width: 41.25em) {
.c-callout__text {
font-size: 0.98333em;
}
}
@media (min-width: 41.25em) and (max-width: 46.25em) {
.c-callout__text {
font-size: 0.87407em;
}
}
@media (min-width: 46.25em) and (max-width: 61.25em) {
.c-callout__text {
font-size: 0.84286em;
}
}
@media (min-width: 61.25em) and (max-width: 81.25em) {
.c-callout__text {
font-size: 0.78667em;
}
}
@media (min-width: 81.25em) {
.c-callout__text {
font-size: 0.7375em;
}
}
.c-callout__button {
width: 100%;
}
.c-callout__footer {
color: #424242;
font-size: 0.98333em;
}
@media (min-width: 20em) and (max-width: 41.25em) {
.c-callout__footer {
font-size: 0.98333em;
}
}
@media (min-width: 41.25em) and (max-width: 46.25em) {
.c-callout__footer {
font-size: 0.87407em;
}
}
@media (min-width: 46.25em) and (max-width: 61.25em) {
.c-callout__footer {
font-size: 0.84286em;
}
}
@media (min-width: 61.25em) and (max-width: 81.25em) {
.c-callout__footer {
font-size: 0.78667em;
}
}
@media (min-width: 81.25em) {
.c-callout__footer {
font-size: 0.7375em;
}
}
.c-callout__footer a {
color: inherit;
text-decoration: none;
}
.c-callout__footer a:hover, .c-callout__footer a:focus {
color: #212121;
outline: none;
text-decoration: underline;
}
</style>
</head>
<body>
<!--Offcanvas Content Wrapper-->
<main class="c-offcanvas-content-wrap" role="main" aria-labelledby="accesible-offcanvas">
<div class="c-page l-wrapper u-pos-relative">
<h1 id="accesible-offcanvas"><span class="u-hidden-visually">Examples </span>Accesible Offcanvas</h1>
<h3>Overlay</h3>
<button class="c-button js-offcanvas-trigger" data-offcanvas-trigger="off-canvas-left">Left</button>
</div>
</main>
<!--
Offcanvas Panels
-->
<!--Left-->
<aside class="js-offcanvas" id="off-canvas-left" role="complementary">
<div class="c-offcanvas__inner o-box u-pos-relative">
<ul class="c-menu c-menu--border u-unstyled">
<li class="c-menu__item c-menu__item--heading">Header</li>
<li class="c-menu__item"><a class="c-menu__link" href="#nogo">Home</a></li>
<li class="c-menu__item"><a class="c-menu__link" href="#nogo">About</a></li>
<li class="c-menu__item"><a class="c-menu__link" href="#nogo">Portfolio</a></li>
<li class="c-menu__item"><a class="c-menu__link" href="#nogo">Projects</a></li>
<li class="c-menu__item"><a class="c-menu__link" href="#nogo">Contact</a></li>
<li class="c-menu__item"><a class="c-menu__link" href="#nogo">Home</a></li>
<li class="c-menu__item"><a class="c-menu__link" href="#nogo">About</a></li>
<li class="c-menu__item"><a class="c-menu__link" href="#nogo">Portfolio</a></li>
<li class="c-menu__item"><a class="c-menu__link" href="#nogo">Projects</a></li>
<li class="c-menu__item"><a class="c-menu__link" href="#nogo">Contact</a></li>
<li class="c-menu__item"><a class="c-menu__link" href="#nogo">Home</a></li>
<li class="c-menu__item"><a class="c-menu__link" href="#nogo">About</a></li>
<li class="c-menu__item"><a class="c-menu__link" href="#nogo">Portfolio</a></li>
<li class="c-menu__item"><a class="c-menu__link" href="#nogo">Projects</a></li>
<li class="c-menu__item"><a class="c-menu__link" href="#nogo">Contact</a></li>
<li class="c-menu__item"><a class="c-menu__link" href="#nogo">Home</a></li>
<li class="c-menu__item"><a class="c-menu__link" href="#nogo">About</a></li>
<li class="c-menu__item"><a class="c-menu__link" href="#nogo">Portfolio</a></li>
<li class="c-menu__item"><a class="c-menu__link" href="#nogo">Projects</a></li>
<li class="c-menu__item"><a class="c-menu__link" href="#nogo">Contact</a></li>
</ul>
</ul>
</div>
</aside>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js'></script>
<script src='https://npmcdn.com/[email protected]/dist/_js/js-offcanvas.pkgd.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>
On the Website the only listed Dependencies are:
On the Github the listed Dependencies are:
Which is it then?
@vmitsaras
Thanks for your sharing...
It's very usefull.
But I wonder, is it working with Bootstrap?
Thanks.
Best regards.
I've tried different options but regardless of what stated in the docs, I am still not able to make it work.
I've created a pen here http://codepen.io/yumyo/pen/MpXqam/
While it is possible to see that js-offcanvas adds markup to the aside the trigger button does not actually "trigger" any class change.
Hello Vasileios,
I just wanted to say thank you for creating and sharing this incredible off canvas javascript.
I am new to using sidebars (late to the party) and looked at a number of alternatives,
This is definitely the slickest and nicest implementation I have seen.
This took me the longest to setup nicely for my project (stripping out superfluous css from the example and trying to work out options etc without breaking things :)), but it was worth it for sure.
ps a feature request (I think already requested) - being able to specify widths in different breakpoints (eg 100% width at 480px or less, 70% width at 799px or less, 40% for 800px and above etc). I know this can be done in the css per the example you provided but it takes a fair bit of code given the css transforms etc.
pps a codepen with swiping plugin as mentioned previously would be good. I tried getting it working per your example code in that thread but could not get either version to work.
Thanks again and keep up the great work.
Is it possible to set a value for the speed of the "push in"?
Is possible to disable ESC key to close the offcanvas?
I've tried this:
$(document).off(‘keyup.offcanvas’);
Thanks
First, this is the best thing I found on github this year.
It would be possible to put the off-canvas inside a div, in a boxed layout. Similar to the example I made in the image below?
Can someone help me? Thank you.
What does that do? Should we use it?
tia.
Css modifier class "overlay" is not set correctly on the element "c-offcanvas". It will come out to "c-offcanvas-- overlay" instead of "c-offcanvas--overlay". Thus some important styles aren't applied to this element. Same issue with the element "c-offcanvas-bg".
Simple demo gives TypeError.
Hello, what CSS do I have to set to have the overlay cover 50% of the screen? I tried to do:
.c-offcanvas {
width: 50%;
}
which doesn't result in a smooth animation (especially on closing).
Describe the bug
After opening the drawer the aria-expanded attribute stays the same
Expected behavior
Set aria-expanded="true"
Hi! Thank you for the lovely plugin.
I am using jQuery to force open the offcanvas on page load, but this is done using the standard sliding animation and when paging through the site multiple sliding animations become distracting.
Is there a way to force offCanvas to abandon the sliding animation for a particular open operation OR to make it load in an opened state?
Thanks
// Define offcanvas-js dataOffcanvas object
var dataOffcanvas = $('#off-canvas').data('offcanvas-component');
// Responsive Open/close
responsiveHamburger = function() {
if (window.innerWidth > 768) { dataOffcanvas.open(); }
else { dataOffcanvas.close(); }
}
// If window width > 768px then automatically open hamburger menu, wait for resize to stop
var responsiveHamburger_lazy = _.debounce(responsiveHamburger,100);
$(window).resize(responsiveHamburger_lazy);
// Remove d-none from aside one the page is fully loaded (fixes flickering)
$("aside").removeClass("d-none");
// Open/Close based on screen size on load
responsiveHamburger();
When a textbox is inside of the offcanvas panel the offcanvas panel closes because on the android it auto loads the keyboard screen. I do not see a workaround for this.
Is your feature request related to a problem? Please describe.
All examples show just one section off-canvas. For an app I need this navigation:
[ main ] | [ section1 ] | [ section 2]
Where section 1 and section 2 are off-canvas for main. Then an item in main (button/link) opens section 1, there section 2 is off-canvas for section 1, and an item in section 1 (button/link) opens section 2.
I'm not sure if something like this is supported.
When closing, the text gets left behind and blurred across the screen. It is happening across the board.
js-offcanvas is often used with bootstrap 4 - will there be a pure javascript version of js-offcanvas .js for bootstrap 5 ?
Hello Vasileios,
I have come across one issue in using your amazing off canvas script.
I have got it working pretty well with my content but I am having an issue with the sticky header...
The sticky header does not work in push or reveal mode. Adding the "c-offcanvas-content-wrap" class to the #wrapper div (or as a div outside or inside the wrapper) breaks the sticky header. Full code shown in the codepens.
<div class="c-offcanvas-content-wrap"></div>
<div id="ocSB" class="js-offcanvas" data-offcanvas-options='{"modifiers":"right,push"}' role="complementary" hidden></div>
.c-offcanvas-content-wrap { position: relative; overflow: hidden; z-index: 3; }
Whereas the sticky header works fine in overlay mode (the header goes pink when sticky). "c-offcanvas-content-wrap" div not needed for overlay mode and was renamed for simplicty sake.
eg <div class="c-offcanvas-content-wrap22"></div>
<div id="ocSB" class="js-offcanvas" data-offcanvas-options='{"modifiers":"right,overlay"}' role="complementary" hidden></div>
I have done some web searching but have not found a solution. I am not sure if this is a javascript issue or a css issue or if I will just have to use the overlay mode when I want to use a sticky header.
My gut feel is that its a css issue. But really I have no clue as the transform code is pretty complex for me. Perhaps I can't push / reveal an already fixed item (the sticky header)?
Any ideas?
Thanks in advance and all the best.
When its height is bigger than the viewport, the offcanvas cannot be scrolled. All demos but https://codepen.io/vmitsaras/pen/wrLePg exhibit this behaviour.
I tried to make it work by absolute positioning the offcanvas container. The scrolling works, but when opening, the offcanvas makes the body scroll to top, which is an undesirable behaviour. I suppose one way of solving this would be reading the scroll position at the opening time, then setting the top Css property.
Is there an easier way of achieving scrollable offcanvas?
Hello,
I'm trying to make the push work using this code:
$('#nav-offcanvas').offcanvas({
modifiers: 'right, push', // default options
triggerButton: '#offcanvas-toggle' // btn to open offcanvas
});
That does not work for me, still getting the overlay nav. Am I missing something?
Thanks!
On of the deps of this project is Modernizr, which on itself is not a problem. But what features of Modernzir are used? I don't use Modernizr in my project, and I dpn't want to use the entire Modernzir build.
Alternatively, is there a way to use OffCanvas without Modernizr? I'm trying to use the normal minified files (not the pkgd ones), which throws an error
TypeError: e is undefined
so on resizing the browser when off-canvas is open I had it close automatically.
You seems to have an option for that, I tried both on data attributes:
data-offcanvas-options='{ "modifiers": "bottom,overlay" }' data-offcanvas-options='{"resize":"true" }'
and
data-offcanvas-options='{ "modifiers": "bottom,overlay" , "resize":"true" }'
but none works
w.document is always null
Hi there. I'm messing around with this, and overall it works great, but I've run into an issue: I'm trying to use this as an enhancement for sidebars only on smaller screens. On larger screens the sidebars are usually placed on either side of the content, and having them off canvas isn't useful. There doesn't seem to be any way to destroy the off canvas functionality that I can see, or have it only apply at certain screen sizes - which is ultimately what I'd be doing. Any chance of a destroy method or way to disable this on certain criteria, so content is displayed as it would be before it was modified by this?
Hi there. I've been looking around for an accessible off canvas that also supports swipe gestures, but that seems to be difficult to find. Is there any chance gestures may be added to js-offcanvas at some point? Currently, I'm planning to retrofit accessibility stuff onto Snap.js, which seems to be very good on the gesture front, but really poor with accessibility, but I'd much rather use a solution built from the ground up with accessibility in mind.
Just downloaded and set everything up using the Codepen example. I see the Left button and the para text I put in the aside display immediately on page load and clicking the button does nothing. No console error and the css and js files are where they're supposed to be.
Help please, html is below. This on OSX Catalina running Chrome.
`
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Offcanvas</title>
<link rel="stylesheet" href="https://cdn.kleenedge.com/dev/css/js-offcanvas.css">
</head>
<body>
<main class="c-offcanvas-content-wrap" role="main">
<button class="c-button js-offcanvas-trigger" data-offcanvas-trigger="off-canvas-left">Left</button>
</main>
<!--Offcanvas Panels-->
<aside class="js-offcanvas" id="off-canvas-left" role="complementary"><p>Here it is!</p></aside>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.kleenedge.com/dev/js/js-offcanvas.pkgd.js"</script>
<script>
$(function () {
$(document).trigger("enhance");
});
</script>
</body>
A small suggestion, when closing overlays, the background pops from black to transparent which looks a bit jarring. Just like how the background fades in when opening, it would be nice if it fades out when closing overlays.
Currently, a hackish way to accomplish this is by adding a small CSS snippet:
.c-offcanvas-bg.is-animating.overlay.is-open {
background: rgba(0, 0, 0, 0.68);
}
.c-offcanvas-bg.is-animating.overlay {
background: none;
}I think the best way would be however to replace is-animating with two classes called is-opening and is-closing
Is there a way to make the open faster?
I looked at docs and can't see it.
ps: we use this at metabake.org
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.