菜單問題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>