I'm doing a off canvas
menu, actually it's always on the screen, and when I click the button, what moves is my main
, the problem being overflow, when I open the menu it should not let me give scroll
, but rather close the menu, in case I click anything out of it. But he's giving me overflow
on the whole page. any suggestion? PS: I took the inspiration from this site, credit to them, link .
var menu = false;
$('#hamburguer').click(function() {
if (menu === false) {
mostraCanvas();
} else {
escondeCanvas();
}
});
function escondeCanvas() {
$("#main").css("padding-left", "0");
$("html, body").css("overflow", "auto");
menu = false;
}
function mostraCanvas() {
$("#main").css("padding-left", "50vw");
$("html, body").css("overflow", "hidden");
menu = true;
}
$('.off-item').click(function() {
escondeCanvas();
});
.off-canvas{
padding-top: 10px;
left: 0;
background-color: #292929;
height: 100vh;
width: 50vw;
position: fixed;
text-align: left;
overflow-y: hidden;
overflow-x: hidden;
z-index: -1;
}
#main{
z-index: 9999;
position: absolute;
margin: 0 !important;
transition: all .2s linear;
-webkit-transition: padding .2s linear;
-moz-transition: padding .2s linear;
-o-transition: padding .2s linear;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divid="main">
<div class="topo" id="topo">
<button id="hamburguer"><h1><span class="glyphicon glyphicon-menu-hamburger blue btn-nav"></span></h1><button>
</div>
<nav class="navbar" id="navbar">
<ul>
<a href="#banner" id="linkbanner">
<li class="nav-item">
<h2>Inicio</h2>
</li>
</a>
<a href="#sobremim">
<li class="nav-item">
<h2>Sobre Mim</h2>
</li>
</a>
<a href="#portfolio">
<li class="nav-item">
<h2>Portfólio</h2>
</li>
</a>
<a href="#habilidades">
<li class="nav-item">
<h2>Habilidades</h2>
</li>
</a>
<a href="#contato">
<li class="nav-item">
<h2>Contato</h2>
</li>
</a>
</ul>
</nav>
blablabla até o fim do main...
</div>