菜单问题OffScreen

Question

我有一个画布菜单，他总是在屏幕上，但我的主要div在他上面，só，当我点击按钮，主要向右滑动，然后你可以看到菜单，好？好。但我有3个问题：

1. 当菜单被激活时，页面自动滚动到顶部，但它应该只禁用滚动。
2. 当我关闭菜单时，即使通过Jquery更改了它，我的身体也不会滚动。
3. 菜单的链接不起作用。

我试过使用TranslateX()，但它没有显示菜单。我在哪里错了？

我使用这个网站为灵感，http://www.x-apps.com.br/的菜单，这就是我的网站https://tiagosilveiraa.github.io/

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; 
 
    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> 
 
    ...body stuff here... 
 
    </div>

Answer 1

试试下面的代码。我重构了html，因为标签不能在ul内部。我也改变溢出到overflow-x以避免滚动问题。我希望它有帮助。

var menu = false; 
 
$('#hamburguer').click(function() { 
 
    if (menu === false) { 
 
     mostraCanvas(); 
 
    } else { 
 
     escondeCanvas(); 
 
    } 
 
}); 
 

 
function escondeCanvas() { 
 
    $("#main").css("padding-left", "0"); 
 
    $("body").css("overflow-x", ""); 
 

 
    menu = false; 
 
} 
 

 
function mostraCanvas() { 
 
    $("#main").css("padding-left", "50vw"); 
 
    $("body").css("overflow-x", "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; 
 
    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> 
 
      <li class="nav-item"> 
 
      <a href="#banner" id="linkbanner"> 
 
       <h2>Inicio</h2> 
 
      </a> 
 
      </li> 
 
      <li class="nav-item"> 
 
      <a href="#sobremim"> 
 
       <h2>Sobre Mim</h2> 
 
      </a> 
 
      </li> 
 
      <li class="nav-item"> 
 
      <a href="#portfolio"> 
 
       <h2>Portfólio</h2> 
 
      </a> 
 
      </li> 
 
      <li class="nav-item"> 
 
      <a href="#habilidades"> 
 
       <h2>Habilidades</h2> 
 
      </a> 
 
      </li> 
 
      <li class="nav-item"> 
 
      <a href="#contato"> 
 
       <h2>Contato</h2> 
 
      </a> 
 
      </li> 
 
     </ul> 
 
     </nav> 
 
    ...body stuff here... 
 
    </div>