Wie erstelle ich ein Hamburger Menü in Wix?

Ein Hamburger Menü ist eins dieser Webdesign-Dauertrends und in diesem Wix Tutorial zeige ich Dir wie Du in 5 Minuten einen Hamburger Menü ganz einfach mittels einer Lightbox erstellen kannst.


Zuerst klären wir kurz die Frage was ist denn ein Hamburger Menü?


Bei einem Hamburger Menü handelt es sich um eine sogenannte Hidden Navigation Funktion also ein optisch verstecktes Menü, dass erst entweder bei Mouseover erscheint oder beim Anklicken ausgelöst wird.


Ich werde hier nicht die Mouseover-Variante beschreiben, denn obwohl diese auch in Wix möglich ist, muss man dafür Corvid zur Hilfe nehmen und gerade Anfänger tun sich dabei etwas schwer. Erschwerend hinzu kommt noch der Fakt, dass das Erscheinen des Menüs weniger das Problem ist, die Anklickbarkeit jedoch öfters Probleme bereitet.




In meinem Beispiel zeige ich Dir wie Du ein anklickbares Hamburger Menü in Wix erstellst.


#1

Falls deine Webseiten Vorlage ein Standard horizontales Menü hat solltest Du dieses erstmal entfernen und dich für dein Wunschsymbol, Farbe und Position entscheiden.



Beispiele klassischer Hamburger Menüs Icons sind wie folgt (dribble.com hat das mit einer passend definiert)

TIPP: Wenn Du in Wix Editor unter Vektorgrafiken nach Hamburger Menü suchst bekommst Du folgende Auswahl.WICHTIG hier ist dass Du in Grundformen suchst und nicht in Vektorgrafiken, denn ansonsten bekommst Du nur Bilder von Essen.




Nun solltest Du Dir überlegen, ob Du dein Hamburger Menü rechts oder Links auf der Webseite positionieren möchtest. Früher war ein solches Menü meistens links oben zu finden (wo normalerweise das Logo zu finden ist) ich tendiere jedoch zu einer Rechten (oben) Positionierung, denn somit bleibt Webseiteninhalt weiterhin sichtbar und wird nicht von der Lightbox überdeckt.

Ich würde Dir auch empfehlen das Hamburger Icon zu Fixieren damit es beim scrollen immer sichtbar ist und somit deine Besucher besser zwischen den Seiten navigieren können.


Kurz zur doch wichtigen Frage: Soll ich auf meiner Desktop Webseite überhaupt ein Hamburger Menü nutzten?


Nun das bleibt selbstverständlich Dir überlassen, jedoch zeigen mehrere Studien auf, dass sich Nutzer mit klassischem Textmenüs (horizontal am oberen Rand) getestet wurden schneller und gezielter auf der Seite zurechtfinden können. Auf Desktop wird eine sichtbare Navigation etwa 2 x häufiger geklickt als eine versteckte Navigation, wie z. B. ein Burger-Menü. Auf Wix ist es leider bei normal (und nicht mit Editor x ) erstellten Seiten nicht möglich von einem klassischen Text Menü beim Ipad (oder anderen kleineren Bildschirmen) auf ein Hamburger Menu zu switchen.


#2

Wir erstellen eine Lightbox in der das Menü für deine Webseitennavigation sitzen wird.


Das geht am einfachsten, wenn Du auf dein Icon klickst, diesen mit Lightbox verlinken auswählst und „jetzt erstellen“ anklickst.

Du findest Lightboxen jedoch auch im Bereich „Interaktive Elemente“ auf der linken Seite.


Normalerweise nutze ich hier die Lightbox Vorlage Seitenleiste


wix Lightbox Seitenleiste Vorlage

#3

Lightbox Einstellungen einrichten


Bennen deine Lightbox (damit Du sie später eindeutig zuordnen kannst). Dafür muss man „Lightbox auswählen“ anklicken und unter Optionen die Lightbox umbenennen.


Im nächsten Schritt passe ich alle Designoptionen der Lightbox wie Hintergrundfarbe, Symbol etc. an

Du musst auch den Auslöser für das Erscheinen der Lightbox von automatisch ausschalten. Diese Lightbox soll nur dann erscheinen, wenn jemand auf das Hamburger Icon klickt.


Jetzt musst Du nur noch ein vertikales Menü deiner Wahl in die Lightbox integrieren.

Vergiss nicht das Design des Menüs anzupassen bevor Du den Lightboxmodus schliesst.


#4

Verbinden dein Hamburger Menü Icon (mit Hilfe des Links) mit der Lightbox.


FAZIT: so ein Hamburger Menü sieht zwar auf minimalistischen Wix Webseiten schon sehr schick aus, jedoch ist es nicht sehr nutzerfreundlich und gerade Desktop Nutzer ziehen ein Textmenü vor.

Sollte dein Textmenü jedoch sehr viele Untermenüs besitzen und Du aus diesem Grund eine Alternative suchst, wäre vielleicht das Erstellen eines Wix Mega Menüs sinnvoller. Wie das geht kannst Du in meinem Youtube Wix Tutorial sehen. Ansonsten würde ich von einem Hamburger Menü eher abraten.






32 Ansichten0 Kommentare
DIEWIXEXPERTIN NEWSLETTER ABONNIEREN
KONTAKT

Borina Websolutions UG

Diewixexpertin

inh. Petra Borina

Lindenbrunnen 8,

74538 Rosengarten

  • Diewixexpertin LinkedIn
  • Pinterest Diewixexpertin
  • Facebookgruppe diewixexpertin
  • Youtube Kanal Diewixexpertin

© 2018-2020 by Borina Websolutions UG