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_vert" aria-labelledby="gs_mm_toggle_button-134571">
        <ul role="menu" id="gs_megamenu-134571" 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> 
            <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('Megamenü', 'megamenu'));" href="/styleguide/docs/components/megamenue">Megamenü</a> </li>
                  <li class="gs_active"> <a role="menuitem" class="" aria-current="page" 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>
              <li>
                <h3>
                  Forms
                </h3>
                <a role="menuitem" class="" onclick="_etracker.sendEvent(new et_UserDefinedEvent('Forms', 'megamenu'));" href="/styleguide/docs/forms">Zur Übersicht</a> 
              </li>
            </ul>
          </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> 
            <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('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: intro', 'megamenu'));" href="/styleguide/layout/app-view/main-intro">Main: intro</a> </li>
                  <li> <a role="menuitem" class="" onclick="_etracker.sendEvent(new et_UserDefinedEvent('Main: Table of Content', 'megamenu'));" href="/styleguide/layout/app-view/main-table-of-content">Main: Table of Content</a> </li>
                </ul>
              </li>
            </ul>
          </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> 
            <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>
          </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> <a role="menuitem" class="" onclick="_etracker.sendEvent(new et_UserDefinedEvent('Print', 'megamenu'));" href="/styleguide/print">Print</a> </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-vertikal"><span class="icon-gs-contact pe-1"></span><span class="d-md-inline">Kontakt</span></a>
              </li>
              <li>
                <a href="/styleguide/docs/components/megamenue-vertikal"><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>