Vor ein paar Monate habe ich euch ja gezeigt wie man ein Fullscreen Mega Menu ohne Plugin in Divi 4 erstellen kann (DIVI Full Screen Mega Menu ohne Plugin erstellen). Für dieses Menu haben wir ziemlich viel Javascript gebraucht.

In Divi 5 kann man natürlich auch so ein Fullscreen Mega Menu erstellen das mit einem Klick auf ein Icon sich automatisch öffnet. Und dank der neuen ≪Interactions≫ Funktion in Divi 5 braucht man dafür nicht mal mehr Javascript oder sonst ein externen Code.

Das Megamenu selbst könnt ihr wie eine einfache Seite selbst gestalten.

So ein Menu ist richtig schnell erstellt und im heutigen Video zeige ich euch wie das geht.

Video

Grundaufbau aller Sektionen

Divi Builder öffnen und einen globalen Header anlegen und den eigenen Wünschen entsprechend zu designen.

Irgendwo müsst ihr nun in diesem Design ein Icon / Bild anlegen, welches ihr als Hamburger Icon verwenden wollt. Gebt dem Icon / Bild auch ein Label als ≪HamburgerIcon≫.

Als nächstes müsst ihr das Hamburger Menu anlegen, erstellt dafür unter dem Menu eine neue Sektion und designt dort euer Hamburger-Menu. Ich empfehle euch, macht diese Sektion dann auch 100vh, damit sie wirklich die ganze Seite umfasst. Gebt dieser Sektion auch ein Label ≪Section-Megamenu≫.

In dieser Sektion solltet ihr jetzt ganz oben auch noch einen Close Button einbauen, dafür könnt ihr wieder ein Icon oder ein Bild verwenden. Gebt auch diesem Icon / Bild ein Label genannt ≪CloseButton≫.

Close Button mit Interaction erweitern

Interaction -> Add Interaction – wählt hier Click aus
Label: SchliessButton
Target-Event: Click
Effect Action: Hide Element
Target Menu: Section-Megamenu

Als nächstes müsst ihr die Section-Megamenu durchsichtig machen und zwar unter Advanced -> Visibility und da alles auswählen, und somit wird es überall versteckt.

HamburgerIcon mit Interaction erweitern

Interaction -> Add Interaction – wählt hier Click aus
Label: Load Megamenu
Target-Event: Click
Effect Action: Show Element
Target Menu: Section-Megamenu

Position Mega-Menu anpassen

Jetzt seht ihr, wenn ihr es ausprobiert, dass dort, wo die Menuzeile ist, ein Abstand zum Megamenu besteht und darum müssen wir hier kurz etwas anpassen. Und zwar müsst ihr einfach bei Section-Megamenu die Position auf Fixed und den Z-Index auf etwa 999 stellen.