SuperNav

SuperNav Live-Demo

Diese Demo läuft mit dem originalen Plugin-Frontend (mega-menu.js und mega-menu.css von SuperNav) — ohne WordPress. Was du hier siehst, ist exakt das, was das Plugin auf deiner Website rendert. Fahre mit der Maus über die Menüpunkte.

Öffnen per: Hover Klick — entspricht der Plugin-Einstellung «Trigger»
https://ihre-website.ch

Beispielmenü mit Klapp-Effekt (3D-Flip)

Core 2.10.56 · symmetrischer 3D-Klapp

Dieselbe Plugin-Einstellung unter Mega-Menüs → Abstände & Form → Panel-Ein-/Ausblendung: Klapp-Effekt an, Winkel und Timing. In dieser Demo ist das Panel zentriert und die 3D-Perspective auf die Panel-Mitte ausgerichtet — der Klapp wirkt links und rechts gleich. Hover über «Produkt» oder «Ressourcen».

https://ihre-website.ch · Klapp-Effekt aktiv

Was zeigt die Demo?

MenüpunktPanel-TypGezeigte Features
Funktionencolumns (wide)Spalten mit Icons, Beschreibungen, Badges, farbige Spalte, Sidebar-Gruppen, Bottom-Links, CTA-Leiste
LösungencardsKarten-Grid mit Icons und Beschreibungen, Sidebar
Servicefeatured-imageFeatured-Bild links, Support-Links, Link-Spalten rechts
InhaltecontentFreie HTML-Blöcke in Spalten (Kalender, Formulare etc. — Shortcodes laufen nur in WordPress)
🔍SuchboxExpandierende Suche (CSS-Klasse ksn-search am Menüpunkt)
Produkt / Ressourcen 2. Bühnecolumns / cardsKlapp-Effekt (3D-Flip von oben), Winkel 70°, eigene Panel-Ein-/Ausblenddauer — Free ab Core 2.10.36 / Winkel ab 2.10.39

Tastatur: Esc schliesst offene Panels. Unter 1024 px Breite schaltet das Plugin auf Mobile-Accordion um.

Die JSON-Konfiguration dahinter

Jedes Panel wird im Menü-Editor mit genau diesem JSON konfiguriert — zum Ausprobieren einfach in den JSON-Tester kopieren:

Funktionen — Spalten (columns)
Funktionen — Sidebar
Funktionen — CTA-Leiste
Lösungen — Karten (cards)
Service — Featured (featured-image)

Hinweis: Die Demo nutzt die unveränderten Frontend-Dateien des Plugins. Nur WordPress-abhängige Funktionen (Shortcodes, Benutzerrollen-Sichtbarkeit, Übersetzungs-Store, Google-Maps-Block) sind hier als Platzhalter dargestellt.