SuperNav

SuperNav Live Demo

This demo runs on the original plugin frontend (mega-menu.js and mega-menu.css from SuperNav) — without WordPress. What you see here is exactly what the plugin renders on your website. Hover over the menu items.

Open on: Hover Click — matches the plugin's “Trigger” setting
https://your-website.com

Sample menu with flip effect (3D fold)

Core 2.10.56 · symmetrical 3D flip

Same plugin setting under Mega menus → Spacing & Shape → Panel fade in/out: flip effect on, angle and timing. In this demo the panel is centered and the 3D perspective is aligned to the panel midpoint — the fold looks the same on left and right. Hover «Product» or «Resources».

https://your-website.com · flip effect on

What does the demo show?

Menu itemPanel typeFeatures shown
Featurescolumns (wide)Columns with icons, descriptions, badges, a colored column, sidebar groups, bottom links, CTA bar
SolutionscardsCard grid with icons and descriptions, sidebar
Servicefeatured-imageFeatured image on the left, support links, link columns on the right
ContentcontentFree HTML blocks in columns (calendars, forms etc. — shortcodes only run in WordPress)
🔍Search boxExpanding search (CSS class ksn-search on the menu item)
Product / Resources 2nd stagecolumns / cardsFlip effect (3D fold from top), 70° angle, own panel open/close duration — Free from Core 2.10.36 / angle from 2.10.39

Keyboard: Esc closes open panels. Below 1024 px width the plugin switches to the mobile accordion.

The JSON configuration behind it

Each panel is configured in the menu editor with exactly this JSON — copy it into the JSON tester to experiment:

Features — columns
Features — sidebar
Features — CTA bar
Solutions — cards
Service — featured (featured-image)

Note: The demo uses the plugin's unmodified frontend files. Only WordPress-dependent features (shortcodes, user-role visibility, translation store, Google Maps block) are shown as placeholders.