offside-js/dist/offside-test-no-css-3d-transforms.css

Minimal JavaScript kit without library dependencies to push things off-canvas using just class manipulation

/* Off-canvas element CSS */
.offside {
    position: fixed;
    width: 200px;
    height: 100%;
    top: 0;
    z-index: 9999;
    overflow: auto;
    -webkit-overflow-scrolling: touch; /* enables momentum scrolling in iOS overflow elements */
}

/* Left off-canvas elements default status: out of the page */
.offside,
.offside--left {
    left: -200px;
}

/* Right off-canvas elements default status: out of the page */
.offside--right {
    left: auto;
    right: -200px;
}



/* Fallback movements for browser not supporting CSS 3d Transitions
----------------------------------------------- */
.no-csstransforms3d .offside-sliding-element {
    overflow-x: hidden;
    position: relative;
}

/* Element is open: off-canvas element slides in */
.no-csstransforms3d .offside--left.is-open {
    left: 0;
}

.no-csstransforms3d .offside--right.is-open {
    right: 0;
}

/* Element is open: container elements slide out */
.no-csstransforms3d > .offside-js--is-left .offside-sliding-element {
    right: -200px;
}

.no-csstransforms3d > .offside-js--is-right .offside-sliding-element {
    left: -200px;
}