メニューの問題OffScreen

Question

私はオフキャンバスのメニューを持っています。彼はいつも画面に表示されていますが、メインのdivは彼の上にあります。私はボタンをクリックするとメインスワイプを右に表示し、 OK？ OK。しかし、私は3つの問題があります：

1. メニューがアクティブになると、ページは自動的に上にスクロールされますが、スクロールは無効にする必要があります。
2. 私がJqueryで変更しても、メニューを閉じると、私の体はスクロールしません。
3. メニューのリンクが機能しません。

私はTranslateX()を使用しようとしましたが、メニューは表示されません。私は間違っている？

私はインスピレーション、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; 
 
    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

次のコードを試してみてください私のウェブサイトhttps://tiagosilveiraa.github.io/です。タグがulの内側にあることはできないので、私はHTMLをリファクタリングしました。スクロールの問題を避けるためにオーバーフローをオーバーフロー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>