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.我的代码

回答

相关问题