Geöffnetes MegaMenü
Teaser im MegMenü
Im Beispiel zeigt sich die Möglichkeit, einen kurzen Teasertext zu platzieren, um das Top-Thema, hier das Angebot, kurz zu beschreiben und dem User eine Einschätzung zu geben, was er hier finden kann.
HTML Beispiel
Für Microsite
In diesem Beispiel ist der Microsite-Wrapper bereits integriert.
<!-- START microsite wrapper -->
<nav class="microsite-menu">
<!-- START MegaMenü -->
<nav class="gs_megamenu_nav" aria-labelledby="gs_mm_toggle_button-">
<ul role="menu" id="gs_megamenu-" class="gs_megamenu">
<!-- START menu-item -->
<li>
<!-- level 01 -->
<a role="menuitem" class="" href="..." data-auto-event-observed="true">
Top Thema Alpha
</a>
</li>
<!-- END menu-item -->
<!-- START menu-item mit Unterseiten -->
<li class="gs_sub">
<!-- level 01 -->
<a
role="menuitem"
class="haschildren"
aria-haspopup="true"
aria-expanded="false"
href="..."
data-auto-event-observed="true"
>
Top Thema Beta
</a>
<!-- START Ausklapp-Menü -->
<div class="menu-box">
<div class="menu-box--inner">
<!-- START 1. Spalte Infobereich -->
<div class="overview-and-close-button">
<h2>Top Thema Beta</h2>
<p>
Besschreibung für den First-User Lorem ipsum dolor sit amet,
consetetur sadipscing elitr, sed diam nonumy eirmod tempor
invidunt ut labore et dolore magna aliquyam erat, sed diam
voluptua. At vero eos et accusam et justo duo dolores et ea
rebum. Stet clita kasd gubergren, no sea takimata sanctus est
Lorem ipsum dolor sit amet.
</p>
<a
role="menuitem"
aria-haspopup="true"
aria-expanded="false"
class="gesis-button--default"
href="..."
data-auto-event-observed="true"
>
Zur Übersicht
</a>
<!-- X close Button -->
<button
class="close-button"
aria-controls="gs_megamenu-104618"
aria-label="Seiten-Navigationsmenü schließen"
>
Menü schließen
</button>
</div>
<!-- END 1. Spalte Ausklapp-Menü mit Infobereich -->
<!-- START 2. Spalte Ausklapp-Menü mit allen weiteren Menü-Elemnten -->
<ul role="menu">
<li>
<!-- level 02 -->
<h3>Beta Unterseite Primus</h3>
<a role="menuitem" href="..." data-auto-event-observed="true">
Zur Übersicht
</a>
</li>
<li class="gs_sub">
<!-- level 02 -->
<h3>Beta Unterseite Optimus</h3>
<a
role="menuitem"
aria-haspopup="true"
aria-expanded="false"
class="gs-overview"
href="..."
data-auto-event-observed="true"
>
Zur Übersicht
</a>
<span class="mobile-only menu-trigger"></span>
<ul role="menu">
<li>
<!-- level 03 -->
<a
role="menuitem"
href="..."
data-auto-event-observed="true"
>
Optimus Unterseite 01
</a>
</li>
<li>
<!-- level 03 -->
<a
role="menuitem"
href="..."
data-auto-event-observed="true"
>
Optimus Unterseite 02
</a>
</li>
</ul>
</li>
</ul>
<!-- END 2. Spalte Ausklapp-Menü mit allen weiteren Menü-ELemnten -->
</div>
</div>
<!-- END Ausklapp-Menü -->
</li>
<!-- END menu-item mit Unterseiten -->
</ul>
<!-- START Sprachen oder Login -->
<section class="mobile-only">
<nav class="gs_topnav" aria-label="Quick Links">
<ul class="list-group list-group-horizontal">
<li>
<a
href="/en/allbus"
hreflang="en"
aria-label="English page version"
data-auto-event-observed="true"
><span class="icon-gs-lang pe-1"></span
><span class="d-md-inline">English</span></a
>
</li>
</ul>
</nav>
</section>
<!-- END Sprachen oder Login -->
</nav>
<!-- END MegaMenü -->
<button
id="gs_mm_toggle_button-"
class="gs_mm_toggle_button microsite"
aria-haspopup="true"
aria-controls="gs_megamenu-"
aria-label="Seiten-Navigationsmenü"
>
<span class="gesis-icon-list-view"></span>
</button>
</nav>
<!-- START microsite wrapper -->