1.介紹

我使用Bootstrap 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 {顯示：無;}是無用。

解決方法有很多，簡單一個是設置mediaquery與#hamburgermenu：;

來源

2016-11-29 10:41:12 Ianis

您不必在使用bootsrap手動處理能見度問題{顯示無重要！}。 Bootstrap具有特殊的助手類，可以將它們分配給html元素，以便在響應式應用程序中管理其可見性狀態。

你可以閱讀一下：http://getbootstrap.com/css/

一個例子，你如何管理在小屏幕上可見漢堡菜單圖標，並在大屏幕的無形可能是如下：

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

那個按鈕只能在小屏幕上顯示。

編輯

爲了對付你的菜單，我建議你到類添加到您的菜單，而不是使用內嵌樣式的可見性。

添加類的優點是：您可以輕鬆地設置樣式在樣式表它不會覆蓋之後來到任何其他樣式這個

添加類的缺點是：你必須創建在CSS類）（其心不是一個反面）

所以我會去用這種方法你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

謝謝！有效。感謝您花時間解釋解決方案背後的原因！ –

很高興我能幫到你。不要忘記接受答案，以便其他人知道它對你有幫助 –

網格尺寸可見的漢堡菜單

1.介紹

2.我已經做了漢堡包菜單，只應在超小型移動網（1-768px）可見問題

3.我的代碼

回答

相關問題