Ideal zum Lernen:
Kurs als Videos
Video-Kurs HTML5, CSS
& Webdesign
HTML-Kurs, CSS u. Webdesign lernen & die eigene Website erstellen
Videos eBook Forum Kontakt

Toggle Menü ohne JavaScript für mobile Navigation

Wir wollen eine einfache und JavaScript-freie Lösung für ein Menü, das sich bei kleineren Auflösungen für Handy und Tablett automatisch ändert. Das funktioniert bei wenigen Steuerungspunkten sehr galant über HTML und CSS. So sieht unser fertiges Ergebnis dann aus:

bei genügend Platz ist die Navigation oben immer sichtbar und direkt anklickbar
bei genügend Platz ist die Navigation oben immer sichtbar und direkt anklickbar

Bei kleineren Displays wird automatisch umgeschaltet auf ein Toggle-Menü und die Website kann auf dem Handy optimal genutzt werden.

wir bekommen automatisch ein Toggle-Menü
wir bekommen automatisch ein Toggle-Menü
und beim Anklicken werden die Menüpunkte angezeigt
und beim Anklicken werden die Menüpunkte angezeigt

Das Ganze ist komplett ohne JavaScript und einfach umsetzbar – im folgendem die Schritt für Schritt Erklärung zum Nachbauen.

Diese schöne Lösung für ein Toggle Menü funktioniert über die CSS-Pseudoklasse :target

Normalerweise wird man diese für Sprungmarken innerhalb von einer Seite verwenden (hierzu gibt es ein Kapitel unter https://www.html-seminar.de/link-als-sprungmarke.htm).

Unser HTML-Code sieht wie folgt aus:

<a href="#fussbereich">
zum Fussbereich</a>

Im HTML hat die angesprungene Stelle folgenden Aufbau:

<div id="fussbereich">...</div>

Wenn der Link nun angeklickt wird, kann über CSS und der Pseudoklasse :target das Ziel angesprochen werden. Im folgenden Beispiel färben wir den Hintergrund gelb ein.

<style>
#fussbereich:target {
    background-color: yellow;
}
</style>	
<div id="fussbereich">...</div>

Dieses Verhalten können wir nun natürlich auch ideal für unser Toggle-Menü ohne JavaScript verwenden.

In den folgenden 3 Kapiteln wird Schritt für Schritt das Toggle-Menü für Handy mit Responsive Design ausgebaut. Zur Sicherheit wird als Fallback die normale Desktopansicht als Vorgabe gewählt, falls ein Browser Probleme mit der Darstellung hat.

Wir gehen schrittweise vor:

  1. Erstellung einer klassischen Steuerung
  2. Diese wird erweitert zu einer Steuerung mit Menü-Button
  3. Und im letzten Schritt wird daraus ein Toggle-Menü mit automatischer Umschaltung je nach Bildschirmauflösung für Responsive Webdesign

Und nun viel Spaß beim Nachvollziehen.

Weiterempfehlen • Social Bookmarks • Vielen Dank

Wenn Sie einen Fehler finden, bitte mitteilen (egal ob Schreibfehler oder inhaltlicher Fehler).

Mit Maus fehlerhafte Stelle markieren und übernehmen mit folgendem Button:



(kann angegeben werden)

Nach Absenden kommt hier Feedback! Bitte nicht doppelt absenden. Danke.

    E-Books zum Kurs

    von HTML-Seminar.de

    E-Books mit rund 930 Seiten Umfang als PDF. Alle 3 zu einem Preis.

    Mehr Details

Bitte unterstützen Sie dieses Projekt

Sie können dieses Projekt in verschiedenen Formen unterstützen - wir würden uns freuen und es würde uns für weitere Inhalte motivieren :).

unsere Videos bestellen

Unsere Videos und eBooks bestellen.

Spenden

Sie können uns eine Spende über PayPal zukommen lassen.

Weiterempfehlungen

Empfehlen Sie es weiter - wir freuen uns immer über Links und Facebook-Empfehlungen.

Bücher über Amazon

Bestellen Sie Bücher über folgende Links bei Amazon:

Fehler melden

Vielen Dank für Ihre Hilfe