Here is my own implementation.
I had issues with overflow
not working properly whilst the offcanvas menu was active. The way I overcame the issue was to apply both overflow: hidden
and position: fixed
on the html
, body
and #page
tags, which forces a noscroll on anything but the menu itself.
Hope it helps someone!
HTML:
<header id="masthead">
<button type="button" class="toggle">Toggle</button>
</header>
<nav id="offcanvas-menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<div id="page">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pellentesque erat vel massa porttitor, ac sagittis velit vehicula. Nunc iaculis sapien justo, ac viverra mi convallis et. Sed ac massa lacinia, varius neque et, varius mi. Integer in ligula vitae arcu mollis mollis ut a tortor. Fusce quis tellus fringilla, venenatis arcu posuere, suscipit libero. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus hendrerit sodales leo, ac pellentesque odio fermentum nec. Ut feugiat in tortor quis cursus. Praesent porttitor imperdiet orci. Morbi sed ultricies velit. Nulla maximus rhoncus congue.</p>
<p>Proin nec pharetra tortor, eu sollicitudin ipsum. Morbi turpis magna, feugiat ornare pretium a, tristique ac urna. Phasellus rutrum sem a turpis tincidunt viverra in eget odio. Mauris a nibh eget lacus volutpat lobortis. Sed convallis posuere nisl, id blandit est posuere a. Duis tempor euismod nunc, ut suscipit ligula feugiat in. Phasellus congue nibh non vulputate consectetur.</p>
</div>
LESS:
html.offcanvas-active,
html.offcanvas-active body
html.offcanvas-active #page {
overflow: hidden;
position: fixed;
}
html.offcanvas-active {
#masthead,
#page {
-webkit-transform: translate(-250px);
-moz-transform: translate(-250px);
transform: translate(-250px);
}
#offcanvas-menu {
right: 0;
}
}
body {
font-family: Arial, sans-serif;
}
#masthead {
.toggle {
float: right;
}
&:after {
visibility: hidden;
display: block;
content: "";
clear: both;
}
}
#masthead,
#page {
position: relative;
-webkit-transition: transform 1s ease-in-out;
-moz-transition: transform 1s ease-in-out;
transition: transform 1s ease-in-out;
}
#offcanvas-menu {
position: fixed;
top: 0; right: -250px;
width: 250px; height: 100%;
background-color: orange;
-webkit-transition: right 1s ease-in-out;
-moz-transition: right 1s ease-in-out;
transition: right 1s ease-in-out;
ul {
margin: 0; padding-left: 0;
list-style: none;
li {
a {
display: block;
padding: 10px 15px;
text-decoration: none;
color: #fff;
}
}
}
}
JS/jQuery:
$(document).ready(function() {
$('#masthead').on('click', '.toggle', function() {
$('html').toggleClass('offcanvas-active');
});
});