1. Einführung

Ich programmiere meine erste Website mit Bootstrap 3. Und ich benutze HTML, Css und JavaScript.Hamburger Menü für Rastergrößen sichtbar

2. Das Problem

ich ein Hamburger-Menü vorgenommen habe, die nur in dem zusätzlichen kleinen mobilen Netz (1-768px) sichtbar sein sollen. Die Speisekarte funktioniert perfekt in diesem extra kleinen Raster. Aber wenn ich das Browserfenster vergrößere, bleibt das Hamburgermenü im kleinen Raster (769-992px) sichtbar.

Ich habe versucht, mit meinem Javascript herumzuspielen und suchte nach Antworten, aber ohne Erfolg.

Here is the visual representation of the problem!

3. My-Code

<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>

Quelle

2016-11-29 Ernst Paul Swens

Inline-Stil (style = "display: block;") ist es immer noch so #hamburgermenu {display: none;} ist nutzlos .

Es gibt viele Lösungen, die leicht ist, eine mediaquery mit #hamburgermenu zu setzen:;

Quelle

2016-11-29 10:41:12 Ianis

Sie müssen nicht manuell mit der Sichtbarkeit Problem umgehen, wenn Sie bootsrap verwenden {display keine wichtig!}. Bootstrap verfügt über spezielle Hilfsklassen, die HTML-Elementen zugewiesen werden können, um ihren Sichtbarkeitsstatus in reaktionsfähigen Apps zu verwalten.

Sie können darüber lesen Sie hier: http://getbootstrap.com/css/

Ein Beispiel, wie Sie ein sichtbares Burger Menüsymbol auf kleinen Bildschirmen und eine unsichtbare auf großen Bildschirmen verwalten kann wie folgt sein könnte:

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

Die Schaltfläche wäre nur auf kleinen Bildschirmen sichtbar.

EDIT

mit dem visiblity Ihres Menü beschäftigen würde ich Ihnen vorschlagen Klassen zu Ihrem Menü hinzufügen statt mit Inline-Styling.

die Profis von Klassen Hinzufügen sind: Sie leicht in Ihrem Stylesheet-Stil kann Es werden keine anderen Stylings außer Kraft setzen, die nach uns kommen dieses

Die Nachteile der Zugabe Klassen sind: Sie müssen erstellen eine Klasse in css;) (die eine con) ist nicht

Deshalb würde ich mit dieser Methode zu Ihrem click function gehen

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

Quelle

2016-11-29 10:43:10

Thank you! Es funktionierte. Danke, dass Sie sich die Zeit genommen haben, die Gründe für Ihre Lösungen zu erklären! –

Ich bin froh, dass ich helfen konnte. Vergiss nicht, die Antwort zu akzeptieren, damit andere wissen, dass es dir geholfen hat –

Hamburger Menü für Rastergrößen sichtbar

1. Einführung

2. Das Problem

3. My-Code

Antwort

Verwandte Themen