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ü

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

Schreibe einen Kommentar

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

Wir benutzen First Party Cookies, um die Nutzerfreundlichkeit der Webseite zu verbessen.