HTML markup
|
1 2 3 4 |
<aside class="ct-sidebar ct-blog__sidebar"> <div class="ct-sidebar__inner"> </div> </aside> |
Screenshot
Sidebar
To swap sidebar on mobile you need add is-sidebar class on body
HTML markup
|
1 |
<body class"is-sidebar">...</body> |
Screenshot
Sidebar Mobile
JavaScript
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
/* Sidebar */ if (el_body.hasClass('is-sidebar') && device_width < 992 && (device.mobile() || device.tablet())) { /* Sidebar Toggle */ sidebar_toggle = $('.ct-sidebar__mobile-toggle'); sidebar_toggle.on('click', function(e) { e.preventDefault(); if (el_html.hasClass('sidebar-open')) { el_html.removeClass('sidebar-open'); } else { el_html.addClass('sidebar-open'); } return false; }); /* Sidebar */ sidebar = $('.ct-sidebar'); sidebar.hammer().bind('swipeleft', function() { return el_html.addClass('sidebar-open'); }); el_body.hammer().bind('swiperight', function() { return el_html.removeClass('sidebar-open'); }); } |