Live-Beispiel
HTML-Quelltext
<header class="microsite-header">
<div class="main-nav-row">
<div class="main-nav-row--inner microsite-menu">
<nav class="gs_megamenu_nav" aria-labelledby="gs_mm_toggle_button-104618">
<ul role="menu" id="gs_megamenu-104618" class="gs_megamenu" >
<li class="gs_sub gs_active">
<a role="menuitem" class=" haschildren" aria-haspopup="true" aria-expanded="false" onclick="_etracker.sendEvent(new et_UserDefinedEvent('Docs', 'megamenu'));" href="/styleguide/docs">Docs</a>
<div class="menu-box">
<div class="menu-box--inner">
<div class="overview-and-close-button">
<a role="menuitem" aria-haspopup="true" aria-expanded="false" class="gesis-button--default" onclick="_etracker.sendEvent(new et_UserDefinedEvent('Docs', 'megamenu'));" href="/styleguide/docs">Docs</a>
<button class="close-button" aria-controls="gs_megamenu-104618" aria-label="Seiten-Navigationsmenü schließen"> Menü schließen </button>
</div>
<ul role="menu" >
<li class="gs_sub">
<h3>
Erste Schritte
</h3>
<a role="menuitem" class="gs-overview" aria-haspopup="true" aria-expanded="false" onclick="_etracker.sendEvent(new et_UserDefinedEvent('Erste Schritte', 'megamenu'));" href="/styleguide/docs/erste-schritte">Zur Übersicht</a> <span class="mobile-only menu-trigger"></span>
<ul role="menu" >
<li> <a role="menuitem" class="" onclick="_etracker.sendEvent(new et_UserDefinedEvent('GESIS-Web-Frontend-Framework', 'megamenu'));" href="/styleguide/docs/erste-schritte/gesis-web-frontend-framework">GESIS-Web-Frontend-Framework</a> </li>
</ul>
</li>
<li class="gs_sub">
<h3>
Content
</h3>
<a role="menuitem" class="gs-overview" aria-haspopup="true" aria-expanded="false" onclick="_etracker.sendEvent(new et_UserDefinedEvent('Content', 'megamenu'));" href="/styleguide/content">Zur Übersicht</a> <span class="mobile-only menu-trigger"></span>
<ul role="menu" >
<li> <a role="menuitem" class="" onclick="_etracker.sendEvent(new et_UserDefinedEvent('Typography', 'megamenu'));" href="/styleguide/content/typography">Typography</a> </li>
<li> <a role="menuitem" class="" onclick="_etracker.sendEvent(new et_UserDefinedEvent('Images', 'megamenu'));" href="/styleguide/content/images">Images</a> </li>
<li> <a role="menuitem" class="" onclick="_etracker.sendEvent(new et_UserDefinedEvent('Figures', 'megamenu'));" href="/styleguide/content/figures">Figures</a> </li>
<li> <a role="menuitem" class="" onclick="_etracker.sendEvent(new et_UserDefinedEvent('Tables', 'megamenu'));" href="/styleguide/content/tables">Tables</a> </li>
</ul>
</li>
<li class="gs_sub gs_active">
<h3>
Components
</h3>
<a role="menuitem" class="gs-overview" aria-haspopup="true" aria-expanded="false" onclick="_etracker.sendEvent(new et_UserDefinedEvent('Components', 'megamenu'));" href="/styleguide/docs/components">Zur Übersicht</a> <span class="mobile-only menu-trigger"></span>
<ul role="menu" >
<li> <a role="menuitem" class="" onclick="_etracker.sendEvent(new et_UserDefinedEvent('Akkordeon', 'megamenu'));" href="/styleguide/docs/components/akkordeon">Akkordeon</a> </li>
<li> <a role="menuitem" class="" onclick="_etracker.sendEvent(new et_UserDefinedEvent('Buttons', 'megamenu'));" href="/styleguide/docs/components/buttons">Buttons</a> </li>
<li class="gs_active"> <a role="menuitem" class="" aria-current="page" onclick="_etracker.sendEvent(new et_UserDefinedEvent('Megamenü', 'megamenu'));" href="/styleguide/docs/components/megamenue">Megamenü</a> </li>
<li> <a role="menuitem" class="" onclick="_etracker.sendEvent(new et_UserDefinedEvent('Megamenü Vertikal', 'megamenu'));" href="/styleguide/docs/components/megamenue-vertikal">Megamenü Vertikal</a> </li>
<li> <a role="menuitem" class="" onclick="_etracker.sendEvent(new et_UserDefinedEvent('Tabs', 'megamenu'));" href="/styleguide/docs/components/tabs">Tabs</a> </li>
</ul>
</li>
</ul>
</div>
</div>
</li>
<li class="gs_sub">
<a role="menuitem" class=" haschildren" aria-haspopup="true" aria-expanded="false" onclick="_etracker.sendEvent(new et_UserDefinedEvent('Layout', 'megamenu'));" href="/styleguide/layout">Layout</a>
<div class="menu-box">
<div class="menu-box--inner">
<div class="overview-and-close-button">
<a role="menuitem" aria-haspopup="true" aria-expanded="false" class="gesis-button--default" onclick="_etracker.sendEvent(new et_UserDefinedEvent('Layout', 'megamenu'));" href="/styleguide/layout">Layout</a>
<button class="close-button" aria-controls="gs_megamenu-104618" aria-label="Seiten-Navigationsmenü schließen"> Menü schließen </button>
</div>
<ul role="menu" >
<li class="gs_sub">
<h3>
Mainsite
</h3>
<a role="menuitem" class="gs-overview" aria-haspopup="true" aria-expanded="false" onclick="_etracker.sendEvent(new et_UserDefinedEvent('Mainsite', 'megamenu'));" href="/styleguide/layout/mainsite">Zur Übersicht</a> <span class="mobile-only menu-trigger"></span>
<ul role="menu" >
<li> <a role="menuitem" class="" onclick="_etracker.sendEvent(new et_UserDefinedEvent('Basic architecture', 'megamenu'));" href="/styleguide/layout/mainsite/basic-architecture">Basic architecture</a> </li>
<li> <a role="menuitem" class="" onclick="_etracker.sendEvent(new et_UserDefinedEvent('GESIS main header', 'megamenu'));" href="/styleguide/layout/mainsite/gesis-main-header">GESIS main header</a> </li>
<li> <a role="menuitem" class="" onclick="_etracker.sendEvent(new et_UserDefinedEvent('Main', 'megamenu'));" href="/styleguide/layout/mainsite/main">Main</a> </li>
<li> <a role="menuitem" class="" onclick="_etracker.sendEvent(new et_UserDefinedEvent('Footer', 'megamenu'));" href="/styleguide/layout/mainsite/footer">Footer</a> </li>
</ul>
</li>
<li class="gs_sub">
<h3>
Microsite
</h3>
<a role="menuitem" class="gs-overview" aria-haspopup="true" aria-expanded="false" onclick="_etracker.sendEvent(new et_UserDefinedEvent('Microsite', 'megamenu'));" href="/styleguide/layout/microsite">Zur Übersicht</a> <span class="mobile-only menu-trigger"></span>
<ul role="menu" >
<li> <a role="menuitem" class="" onclick="_etracker.sendEvent(new et_UserDefinedEvent('Basic architecture', 'megamenu'));" href="/styleguide/layout/microsite/basic-architecture">Basic architecture</a> </li>
<li> <a role="menuitem" class="" onclick="_etracker.sendEvent(new et_UserDefinedEvent('GESIS micro header', 'megamenu'));" href="/styleguide/layout/microsite/gesis-micro-header">GESIS micro header</a> </li>
<li> <a role="menuitem" class="" onclick="_etracker.sendEvent(new et_UserDefinedEvent('Banner', 'megamenu'));" href="/styleguide/layout/microsite/banner">Banner</a> </li>
<li> <a role="menuitem" class="" onclick="_etracker.sendEvent(new et_UserDefinedEvent('Navigation', 'megamenu'));" href="/styleguide/layout/microsite/navigation">Navigation</a> </li>
<li> <a role="menuitem" class="" onclick="_etracker.sendEvent(new et_UserDefinedEvent('Main', 'megamenu'));" href="/styleguide/layout/microsite/main">Main</a> </li>
<li> <a role="menuitem" class="" onclick="_etracker.sendEvent(new et_UserDefinedEvent('Footer', 'megamenu'));" href="/styleguide/layout/microsite/footer">Footer</a> </li>
</ul>
</li>
<li class="gs_sub">
<h3>
APP-view
</h3>
<a role="menuitem" class="gs-overview" aria-haspopup="true" aria-expanded="false" onclick="_etracker.sendEvent(new et_UserDefinedEvent('APP-view', 'megamenu'));" href="/styleguide/layout/app-view">Zur Übersicht</a> <span class="mobile-only menu-trigger"></span>
<ul role="menu" >
<li> <a role="menuitem" class="" onclick="_etracker.sendEvent(new et_UserDefinedEvent('Basic architecture', 'megamenu'));" href="/styleguide/layout/app-view/basic-architecture">Basic architecture</a> </li>
<li> <a role="menuitem" class="" onclick="_etracker.sendEvent(new et_UserDefinedEvent('Live Example', 'megamenu'));" href="/styleguide/layout/app-view/live-example">Live Example</a> </li>
<li> <a role="menuitem" class="" onclick="_etracker.sendEvent(new et_UserDefinedEvent('APP-bar: .sidebar', 'megamenu'));" href="/styleguide/layout/app-view/app-bar-sidebar">APP-bar: .sidebar</a> </li>
<li> <a role="menuitem" class="" onclick="_etracker.sendEvent(new et_UserDefinedEvent('Main', 'megamenu'));" href="/styleguide/layout/app-view/main">Main</a> </li>
<li> <a role="menuitem" class="" onclick="_etracker.sendEvent(new et_UserDefinedEvent('Main: .gs-intro', 'megamenu'));" href="/styleguide/layout/app-view/main-intro">Main: .gs-intro</a> </li>
<li> <a role="menuitem" class="" onclick="_etracker.sendEvent(new et_UserDefinedEvent('Main: .gs-toc', 'megamenu'));" href="/styleguide/layout/app-view/main-table-of-content">Main: .gs-toc</a> </li>
<li> <a role="menuitem" class="" onclick="_etracker.sendEvent(new et_UserDefinedEvent('Main: .gs-content', 'megamenu'));" href="/styleguide/layout/app-view/main-content">Main: .gs-content</a> </li>
</ul>
</li>
</ul>
</div>
</div>
</li>
<li class="gs_sub">
<a role="menuitem" class=" haschildren" aria-haspopup="true" aria-expanded="false" onclick="_etracker.sendEvent(new et_UserDefinedEvent('Widgets', 'megamenu'));" href="/styleguide/widgets">Widgets</a>
<div class="menu-box">
<div class="menu-box--inner">
<div class="overview-and-close-button">
<a role="menuitem" aria-haspopup="true" aria-expanded="false" class="gesis-button--default" onclick="_etracker.sendEvent(new et_UserDefinedEvent('Widgets', 'megamenu'));" href="/styleguide/widgets">Widgets</a>
<button class="close-button" aria-controls="gs_megamenu-104618" aria-label="Seiten-Navigationsmenü schließen"> Menü schließen </button>
</div>
<ul role="menu" >
<li>
<h3>
Cards
</h3>
<a role="menuitem" class="" onclick="_etracker.sendEvent(new et_UserDefinedEvent('Cards', 'megamenu'));" href="/styleguide/widgets/cards">Zur Übersicht</a>
</li>
</ul>
</div>
</div>
</li>
<li> <a role="menuitem" class="" onclick="_etracker.sendEvent(new et_UserDefinedEvent('Icons', 'megamenu'));" href="/styleguide/icons">Icons</a> </li>
<li> <a role="menuitem" class="" onclick="_etracker.sendEvent(new et_UserDefinedEvent('Farben', 'megamenu'));" href="/styleguide/farben">Farben</a> </li>
<li class="gs_sub">
<a role="menuitem" class=" haschildren" aria-haspopup="true" aria-expanded="false" onclick="_etracker.sendEvent(new et_UserDefinedEvent('Print', 'megamenu'));" href="/styleguide/print">Print</a>
<div class="menu-box">
<div class="menu-box--inner">
<div class="overview-and-close-button">
<a role="menuitem" aria-haspopup="true" aria-expanded="false" class="gesis-button--default" onclick="_etracker.sendEvent(new et_UserDefinedEvent('Print', 'megamenu'));" href="/styleguide/print">Print</a>
<button class="close-button" aria-controls="gs_megamenu-104618" aria-label="Seiten-Navigationsmenü schließen"> Menü schließen </button>
</div>
<ul role="menu" >
<li class="gs_sub">
<h3>
Components
</h3>
<a role="menuitem" class="gs-overview" aria-haspopup="true" aria-expanded="false" onclick="_etracker.sendEvent(new et_UserDefinedEvent('Components', 'megamenu'));" href="/styleguide/print/components">Zur Übersicht</a> <span class="mobile-only menu-trigger"></span>
<ul role="menu" >
<li> <a role="menuitem" class="" onclick="_etracker.sendEvent(new et_UserDefinedEvent('Logo und Signet', 'megamenu'));" href="/styleguide/print/logo-und-signet">Logo und Signet</a> </li>
<li> <a role="menuitem" class="" onclick="_etracker.sendEvent(new et_UserDefinedEvent('Schriftarten', 'megamenu'));" href="/styleguide/print/components/schriftarten">Schriftarten</a> </li>
<li> <a role="menuitem" class="" onclick="_etracker.sendEvent(new et_UserDefinedEvent('Farben', 'megamenu'));" href="/styleguide/print/components/farben">Farben</a> </li>
<li> <a role="menuitem" class="" onclick="_etracker.sendEvent(new et_UserDefinedEvent('Grafische Elemente', 'megamenu'));" href="/styleguide/print/components/grafische-elemente">Grafische Elemente</a> </li>
<li> <a role="menuitem" class="" onclick="_etracker.sendEvent(new et_UserDefinedEvent('Bildelemente', 'megamenu'));" href="/styleguide/print/components/bildelemente">Bildelemente</a> </li>
<li> <a role="menuitem" class="" onclick="_etracker.sendEvent(new et_UserDefinedEvent('Keyvisuals', 'megamenu'));" href="/styleguide/print/components/keyvisuals">Keyvisuals</a> </li>
</ul>
</li>
<li class="gs_sub">
<h3>
Examples
</h3>
<a role="menuitem" class="gs-overview" aria-haspopup="true" aria-expanded="false" onclick="_etracker.sendEvent(new et_UserDefinedEvent('Examples', 'megamenu'));" href="/styleguide/print/examples">Zur Übersicht</a> <span class="mobile-only menu-trigger"></span>
<ul role="menu" >
<li> <a role="menuitem" class="" onclick="_etracker.sendEvent(new et_UserDefinedEvent('Jahresbericht', 'megamenu'));" href="/styleguide/print/examples/jahresbericht">Jahresbericht</a> </li>
<li> <a role="menuitem" class="" onclick="_etracker.sendEvent(new et_UserDefinedEvent('Briefpapier', 'megamenu'));" href="/styleguide/print/examples/briefpapier">Briefpapier</a> </li>
<li> <a role="menuitem" class="" onclick="_etracker.sendEvent(new et_UserDefinedEvent('Institutspapier', 'megamenu'));" href="/styleguide/print/examples/institutspapier">Institutspapier</a> </li>
<li> <a role="menuitem" class="" onclick="_etracker.sendEvent(new et_UserDefinedEvent('Powerpointvorlage', 'megamenu'));" href="/styleguide/print/examples/powerpointvorlage">Powerpointvorlage</a> </li>
</ul>
</li>
</ul>
</div>
</div>
</li>
</ul>
<section class="mobile-only">
<nav class="gs_topnav" aria-label="Quick Links">
<ul class="list-group list-group-horizontal">
<li></li>
<li>
<a href="/styleguide/docs/components/megamenue"><span class="icon-gs-contact pe-1"></span><span class="d-md-inline">Kontakt</span></a>
</li>
<li>
<a href="/styleguide/docs/components/megamenue"><span class="icon-gs-help pe-1"></span><span class=" d-md-inline">Karriere</span></a>
</li>
</ul>
</nav>
</section>
</nav>
<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>
</div>
</div>
</header>
