Side Menu / Navigation - Mobile Only with CSS
This demo shows how to make a mobile only side navigation. The Canvas is "closed" with CSS if left open and switched to desktop.
header .toggle-panel { display: none; }
header ul { display: block; }
@media only screen and (min-width : 769px) {
/* Closes the Panel on window resize from small to large. */
/* Important tags aren't always bad otherwise you can close with JS on resize. */
.scotch-panel-canvas {
-o-transform: translate3d(0px, 0px, 0px) !important;
-ms-transform: translate3d(0px, 0px, 0px) !important;
-moz-transform: translate3d(0px, 0px, 0px) !important;
-webkit-transform: translate3d(0px, 0px, 0px) !important;
transform: translate3d(0px, 0px, 0px) !important;
}
}
@media only screen and (max-width : 768px) {
header .toggle-panel { display: block; }
header ul { display: none; }
}
$('#scotch-panel').scotchPanel({
containerSelector: 'body',
direction: 'right',
duration: 300,
transition: 'ease',
clickSelector: '.toggle-panel',
distanceX: '70%',
enableEscapeKey: true
});