Side Menu / Navigation - Mobile Only with JS
This demo shows how to make a mobile only side navigation. The panel will be closed with JS if left open and switched to desktop.
header .toggle-panel { display: none; }
header ul { display: block; }
@media only screen and (max-width : 768px) {
header .toggle-panel { display: block; }
header ul { display: none; }
}
var scotchPanel = $('#scotch-panel').scotchPanel({
containerSelector: 'body',
direction: 'right',
duration: 300,
transition: 'ease',
clickSelector: '.toggle-panel',
distanceX: '70%',
enableEscapeKey: true
});
$(window).resize(function() {
if ($(window).width() >= 769 && $('.scotch-panel-canvas').hasClass('scotch-is-showing')) {
scotchPanel.close();
}
});