I have implemented a very basic off-canvas navigation(http://blog.tomri.ch/super-simple-off-canvas-menu-navigation/). The only issue I'm having is that you can't scroll the menu, this is especially problematic in mobile landscape mode, where the menu extends below the viewable screen area.
I am wondering if there is a way, when the navigation menu is open, to prevent the content within the page-wrapper
div from scrolling and enable scrolling in the off-canvas navigation, and, if possible, not show a big ugly scrollbar on the navigation.
HTML:
<nav id="menu">
<a href="#menu" class="menu-link"></a>
<ul>
<span><a href="#">Title</a></span>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Blog</a></li>
</ul>
</nav>
<div class="page-wrapper">
Body Content Here
</div>
CSS:
#menu {
position: fixed;
top: 0;
bottom: 0;
width: 13.755em;
right: -13.755em;
height: 100%;
-webkit-transform: translate(0px, 0px);
-moz-transform: translate(0px, 0px);
-o-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
transform: translate(0px, 0px);
-webkit-transition: 0.15s ease;
-moz-transition: 0.15s ease;
-o-transition: 0.15s ease;
transition: 0.15s ease;
}
#menu.active {
-webkit-transform: translate(-13.755em, 0px);
-moz-transform: translate(-13.755em, 0px);
-o-transform: translate(-13.755em, 0px);
-ms-transform: translate(-13.755em, 0px);
transform: translate(-13.755em, 0px);
}
.page-wrapper {
-webkit-transform: translate(0px, 0px);
-moz-transform: translate(0px, 0px);
-o-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
transform: translate(0px, 0px);
-webkit-transition: 0.15s ease;
-moz-transition: 0.15s ease;
-o-transition: 0.15s ease;
transition: 0.15s ease;
}
.page-wrapper.active {
-webkit-transform: translate(-13.725em, 0px);
-moz-transform: translate(-13.725em, 0px);
-o-transform: translate(-13.725em, 0px);
-ms-transform: translate(-13.725em, 0px);
transform: translate(-13.725em, 0px);
}
.menu-link {
position: absolute;
top: 15px;
left: -50px;
}
Javascript:
$(".menu-link").click(function(){
$("#menu").toggleClass("active");
$(".page-wrapper").toggleClass("active");
});