Web-Technik Webdesign

Mobile Menü ohne JavaScript, Mobile CSS Menu

Mobile Menü ohne JavaScript

Mobile Menü ohne JavaScript, Mobile CSS Menu: auch ohne umfangreiches JavaScript lassen sich schnelle und schlanke Hamburger-Menüs realisieren.

Mobile Menü ohne JavaScript / Mobile CSS Menu: Ein Mobiles Menü mit CSS zu erstellen ist gar nicht so schwer. Trotzdem verwendet das Gros der Websites umfangreiche und komplexe JavaScript-Lösungen, welche meist auf der jquery basieren.

Es gibt jedoch gute Gründe, ein schlankes Mobile Menü ohne JavaScript einzusetzen:

  1. Mobiles CSS-Menüs funktionieren auch dann, wenn JavaScript abgeschaltet ist.
  2. Mobile First: Moderne Websites werden vom Mobilgerät aus entwickelt. Mobile First ist dabei weitaus mehr als nur ein „Schlagwort“, denn bereits im Oktober 2016 hatte Google angekündigt, dass der Mobile Index den Desktop Index als Hauptindex ablösen wird. Das bedeutet, dass Google künftig nicht mehr prüft, ob es zur Desktop-Version einer Website auch eine Mobile Version gibt, sondern Google geht den umgekehrten Weg. Die neue Priorisierung sorgt dafür, dass Webentwickler künftig noch stärker auf eine Optimierung der mobilen Webseitenversion achten sollten.Da die mobilen Internetverbindungen in der Regel deutlich langsamer sind als schnelle DSL-Verbindungen und die Benutzer zudem nur über ein begrenztes monatliches Datenvolumen verfügen, sind schlanke, schnell ladende Website gefragt und im Vorteil. Denn das wird von Suchmaschinen honoriert:
  3. Suchmaschinenoptimierung:
    Suchmaschinen möchten dem Suchenden relevante Suchergebnisse bereitstellen. Dazu werden nicht nur die Seiteninhalte geprüft, sondern auch die Ladezeiten. Websites, deren Inhaltsseiten nur einige hundert Kilobyte aufweisen sind daher gegenüber solchen im Vorteil, die mehrere Megabyte Datenvolumen im Gepäck haben.

Mobile Menü ohne JavaScript

Mobile CSS Menu: Nachfolgend stellen wir eine Anleitung für die Realisation eines schlanken Mobilen CSS-Menüs vor.

BEISPIEL ANSEHEN

Wie lässt sich das Design unseres Beispiels umsetzen? Dafür benötigen wir etwas HTML und natürlich entsprechendes CSS:

HTML (Body)

 

CSS: Allgemeine Auszeichnungen und Logo

 

CSS: Menü

 

CSS: Media Queries

 

Erläuterung des CSS für die Erstellung des Mobile CSS Menu

Der größte Teil des Codes ist nicht besonders komplex und der HTML-Bereich dabei besonders einfach gehalten. Im Bereich CSS: Allgemeine Auszeichnungen und Logo wird zunächst die Schriftart sowie Höhe und Breite des Anzeigebereichs festgelegt und definiert, dass beim Focus auf einen Link keine gestrichelten Linien angezeigt werden sollen.

Der Bereich CSS: Menü definiert ein einfaches Navigationsmenü für die Anzeige auf dem Desktop-PC. Es wird über eine UL-Liste erstellt und enthält einige Angaben zur Formatierung des Menüs.

Spannend wird es im Bereich CSS: Media Queries.

  1. Zunächst wird festgelegt, dass das Hamburger-Icon des mobilen Menüs nicht angezeigt werden soll, wenn die Bildschirmbreite mehr als 960 Pixel beträgt (@media screen and (min-width: 961px) {…} ).
  2. Danach wird dem Browser mitgeteilt, wie das Menü gestaltet werden soll, wenn die Breite des Browserfensters kleiner oder gleich 960 Pixel ist (@media screen and (max-width: 960px) {…} ).
  3. nav ul {…}
    Das Menü wird zunächst verborgen, indem es um 100% nach links versetzt wird. Zusätzlich definieren wir eine transition, um über CSS3 auch ohne JavaScript einen Animationseffekt zu verwirklichen.
  4. nav ul li {…}
    Über display:block wird erreicht, dass die Menüpunkte des mobilen Menüs nicht mehr in einer Zeile, sondern untereinander angezeigt werden.
  5. /*Hamburger-Icon*/


    Dieser Bereich ist für die Funktionalität des Hamburger-Menüs zuständig.
    Es gibt zwei Hamburger-Icons. Eins ist blau, das andere grau. Die beiden sind deckungsgleich übereinander positioniert. Wird das blaue Hamburger-Icon angeklickt und dabei das Menü ausgefahren, so wird gleichzeitig das graue Hamburger-Icon sichtbar gesetzt und erscheint an der Position des blauen Icons.

    Beim Klick auf das blaue Hamburger-Icon wird auf einen Anker referenziert (<a href=“#nav-m“…) und das blaue Hamburger-Icons wird ausgeblendet. Durch die Referenzierung lässt sich der Zustand über die CSS-Pseudoklasse :target prüfen.

    Gleichzeitig wird die UL des Menüs von left:-100%; auf left:0; gesetzt (mittels nav a:target ~ ul{left: 0;} ) und bewegt sich dadurch von der bisherigen linken Positionierung (außerhalb des sichtbaren Bereichs) in das Betrachtungsfeld.

    nav a#nav-m img, nav a.close img {…}
    Die Anzeigegröße des Hamburger-Menü-Icons wird festgelegt.

    nav > .close, nav a#nav-m:target {display: none;}
    Standardeinstellung ist, dass das graue Hamburger-Menü-Icon (nav > .close) nicht angezeigt wird. Über die CSS-Pseudoklasse :target wird dafür gesorgt, dass das blaue Hamburger-Menü-Icon verborgen wird, wenn es angeklickt wird und dabei den target erhält (a#nav-m:target).

    nav a:target ~ ul, nav a:target ~ .close {display: inline-block;}
    Wenn der Link aktiv ist (wird auch hier über die CSS-Peseudoklasse a:target geprüft), werden die Navigationsliste sowie das graue Hamburger-Menü-Icon auf sichtbar gesetzt.

Fazit: die Anleitung zur Erstellung eines Mobile Menü ohne JavaScript zeigt, dass sich auf relativ einfache Art ein Mobile CSS Menu realisieren lässt.

 

Stichworte: Mobile Menü ohne JavaScript, Mobile CSS Menu, Hamburger Menü

11 Kommentare zu “Mobile Menü ohne JavaScript, Mobile CSS Menu

  1. html-anfänger

    wie kann ich denn in die navigationsleiste auch social media buttons setzen anstatt nur wörter?

    • Hallo Manuel,

      dazu müssen Sie das HTML und ggf. auch CSS entsprechend erweitern. In der Liste der Navigationsmenü-Punkte lassen sich natürlich auch Icons (z.B. Facebook) einbinden.
      Dazu wird einfach die oben stehende Liste um einen oder mehrere Listenpunkte ergänzt in denen statt eines Textes ein (verlinktes) Icon integriert wird.

      Oder Sie integrieren die Social Icons nicht im Menü, sondern beispielsweise unterhalb des Menüs oder im Footer.

  2. Herrlicher („in einem so hohen Maße gut, schön, dass es sich nicht besser, schöner denken lässt“) Blindtext

  3. N Brachmann

    Hey, danke für die Anleitung, hat mir echt geholfen, auch wenn ich nicht jeden Schritt verstehe ^^
    Habe mit deiner Anleitung in HTML ein gut funktionierendes mobiles Menu erstellt. Jetzt wollte ich die Seite in Typo3 einarbeiten und es macht große Probleme. Kennst du dich mit Typo3 aus und weißt vielleicht woran das liegen könnte?
    PS: Bei solchen Guides am besten jegliches Design-Element (Farbe o.ä.) weglassen und nur auf den Code konzentrieren der wichtig ist um das Problem zu lösen 🙂

  4. Hallo, find ich top! sehr einfach gestaltet – aber: Sollte das DIV

    nicht erst nach den Links geschlossen werden?

    LG
    Jay

    • Hallo Jay,

      probieren Sie es einmal aus. Schließt man das DIV erst hinter den Menü-Links, so müsste das das Layout zerhauen:

      • In der Screen Ansicht in der ersten Zeile das Logo, dann erst in der nächsten Zeile die Menüpunkte (statt alles inline darzustellen).
      • In der Mobilen Ansicht sollte das Hamburger-Menü dann nicht mehr angezeigt werden.
  5. Eine tolle Lösung!
    Ein gravierendes Problem habe ich damit aber: Platziert man im Main-Text (z. B. im Abschnitt 1 Eures Beispiels) Links, so sind diese nur in der Mobile-Version anklickbar.
    Erst unterhalb der Position des Mobile-Menüs sind Links in der Nicht-Mobile-Ansicht wieder anklickbar. Mir scheint, dass der auf einem breiten Bildschirm gar nicht benötigte Container des Mobile-Menüs, also sozusagen unsichtbar über dem Main-Text zu liegen …

    • Hallo Hauke,

      vielen Dank für das Lob und für den Hinweis!
      Dieses Problem war uns noch gar nicht aufgefallen. Bei vorstehender Demo ging es darum, den Code so einfach nachvollziehbar wie möglich zu halten. Versionen, die bei uns im Produktiveinsatz sind, weisen das Problem nicht auf. Sie sind letztendlich auch komplexer und haben unter anderem in der Regel noch Submenüs.

      Das Problem lässt sich aber leicht beheben, indem im vorstehenden Beispiel dem Menü einfach eine maximale Höhe mitgegeben wird. Das wurde nun angepasst. In vorstehendem Code der Bereich:
      /*—– Media Queries —–*/ @media screen and (min-width: 961px) { …}
      Dort wurde ergänzt: nav ul.menu {max-height: 20px;}

      Nun funktionieren auch Links, am Anfang des Textes integriert werden.

  6. Danke, Gregg! Sehr motivierend.

  7. Danke für die tolle Anleitung. Genau das, was ich gesucht habe – eine schnelle und schlanke Lösung ohne endlos langen Javascript-Code. Das ist ein Mobile Menu, das auch dann noch funktioniert, wenn Javascript nicht aktiv ist. Toll.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Wir benutzen Cookies um die Nutzerfreundlichkeit der Webseite zu verbessen. Durch Ihren Besuch stimmen Sie der Verwendung von Cookies zu.