Es ist großartig, Dinge wie Media Queries zu verwenden. Damit kann beispielsweise für jede beliebige Größe des Browserfensters ein anderes Stylesheet genutzt werden. Aber die meisten Responsive Webdesigns holen leider nicht das Maximum aus den zahllosen Optimierungsmöglichkeiten heraus.
So hat man gerade bei mobilen Websites oft ein Darstellungsproblem mit der Navigation. Einerseits sollte sie groß genug für Touch-Gesten sein, anderseits aber auch klein genug, damit sie nicht mit dem eigentlichen Inhalt konkurriert.

Die Lösung dafür ist eigentlich ganz einfach: Lust auf Hamburger?

Das Hamburger-Menü ist auf mobilen Websites häufig zu sehen.
Es soll dem Look & Feel des Optionen-Menüs einer nativen Smartphone-App nachempfunden werden.

Eine Demo des Menüs innerhalb einer Webseite kann hier betrachtet werden.
Der Code steht ausserdem in einem public Repository auf Github zur Verfügung.

Das Markup

Am Anfang wird ein einfaches HTML 5 Standard Markup erstellt.

Header

 

 

Der Hamburger Button kann ganz einfach gestaltet werden:

 

Der Rest des Markups benötigt nichts Spezielles, außer ein Container Element, welches den gesamten Inhalt umschließt. Dieser Container wird nach rechts bewegt, sobald man den Hamburger-Button anklickt. Zudem wird ein weiteres Div-Element benötigt, welches den Inhalt überdeckt, solange das Menü angezeigt wird. So kann der gesamte rechte Inhalt angeklickt werden, um das Menü wieder zu schließen.

Für den Viewport sollte ausserdem ein Meta-Tag angegeben werden, damit der Inhalt auch auf mobilen Geräten korrekt skaliert wird. Nicht zu vergessen die Verlinkungen von jQuery und jQuery UI, eines Stylesheets und eines Javascripts im Head-Bereich.

Ein fertiges Beispiel des Markups steht hier zur Verfügung.

Das Stylesheet

Am Anfang wird das horizontale scrollen unterdrückt, da der Inhalt sich nach rechts aus dem Viewport bewegen wird.

Typischerweise wird bei mobilen Webseiten der Header ob fixiert angezeigt, damit ist der Hamburger jederzeit anklickbar. Es sollte aber keine Position angegeben werden, damit der Header sich mit dem gesamten Inhalt mit nach rechts verschiebt, wenn das Menü geöffnet wird.

Der eigentliche Hamburger kann einfach mit CSS3 Bordmitteln gestaltet werden. Es müssen lediglich ein paar Farbverläufe und runde Ecken definiert werden:

Die Navigation ist fest am linken oberen Rand gesetzt und wird hinter dem Content positioniert. Sie erscheint, sobald der Inhalt nach rechts geschoben wird. Die Breite wird mit 70% angegeben. Es ist dieselbe Proportion, welche später bei der Animation verwendet werden soll:

Die fertige Stylesheet-Datei, mit etwas mehr Farbe und Schatten-Effekten, kann hier eingesehen werden.

Die Javascript Animation

Es werden zwei Click-Events definiert. Eines, um das Menü zu öffnen und ein weiteres, um es zu schließen.

Wenn das Click-Event ausgelöst wird, wird mit jQuery die aktuelle Größe des Inhalts abgefragt und die Breite des Content-Elements statisch fest gesetzt. Damit werden die originalen Proportionen beibehalten, wenn der Inhalt nach rechts und somit aus dem Viewport geschoben wird.

Mit dem Klick wird ausserdem der Content-Layer über dem rechten Inhalt angezeigt. Dieser ist transparent und bewirkt, dass der nach aussen geschobenen Inhalt nicht mehr angeklickt werden kann. So dient er als riesiger Schließ-Button. Das Scrollen wird bei geöffnetem Menü für Mobile Devices explizit unterdrückt.

Zu guter Letzt wird die jQuery-Animation durchgeführt, bei der „Margin“ nach links um 70% erhöht wird.

Um das Menü zu schließen, wird das Click-Event auf den Content-Layer abgefangen. Damit kann das Scrolling wieder aktiviert, und die Animation rückwärts ausgeführt werden. Wenn die Animation abgeschlossen ist, wird die Breite des Inhalt-Elements wieder dynamisch gesetzt und der Content-Layer ausgeblendet.

Ein fertiges jQuery Beispiel gibt es hier.

Eine Demo des Menüs innerhalb einer Webseite kann hier eingesehen werden.
Der Code steht auch in einem public Repository auf Github zur Verfügung.

Wir freuen uns über Kommentare und Ideen für weitere Artikel.

(This blog post is also available in English)

4 Kommentare

  1. Ich bin etwas verzweifelt. Das Menü scheint nicht zu scrollen, wenn es länger ist als der Bildschirm. Hab schon verschiedene Techniken probiert, wie Box um die Navi außenrum, aber funktioniert alles nicht. Hat jemand eine Lösung? Die Navi muss scrollbar sein.

    Danke!
    Daniela

    Antworten
    • Thomas Zinnbauer

      Hi Daniela, das Menü ist leider nicht scrollbar. Um es scrollbar zu machen, müsste der gesamte Aufbau geändert werden.

      Antworten
  2. Hi Zinne,

    was ist der Unterschied zu einer Off-Canvas Navigation oder ist „Hamburger“ einfach nur dein Name dafür? 🙂

    Viele Grüsse

    Volker

    Antworten
    • Thomas Zinnbauer

      Hi Volker,
      ist Off-Canvas Navigation nur ein anderer Name für den Hamburger? 😀

      Antworten

Trackbacks/Pingbacks

  1. Icon hamburger el mal uso y la solución - Principios Diseño UX - […] Rápida implementación: Hoy en día es muy rápido pasar un menú tanto vertical como horizontal a un menú hamburguesa,…

Einen Kommentar abschicken

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