Ich versuche eine reaktionsschnelle Navigation zu implementieren. Hier ist eine Geige von dem, was ich bisher getan habe: https://jsfiddle.net/a16qwd20/4/

Aus irgendeinem Grund funktioniert Javascript nicht und das Menü wird nicht in JS Fiddle angezeigt, aber es funktioniert gut in meinem Code, der in Tags eingeschlossen ist.

Im aktuellen Zustand werden die Navigationslinks oberhalb von 580px korrekt angezeigt, das Menüsymbol ist jedoch weiterhin sichtbar. Ich möchte, dass das Menüsymbol nur sichtbar ist, wenn die Anzeige unter 580px liegt, wenn über 580 NUR die Links!

Hier ist mein CSS für die Navigation, bevor die Medienabfrage startet:

#navigation {
 max-width: 100%;
 background-color: #333;
 padding: 0 1.5% 0 1.5%;
 margin: 0px;
}

#navigation ul {
 padding: 0px;
}

#navigation ul li {
 display: inline-block;
 padding: 10px 1.5% 10px 1.5% ;
}

#navigation ul li a {
 text-decoration: none;
 color: #ffffff;
 font-size: 1.2em;
}

#navigation ul li a:hover {
 color: #000000;
 text-decoration: none;
}

Jede Hilfe dankbar.

-1
Hexana 10 Aug. 2015 im 17:05

4 Antworten

Beste Antwort

Sie haben der Schaltfläche nicht gesagt, dass sie sich überhaupt ausblenden soll. Fügen Sie diese einfach zum Haupt-CSS hinzu

.menu_button {
display: none;
}

Die Schaltfläche wird sichtbar, wenn die Medienabfrage aktiviert wird.

JSfiddle Demo

2
Paulie_D 10 Aug. 2015 im 14:15

Überprüfen Sie https://jsfiddle.net/a16qwd20/7/

Grundsätzlich muss der js-Code geladen werden, nachdem das Element geladen wurde.

var originalNavClasses;

function toggleNav() {
    var elem = document.getElementById('navigation_list');
    var classes = elem.className;
    if (originalNavClasses === undefined) {
        originalNavClasses = classes;
    }
    elem.className = /expanded/.test(classes) ? originalNavClasses : originalNavClasses + ' expanded';
}
-1
Abhinav 10 Aug. 2015 im 14:13

Wenn Sie onload oder onDomReady verwenden, wird Ihr Code in eine andere Funktion eingeschlossen, die beim Ereignis load oder ready aufgerufen wird. Daher ist Ihre Funktion von außerhalb dieser Funktion nicht zugänglich, sodass Ihr Javascript-Code in jsFiddle nicht funktioniert.

Versuche dies

.menu_button
{
     display:none;
}

Demo hier

0
Shrinivas Pai 10 Aug. 2015 im 14:14

Hier ist eine Möglichkeit, dies zu erreichen. jsfiddle

@media only screen and (min-width : 580px) {
  .hide{
    display: none;
  }
}

    <a class="menu_button hide" href="#footer_nav" onclick="toggleNav(); return false;">&#9776;  MENU</a>

Sie können Ihrer Menüschaltfläche eine Klasse hinzufügen, die anzeigt, dass sie ausgeblendet werden soll, wenn die Anzeige größer als 580 Pixel ist.

1
Brian Sekelsky 10 Aug. 2015 im 14:19