1.はじめに

私は最初のウェブサイトをブートストラップ3でプログラミングしています.Html、Css、JavaScriptを使用しています。グリッドサイズのハンバーガーメニュー

2.私は、余分な小さなモバイルグリッド（1-768px）に表示されなければならないハンバーガーメニューを作った問題

。この特別な小さなグリッドでもメニューは完璧に機能します。しかし、ブラウザウィンドウを拡大すると、ハンバーガーメニューが小さなグリッドに表示され続けます（769-992px）。

私は自分のJavascriptを使いこなしてみましたが、答えは見つけられましたが、成功はありませんでした。無用である：{なしディスプレイ};

Here is the visual representation of the problem!

3.マイコード

<html> 
<head> 
    <script> 
     function toggle_visibility(id) { 
      var e = document.getElementById('hamburgermenu'); 
      if(e.style.display == 'block') 
       e.style.display = 'none'; 
      else 
       e.style.display = 'block'; 
      } 
    </script> 

    <style> 
     #hamburgermenu { 
      display: none; 
      position: absolute; 
      z-index: 1000000; 

      height: 100%; 
      width: 100%; 
      margin-top: 50px; 
      background-color: rgba(0,0,0,.7); 
     } 
    </style> 
</head> 

<body> 
    <!-- HTML BUTTON FOR HIDE AND SHOW --> 
    <button onclick="toggle_visibility('hamburgermenu');"> 
     <span class="glyphicon glyphicon-option-horizontal"></span> 
    </button> 
    <!-- HTML BUTTON FOR HIDE AND SHOW --> 

    <!-- HTML MOBILE MENU --> 
    <div id="hamburgermenu" > 
     <ul class="mobilemenu"> 
      <li><a href="#">PROJECTEN</a></li> 
      <li><a href="#">SKILLSET</a></li> 
      <li><a href="#">STAGE</a></li> 
      <li><a href="#">OVER MIJ</a></li> 
      <li><a href="#">CONTACT</a></li> 
     </ul> 
    </div> 
    <!-- END HTML MOBILE MENU --> 
</body>

出典

2016-11-29 Ernst Paul Swens

インラインスタイル（スタイル= "表示ブロック"）#hamburgermenuがのでまだそこにあります。

多くのソリューションは、簡単なものは#hamburgermenuでmediaqueryを設定することでありますが、{表示：無し重要;}

出典

2016-11-29 10:41:12 Ianis

あなたがbootsrapを使用する場合、手動での視認性の問題に対処する必要はありません。ブートストラップには特別なヘルパークラスがあり、応答可能なアプリケーションでの可視性状態を管理するためにhtml要素に割り当てることができます。

あなたはここでそれについて読むことができます。http://getbootstrap.com/css/

あなたは小さな画面上で可視バーガーメニューアイコンと大きな画面で目に見えないを管理する方法の例を以下のようになり：

<button class="visible-xs hidden-sm hidden-md hidden-lg">My Button</button>

そのボタンを小さな画面でしか見ることができません。私が代わりに、インラインスタイルを使用してのあなたのメニューにクラスを追加するようにお勧めしますあなたのメニューの可視性に対処するために

EDIT

。クラスを追加する

長所は、以下のとおりです。あなたが簡単にそれはこの1つ

クラスを追加するの短所後に来る他のスタイリングを上書きすることはありません、あなたのスタイルシートでそれをスタイリングすることができます：あなたが作成する必要があります CONをイマイチ）（）

ありがとうしたがって、私はあなたのclick function

function toggle_visibility(id) { 
    var e = document.getElementById('hamburgermenu'); 
    if(e.getAttribute('class') == 'my-class my-visible-class') 
     e.setAttribute('class', 'my-class') 
    else 
     e.setAttribute('class', 'my-class my-visible-class') 
    } 
} // you also missed this closing bracket

出典

2016-11-29 10:43:10

にこの方法で行くと、CSSでクラス！出来た。あなたのソリューションの背後にある理由を説明してくれてありがとう！ –

私は助けてうれしいです。その答えを受け入れることを忘れないでください。 –

グリッドサイズのハンバーガーメニュー

1.はじめに

2.私は、余分な小さなモバイルグリッド（1-768px）に表示されなければならないハンバーガーメニューを作った問題

3.マイコード

答えて

関連する問題