estou fazendo um menu off canvas
, na verdade ele está sempre na tela, e quando eu clico no botão, o que se move é o meu main
, o problema está sendo o overflow, quando eu abro o menu ele não deveria deixar eu dar scroll
, mas sim fechar o menu, caso eu clique em qualquer coisa fora do mesmo. Mas ele está me dando overflow
na página toda. alguma sugestão? PS: Tirei a inspiração deste site, crédito a eles, http://www.x-apps.com.br/ .
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>
<div id="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>
button
– Tiago Silveira 6/06/17 às 10:46