Mega-Menü mit Live-Vorschau
Ein Dropdown mit Bereichen links und einer Karte, die sich passend zur angezeigten Option ändert.
Einstellungen
Code
<nav class="uv-nmg" aria-label="Hauptmenü"><ul class="tb"><li class="dd"><button type="button" aria-expanded="false" aria-controls="uv-nmg-p">Produkte<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7 10l5 5 5-5"/></svg></button><div class="pn" id="uv-nmg-p"><ul class="ls"><li style="--c:#6366f1"><a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 20V10M10 20V4M16 20v-7M22 20H2"/></svg><span><b>Analytics</b><small>Dashboards in Echtzeit</small></span></a></li><li style="--c:#f59e0b"><a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M13 2L4 14h7l-1 8 9-12h-7z"/></svg><span><b>Automatisierung</b><small>No-Code-Abläufe</small></span></a></li><li style="--c:#10b981"><a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 3l7.5 3v5.5c0 4.6-3.2 8.3-7.5 9.5-4.3-1.2-7.5-4.9-7.5-9.5V6z"/></svg><span><b>Sicherheit</b><small>Zugriffe und Audit</small></span></a></li><li style="--c:#ec4899"><a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3.5" y="3.5" width="7" height="7" rx="2"/><rect x="13.5" y="3.5" width="7" height="7" rx="2"/><rect x="3.5" y="13.5" width="7" height="7" rx="2"/><path d="M17 13.5v7M13.5 17h7"/></svg><span><b>Integrationen</b><small>Über 200 Apps</small></span></a></li></ul><div class="pv"><div class="cd" style="--c:#6366f1"><i></i><b>Analytics</b><span>Dashboards in Echtzeit. 14 Tage kostenlos testen.</span></div><div class="cd" style="--c:#f59e0b"><i></i><b>Automatisierung</b><span>No-Code-Abläufe. 14 Tage kostenlos testen.</span></div><div class="cd" style="--c:#10b981"><i></i><b>Sicherheit</b><span>Zugriffe und Audit. 14 Tage kostenlos testen.</span></div><div class="cd" style="--c:#ec4899"><i></i><b>Integrationen</b><span>Über 200 Apps. 14 Tage kostenlos testen.</span></div></div></div></li><li><a href="#">Preise</a></li><li><a href="#">Kunden</a></li></ul></nav>Prompt für KI
Füg ihn in ChatGPT, Claude oder Cursor ein und der Baustein wird mit diesen Einstellungen an dein Projekt angepasst, auch ohne React.
Mehr aus Navigation
Alle ansehen: NavigationWofür du ihn nutzen kannst
SaaS-Seiten und große Shops erklären mit Mega-Menüs, was in jedem Bereich steckt, bevor jemand klickt. Dieses öffnet sich aus einer kompakten Leiste bei Hover oder Tastaturfokus, listet vier Produkte mit Symbol und einzeiliger Beschreibung und zeigt rechts eine farbige Vorschaukarte, die zum überfahrenen oder fokussierten Eintrag wechselt.
Die Vorschau-Logik ist reines CSS mit :has und funktioniert auch, wenn Skripte langsam laden. Ein paar Zeilen JavaScript halten nur aria-expanded aktuell und schließen das Panel mit Escape. Ersetze die Karten durch Screenshots oder Aktionen und nutze dieselbe Struktur für jeden Bereich.