Web Design Guide
2023-12-11 10:29:21 | 2.0.0
<nav class=" main-nav ">
<a class="main-nav__back -prev -hide" href="#">Main menu</a>
<ul class="main-nav__list">
<li class="main-nav__item">
<a class="main-nav__link -next" href="#">Privatkunden</a>
<nav class="main-nav__flyout flyout ">
<ul class="flyout__section section__list -grouped">
<li class="section__item">
<a class="section__link -next" href="#">Hochbau</a>
<ul class="section__sub-section sub-section__list section__second-level">
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Elektroinstallation</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Erneuerbare Energien</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Fenster und Türen</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Heizen und Kühlen</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Industrierohrsysteme</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Nahwärme</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Raumakustik</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Sanitärinstallation</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Terassensysteme</a>
</li>
</ul>
</li>
<li class="section__item">
<a class="section__link -next" href="#">Tiefbau</a>
<ul class="section__sub-section sub-section__list section__second-level">
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Abwasser</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Regenwasser</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Telekommunikation</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Verkehrswegebau</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Gasversorgung</a>
</li>
</ul>
</li>
<li class="section__item">
<a class="section__link -next" href="#">Innenausbau</a>
<ul class="section__sub-section sub-section__list section__second-level">
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Kanten</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Oberflächen</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Schrankrolladen</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Wandanschluss</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Sockelblenden</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Terassensystem</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Raumakustik</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Zentrales Staubsaugersystem</a>
</li>
</ul>
</li>
<li class="section__item">
<a class="section__link -next" href="#">Industriebau</a>
<ul class="section__sub-section sub-section__list section__second-level">
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Trinkwasserversorgung</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">PE-Xa-Gasrohr</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Drucklift & Kühlwasser</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Kältetransport</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Industrieabwasser</a>
</li>
</ul>
</li>
<li class="section__item">
<a class="section__link -next" href="#">Tiefbau</a>
<ul class="section__sub-section sub-section__list section__second-level">
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Abwasser</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Regenwasser</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Telekommunikation</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Verkehrswegebau</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Gasversorgung</a>
</li>
</ul>
</li>
</ul>
<ul class="flyout__service service__list">
<li class="service__item">
<a class="service__link" href="#">Referenzen</a>
</li>
<li class="service__item">
<a class="service__link" href="#">Services</a>
</li>
<li class="service__item">
<a class="service__link" href="#">Akademie</a>
</li>
</ul>
</nav>
</li>
<li class="main-nav__item">
<a class="main-nav__link -next" href="#">Handwerker und Bauunternehmer</a>
<nav class="main-nav__flyout flyout ">
<ul class="flyout__section section__list -grouped">
<li class="section__item">
<a class="section__link -next" href="#">Hochbau</a>
<ul class="section__sub-section sub-section__list section__second-level">
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Elektroinstallation</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Erneuerbare Energien</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Fenster und Türen</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Heizen und Kühlen</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Industrierohrsysteme</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Nahwärme</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Raumakustik</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Sanitärinstallation</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Terassensysteme</a>
</li>
</ul>
</li>
<li class="section__item">
<a class="section__link -next" href="#">Tiefbau</a>
<ul class="section__sub-section sub-section__list section__second-level">
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Abwasser</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Regenwasser</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Telekommunikation</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Verkehrswegebau</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Gasversorgung</a>
</li>
</ul>
</li>
<li class="section__item">
<a class="section__link -next" href="#">Innenausbau</a>
<ul class="section__sub-section sub-section__list section__second-level">
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Kanten</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Oberflächen</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Schrankrolladen</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Wandanschluss</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Sockelblenden</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Terassensystem</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Raumakustik</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Zentrales Staubsaugersystem</a>
</li>
</ul>
</li>
<li class="section__item">
<a class="section__link -next" href="#">Industriebau</a>
<ul class="section__sub-section sub-section__list section__second-level">
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Trinkwasserversorgung</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">PE-Xa-Gasrohr</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Drucklift & Kühlwasser</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Kältetransport</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Industrieabwasser</a>
</li>
</ul>
</li>
<li class="section__item">
<a class="section__link -next" href="#">Tiefbau</a>
<ul class="section__sub-section sub-section__list section__second-level">
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Abwasser</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Regenwasser</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Telekommunikation</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Verkehrswegebau</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Gasversorgung</a>
</li>
</ul>
</li>
</ul>
<ul class="flyout__service service__list">
<li class="service__item">
<a class="service__link" href="#">Referenzen</a>
</li>
<li class="service__item">
<a class="service__link" href="#">Services</a>
</li>
<li class="service__item">
<a class="service__link" href="#">Akademie</a>
</li>
</ul>
</nav>
</li>
<li class="main-nav__item">
<a class="main-nav__link -active -next" href="#">Architekten und Planer</a>
<nav class="main-nav__flyout flyout ">
<ul class="flyout__section section__list -grouped">
<li class="section__item">
<a class="section__link -next" href="#">Hochbau</a>
<ul class="section__sub-section sub-section__list section__second-level">
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Elektroinstallation</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Erneuerbare Energien</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Fenster und Türen</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Heizen und Kühlen</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Industrierohrsysteme</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Nahwärme</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Raumakustik</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Sanitärinstallation</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Terassensysteme</a>
</li>
</ul>
</li>
<li class="section__item">
<a class="section__link -next" href="#">Tiefbau</a>
<ul class="section__sub-section sub-section__list section__second-level">
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Abwasser</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Regenwasser</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Telekommunikation</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Verkehrswegebau</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Gasversorgung</a>
</li>
</ul>
</li>
<li class="section__item">
<a class="section__link -next" href="#">Innenausbau</a>
<ul class="section__sub-section sub-section__list section__second-level">
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Kanten</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Oberflächen</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Schrankrolladen</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Wandanschluss</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Sockelblenden</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Terassensystem</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Raumakustik</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Zentrales Staubsaugersystem</a>
</li>
</ul>
</li>
<li class="section__item">
<a class="section__link -next" href="#">Industriebau</a>
<ul class="section__sub-section sub-section__list section__second-level">
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Trinkwasserversorgung</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">PE-Xa-Gasrohr</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Drucklift & Kühlwasser</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Kältetransport</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Industrieabwasser</a>
</li>
</ul>
</li>
<li class="section__item">
<a class="section__link -next" href="#">Tiefbau</a>
<ul class="section__sub-section sub-section__list section__second-level">
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Abwasser</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Regenwasser</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Telekommunikation</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Verkehrswegebau</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Gasversorgung</a>
</li>
</ul>
</li>
</ul>
<ul class="flyout__service service__list">
<li class="service__item">
<a class="service__link" href="#">Referenzen</a>
</li>
<li class="service__item">
<a class="service__link" href="#">Services</a>
</li>
<li class="service__item">
<a class="service__link" href="#">Akademie</a>
</li>
</ul>
</nav>
</li>
<li class="main-nav__item">
<a class="main-nav__link -next" href="#">Industrie</a>
<nav class="main-nav__flyout flyout ">
<ul class="flyout__section section__list -grouped">
<li class="section__item">
<a class="section__link -next" href="#">Hochbau</a>
<ul class="section__sub-section sub-section__list section__second-level">
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Elektroinstallation</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Erneuerbare Energien</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Fenster und Türen</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Heizen und Kühlen</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Industrierohrsysteme</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Nahwärme</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Raumakustik</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Sanitärinstallation</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Terassensysteme</a>
</li>
</ul>
</li>
<li class="section__item">
<a class="section__link -next" href="#">Tiefbau</a>
<ul class="section__sub-section sub-section__list section__second-level">
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Abwasser</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Regenwasser</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Telekommunikation</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Verkehrswegebau</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Gasversorgung</a>
</li>
</ul>
</li>
<li class="section__item">
<a class="section__link -next" href="#">Innenausbau</a>
<ul class="section__sub-section sub-section__list section__second-level">
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Kanten</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Oberflächen</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Schrankrolladen</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Wandanschluss</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Sockelblenden</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Terassensystem</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Raumakustik</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Zentrales Staubsaugersystem</a>
</li>
</ul>
</li>
<li class="section__item">
<a class="section__link -next" href="#">Industriebau</a>
<ul class="section__sub-section sub-section__list section__second-level">
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Trinkwasserversorgung</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">PE-Xa-Gasrohr</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Drucklift & Kühlwasser</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Kältetransport</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Industrieabwasser</a>
</li>
</ul>
</li>
<li class="section__item">
<a class="section__link -next" href="#">Tiefbau</a>
<ul class="section__sub-section sub-section__list section__second-level">
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Abwasser</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Regenwasser</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Telekommunikation</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Verkehrswegebau</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Gasversorgung</a>
</li>
</ul>
</li>
</ul>
<ul class="flyout__service service__list">
<li class="service__item">
<a class="service__link" href="#">Referenzen</a>
</li>
<li class="service__item">
<a class="service__link" href="#">Services</a>
</li>
<li class="service__item">
<a class="service__link" href="#">Akademie</a>
</li>
</ul>
</nav>
</li>
<li class="main-nav__item">
<a class="main-nav__link -next" href="#">Investoren und öffentliche Bauherren</a>
<nav class="main-nav__flyout flyout ">
<ul class="flyout__section section__list -grouped">
<li class="section__item">
<a class="section__link -next" href="#">Hochbau</a>
<ul class="section__sub-section sub-section__list section__second-level">
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Elektroinstallation</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Erneuerbare Energien</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Fenster und Türen</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Heizen und Kühlen</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Industrierohrsysteme</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Nahwärme</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Raumakustik</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Sanitärinstallation</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Terassensysteme</a>
</li>
</ul>
</li>
<li class="section__item">
<a class="section__link -next" href="#">Tiefbau</a>
<ul class="section__sub-section sub-section__list section__second-level">
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Abwasser</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Regenwasser</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Telekommunikation</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Verkehrswegebau</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Gasversorgung</a>
</li>
</ul>
</li>
<li class="section__item">
<a class="section__link -next" href="#">Innenausbau</a>
<ul class="section__sub-section sub-section__list section__second-level">
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Kanten</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Oberflächen</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Schrankrolladen</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Wandanschluss</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Sockelblenden</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Terassensystem</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Raumakustik</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Zentrales Staubsaugersystem</a>
</li>
</ul>
</li>
<li class="section__item">
<a class="section__link -next" href="#">Industriebau</a>
<ul class="section__sub-section sub-section__list section__second-level">
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Trinkwasserversorgung</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">PE-Xa-Gasrohr</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Drucklift & Kühlwasser</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Kältetransport</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Industrieabwasser</a>
</li>
</ul>
</li>
<li class="section__item">
<a class="section__link -next" href="#">Tiefbau</a>
<ul class="section__sub-section sub-section__list section__second-level">
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Abwasser</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Regenwasser</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Telekommunikation</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Verkehrswegebau</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Gasversorgung</a>
</li>
</ul>
</li>
</ul>
<ul class="flyout__service service__list">
<li class="service__item">
<a class="service__link" href="#">Referenzen</a>
</li>
<li class="service__item">
<a class="service__link" href="#">Services</a>
</li>
<li class="service__item">
<a class="service__link" href="#">Akademie</a>
</li>
</ul>
</nav>
</li>
<li class="main-nav__item">
<a class="main-nav__link -next" href="#">Handel</a>
<nav class="main-nav__flyout flyout ">
<ul class="flyout__section section__list -grouped">
<li class="section__item">
<a class="section__link -next" href="#">Hochbau</a>
<ul class="section__sub-section sub-section__list section__second-level">
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Elektroinstallation</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Erneuerbare Energien</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Fenster und Türen</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Heizen und Kühlen</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Industrierohrsysteme</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Nahwärme</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Raumakustik</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Sanitärinstallation</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Terassensysteme</a>
</li>
</ul>
</li>
<li class="section__item">
<a class="section__link -next" href="#">Tiefbau</a>
<ul class="section__sub-section sub-section__list section__second-level">
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Abwasser</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Regenwasser</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Telekommunikation</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Verkehrswegebau</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Gasversorgung</a>
</li>
</ul>
</li>
<li class="section__item">
<a class="section__link -next" href="#">Innenausbau</a>
<ul class="section__sub-section sub-section__list section__second-level">
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Kanten</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Oberflächen</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Schrankrolladen</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Wandanschluss</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Sockelblenden</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Terassensystem</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Raumakustik</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Zentrales Staubsaugersystem</a>
</li>
</ul>
</li>
<li class="section__item">
<a class="section__link -next" href="#">Industriebau</a>
<ul class="section__sub-section sub-section__list section__second-level">
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Trinkwasserversorgung</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">PE-Xa-Gasrohr</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Drucklift & Kühlwasser</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Kältetransport</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Industrieabwasser</a>
</li>
</ul>
</li>
<li class="section__item">
<a class="section__link -next" href="#">Tiefbau</a>
<ul class="section__sub-section sub-section__list section__second-level">
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Abwasser</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Regenwasser</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Telekommunikation</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Verkehrswegebau</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Gasversorgung</a>
</li>
</ul>
</li>
</ul>
<ul class="flyout__service service__list">
<li class="service__item">
<a class="service__link" href="#">Referenzen</a>
</li>
<li class="service__item">
<a class="service__link" href="#">Services</a>
</li>
<li class="service__item">
<a class="service__link" href="#">Akademie</a>
</li>
</ul>
</nav>
</li>
</ul>
</nav>
{{#if items}}
<nav class="{{mixes}} main-nav {{modifiers}}">
<a class="main-nav__back -prev -hide" href="#">Main menu</a>
<ul class="main-nav__list">
{{#each items}}
<li class="main-nav__item">
<a class="main-nav__link {{modifiers}}" href="{{{href}}}">{{{text}}}</a>
{{render '@molecules-flyout' flyout merge=true }}
</li>
{{/each}}
</ul>
</nav>
{{/if}}
{
"items": [
{
"href": "#",
"text": "Privatkunden",
"modifiers": "-next",
"flyout": {
"mixes": "main-nav__flyout"
}
},
{
"href": "#",
"text": "Handwerker und Bauunternehmer",
"modifiers": "-next",
"flyout": {
"mixes": "main-nav__flyout"
}
},
{
"href": "#",
"text": "Architekten und Planer",
"modifiers": "-active -next",
"flyout": {
"mixes": "main-nav__flyout"
}
},
{
"href": "#",
"text": "Industrie",
"modifiers": "-next",
"flyout": {
"mixes": "main-nav__flyout"
}
},
{
"href": "#",
"text": "Investoren und öffentliche Bauherren",
"modifiers": "-next",
"flyout": {
"mixes": "main-nav__flyout"
}
},
{
"href": "#",
"text": "Handel",
"modifiers": "-next",
"flyout": {
"mixes": "main-nav__flyout"
}
}
]
}
-
Content:
/* Main Navigation */ .main-nav { $root: &; @include typography-level('main-nav'); &__list { padding-left: 0; list-style: none; } &__item { display: block; } &__link, &__back { display: block; padding: 2px 0; color: inherit; &:hover, &:active { color: $primary; } &:hover, &:active { text-decoration: none; } } // stylelint-disable-next-line order/order @include breakpoint(medium down) { $only: -zf-breakpoints-less-than(pre-large); &__link, &__back { position: relative; overflow: hidden; text-overflow: ellipsis; &.-next, &.-prev { cursor: pointer; } &.-prev { @include typography-level('main-nav-active-link'); color: $primary; } &.-next::after, &.-prev::before { position: absolute; top: 50%; width: 2rem; height: 2rem; transform: translateY(-50%); line-height: inherit; color: inherit; } &.-next::after { $symbol: map-get($icons, 'chevron-right'); @include icon-content-extended($symbol, inline-block); right: 0; text-align: right; } &.-prev::before { $symbol: map-get($icons, 'chevron-left'); @include icon-content-extended($symbol, inline-block); left: 0; text-align: left; } } @each $breakpoint, $gutter in $grid-gutters { @if (false != index($only, $breakpoint)) { @include breakpoint($breakpoint) { &__item { margin: rem-calc($gutter) 0; } &__link, &__back { margin: rem-calc($gutter) 0; padding: 0 rem-calc($gutter); } } } } &__flyout { display: none; } &__list.-expand { #{$root}__item:not(.-expand) { display: none; } } &__item.-expand { > #{$root}__link { @include typography-level('main-nav-active-link'); } #{$root}__flyout { display: block; } } } @include breakpoint(pre-large) { position: relative; &__list { display: flex; } &__item { margin: 0 2rem; &:first-child { margin-left: 0; } &:last-child { margin-right: 0; } &::after { content: ''; position: relative; top: -0.5rem; right: 0; bottom: 0; display: block; width: 0; height: 0.5rem; background-color: $primary; transition: width 0.2s ease-out; } &:hover::after { left: 0; width: 100%; } } &__link { height: 100%; padding: 1rem 0 2.5rem; text-align: center; text-decoration: none; &.-active { color: $primary; } } &__back { // stylelint-disable-next-line declaration-no-important display: none !important; } &__flyout { position: absolute; top: 100%; right: -$flyout-padding; left: -$flyout-padding; height: auto; max-height: 0; overflow: hidden; transition: max-height 0.2s cubic-bezier(0.42, 0, 0.58, 1); #{$root}__item:hover > &, #{$root}__item:focus > & { max-height: rem-calc(2000); } } } } - URL: /components/raw/molecules-main-nav/_main-nav.scss
- Filesystem Path: src/components/02-ui-components/02-molecules/01-main-nav/_main-nav.scss
- Size: 3.4 KB
- Handle: @molecules-main-nav
- Preview:
- Filesystem Path: src/components/02-ui-components/02-molecules/01-main-nav/main-nav.hbs
- References (1): @molecules-flyout
- Referenced by (3): @organisms-header, @organisms-header--signet, @organisms-header--behr
There are no notes for this item.