Ein Hamburger Menü ist eins dieser Webdesign-Dauertrends und in diesem Wix Tutorial zeige ich Dir wie Du in 5 Minuten einen Burger Menü ganz einfach mittels einer Lightbox erstellen kannst.
Zuerst klären wir kurz die Frage was ist denn ein Hamburger oder Burger 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. Dies Burger Website Menüs sind also minimalistische, platzsparende Menüs, die nur angezeigt werden, wenn Besucher auf das Menüsymbol klicken.
Ich werde hier nicht die Mouseover-Variante beschreiben, denn obwohl diese auch in Wix möglich ist, muss man dafür Wix Velo 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.
Falls deine Webseiten Vorlage ein Standard horizontales Menü hat solltest Du dieses erstmal entfernen und dich für dein Wunschsymbol, Farbe und Position entscheiden.
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 Burger Menü rechts oder Links auf der Website 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 im klassischen Editor erstellten Seiten nicht möglich von einem klassischen Text Menü beim Ipad (oder anderen kleineren Bildschirmen) auf ein Hamburger Menu zu switchen. Mit der Einführung von Wix Studio Editor ist diese Möglichkeit jedoch gegeben. Bestehende Seiten können jedoch nicht in eine Studio Editor Seite umgewandelt werden, sondern müssen neu designt sein.
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
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. Du hast mittlerweile in Wix die Möglichkeit multiple Menüs (also unterschiedliche Menüs) zu erstellen. dafür musst Du jedoch auf "erweiterte Optionen" klicken.
Vergiss nicht das Design des Menüs anzupassen bevor Du den Lightboxmodus schließt.
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.
Verliere nicht länger wertvolle Zeit damit, Deine Webseite immer wieder ziellos zu überarbeiten und komme endlich voran! Investiere in eine 1:1 Beratung mit wirklich erfahrenen Wix Experten und erhalte maßgeschneiderte Tipps und Tricks, um Deine Webseite schneller und effizienter zu erstellen. Schluss mit langen Stunden vor dem PC und endlosem Herumprobieren!
Buche noch Heute
Comments