Du möchtest Slide In Menu erstellen, aber hast keine HTML oder CSS Kenntnisse? Kein Problem! Mit Showit bekommt jeder innerhalb weniger Minuten ein Slide in Menu hin, ohne dafür programmieren können zu müssen! Durch die Drag & Drop Funktion von Showit kannst du das Slide In Menü ganz einfach erstellen und auf deine Wünsche anpassen!
Keine Lust zu lesen? Schau dir das Video-Tutorial an!
Klicke links oben auf die drei Punkte und füge über “Add Blank Canvas” ein neues Canvas zu deiner Seite hinzu. Bei den Canvas musst du folgende Einstellungen treffen (im rechten Menü):
Jetzt kannst du alle Elemente auf dein Canvas hinzufügen, die du gerne in deinem Slide In Menu hättest. Ich nutze ein Rechteck, Text für die Menüpunkte und Icons – zum schließen des Menüs und Icons für Social Links.
Ordne deine Elemente so an, dass es dir gefällt. Wenn du einen Slide In Effekt haben möchtest, würde ich die empfehlen alles entweder an der linken oder der rechten Seite auszurichten.
Außerdem brauchen wir in deinem sichtbaren Header noch ein Icon oder einen Text, auf das wir klicken, damit sich unser Menü öffnet.
Wenn du alles so angeordnet hast wie du möchtest, fixiere deine Elemente mittels des Locking auf der jeweiligen Seite (horizontal & vertikal).
Wenn alles an Ort und Stelle & fixiert ist, ist es an der Zeit dein Canvas auf 1 Pixel Größe bzw. Höhe zu ziehen. Gehe hierzu in dein Slide In Menu Canvas und stelle die Höhe bei Minimum Height auf 1px ein. Jetzt ragt dein Menü in ein anderes Canvas – aber das soll genauso sein!
Nun müssen wir noch die Click Actions und Animationen für dein Slide in Menu festlegen. Hierzu klickst du auf jeden Menüpunkt und verlinkst unter “Click Actions” die jeweilige Seite, die aufgerufen werden soll.
Click Action für “Öffnen” Icon:
Click Action für “Schließen” Icon:
Canvas Animation Einstellung für Slide Effekt:
Canvas In & Canvas Out:
Gehe auf die Seiten Preview und teste ob das Menü erscheint, wenn du auf deinen Button klickst. Ist alles an der richtigen Stelle? Kommt das Slide In Menu von der richtigen Seite und verschwindet dahin auch wieder? Sind alle Elemente sichtbar und klickbar?
Wenn alles so funktioniert, wie du es gerne möchtest: Glückwunsch! Du hast gerade dein eigenes Slide In Menu erstellt!
Achtung: Vergesse nicht die Mobile Variante deines Slide In Menus auch anzupassen!
Guck dir meinen Onlinekurs “Shortcut to Showit” an! Dort lernst du alles was du über Showit wissen musst, um deine eigene Website zu erstellen!
Erfahre in diesem 0€ Onlinetraining alle wichtigen Infos zu Showit