Web Design Guide
2024-10-28 08:44:01 | 2.0.0
<nav class=" flyout -three-level">
<ul class="flyout__section section__list ">
<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>
<ul class="section__sub-section sub-section__list">
<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="sub-section__item ">
<a class="sub-section__link" href="#">Erneuerbare Energien</a>
<ul class="section__sub-section sub-section__list">
<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="sub-section__item ">
<a class="sub-section__link" href="#">Fenster und Türen</a>
<ul class="section__sub-section sub-section__list">
<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="sub-section__item ">
<a class="sub-section__link" href="#">Heizen und Kühlen</a>
<ul class="section__sub-section sub-section__list">
<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="sub-section__item ">
<a class="sub-section__link" href="#">Industrierohrsysteme</a>
<ul class="section__sub-section sub-section__list">
<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="sub-section__item ">
<a class="sub-section__link" href="#">Nahwärme</a>
<ul class="section__sub-section sub-section__list">
<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="sub-section__item ">
<a class="sub-section__link" href="#">Raumakustik</a>
<ul class="section__sub-section sub-section__list">
<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="sub-section__item ">
<a class="sub-section__link" href="#">Sanitärinstallation</a>
<ul class="section__sub-section sub-section__list">
<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="sub-section__item ">
<a class="sub-section__link" href="#">Terassensysteme</a>
<ul class="section__sub-section sub-section__list">
<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>
</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>
<div class="flyout__wrapper">
<ul class="flyout__news">
<li class="cell"><a href="#" class="link__teaser">
<div class=" teaser teaser--horizontal">
<div class="teaser__visual">
<div class="teaser__image media ">
<img class="media__item" src="/demo/teaser/teaser2.jpg" alt=Klettsystem Rautherm Speed>
</div>
</div>
<div class="teaser__content">
<span class="teaser__date -event">10.01.12</span>
<span class="teaser__headline h2">
Handwerker und Bauunternehmer
</span>
<div class="teaser__text">
<p>Das schnelle 1-Mann-System für die Flächenheizung/-kühlung</p>
</div>
</div>
</div>
</a></li>
<li class="cell"><a href="#" class="link__teaser">
<div class=" teaser teaser--horizontal">
<div class="teaser__visual">
<div class="teaser__image media ">
<img class="media__item" src="/demo/teaser/teaser2.jpg" alt=Klettsystem Rautherm Speed>
</div>
</div>
<div class="teaser__content">
<span class="teaser__date -event">10.01.12</span>
<span class="teaser__headline h2">
Handwerker und Bauunternehmer
</span>
<div class="teaser__text">
<p>Das schnelle 1-Mann-System für die Flächenheizung/-kühlung</p>
</div>
</div>
</div>
</a></li>
<li class="cell"><a href="#" class="link__teaser">
<div class=" teaser teaser--horizontal">
<div class="teaser__visual">
<div class="teaser__image media ">
<img class="media__item" src="/demo/teaser/teaser2.jpg" alt=Klettsystem Rautherm Speed>
</div>
</div>
<div class="teaser__content">
<span class="teaser__date -event">10.01.12</span>
<span class="teaser__headline h2">
Handwerker und Bauunternehmer
</span>
<div class="teaser__text">
<p>Das schnelle 1-Mann-System für die Flächenheizung/-kühlung</p>
</div>
</div>
</div>
</a></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>
</div>
</nav>
{{#if items}}
<nav class="{{mixes}} flyout {{modifiers}}">
<ul class="flyout__section section__list {{sectionModifiers}}">
{{#each items}}
<li class="section__item">
<a class="section__link{{#if items}} -next{{/if}}" href="{{{href}}}">{{{text}}}</a>
{{#if items}}
<ul class="section__sub-section sub-section__list section__second-level">
{{#each items}}
<li class="sub-section__item {{modifiers}}">
<a class="sub-section__link" href="{{{href}}}">{{{text}}}</a>
{{#if items}}
<ul class="section__sub-section sub-section__list">
{{#each items}}
<li class="sub-section__item {{modifiers}}">
<a class="sub-section__link" href="{{{href}}}">{{{text}}}</a>
</li>
{{/each}}
</ul>
{{/if}}
</li>
{{/each}}
</ul>
{{/if}}
</li>
{{/each}}
</ul>
{{#if news}}
<div class="flyout__wrapper">
<ul class="flyout__news">
<li class="cell">{{render '@molecules-teaser--horizontal' newsTeaser merge=true}}</li>
<li class="cell">{{render '@molecules-teaser--horizontal' newsTeaser merge=true}}</li>
<li class="cell">{{render '@molecules-teaser--horizontal' newsTeaser merge=true}}</li>
</ul>
{{/if}}
<ul class="flyout__service service__list">
{{#each service}}
<li class="service__item">
<a class="service__link" href="{{{href}}}">{{{text}}}</a>
</li>
{{/each}}
</ul>
{{#if news}}
</div>
{{/if}}
</nav>
{{/if}}
{
"sectionModifiers": null,
"items": [
{
"href": "#",
"text": "Hochbau",
"items": [
{
"href": "#",
"text": "Elektroinstallation",
"items": [
{
"href": "#",
"text": "Elektroinstallation"
},
{
"href": "#",
"text": "Erneuerbare Energien"
},
{
"href": "#",
"text": "Fenster und Türen"
},
{
"href": "#",
"text": "Heizen und Kühlen"
},
{
"href": "#",
"text": "Industrierohrsysteme"
},
{
"href": "#",
"text": "Nahwärme"
},
{
"href": "#",
"text": "Raumakustik"
},
{
"href": "#",
"text": "Sanitärinstallation"
},
{
"href": "#",
"text": "Terassensysteme"
}
]
},
{
"href": "#",
"text": "Erneuerbare Energien",
"items": [
{
"href": "#",
"text": "Elektroinstallation"
},
{
"href": "#",
"text": "Erneuerbare Energien"
},
{
"href": "#",
"text": "Fenster und Türen"
},
{
"href": "#",
"text": "Heizen und Kühlen"
},
{
"href": "#",
"text": "Industrierohrsysteme"
},
{
"href": "#",
"text": "Nahwärme"
},
{
"href": "#",
"text": "Raumakustik"
},
{
"href": "#",
"text": "Sanitärinstallation"
},
{
"href": "#",
"text": "Terassensysteme"
}
]
},
{
"href": "#",
"text": "Fenster und Türen",
"items": [
{
"href": "#",
"text": "Elektroinstallation"
},
{
"href": "#",
"text": "Erneuerbare Energien"
},
{
"href": "#",
"text": "Fenster und Türen"
},
{
"href": "#",
"text": "Heizen und Kühlen"
},
{
"href": "#",
"text": "Industrierohrsysteme"
},
{
"href": "#",
"text": "Nahwärme"
},
{
"href": "#",
"text": "Raumakustik"
},
{
"href": "#",
"text": "Sanitärinstallation"
},
{
"href": "#",
"text": "Terassensysteme"
}
]
},
{
"href": "#",
"text": "Heizen und Kühlen",
"items": [
{
"href": "#",
"text": "Elektroinstallation"
},
{
"href": "#",
"text": "Erneuerbare Energien"
},
{
"href": "#",
"text": "Fenster und Türen"
},
{
"href": "#",
"text": "Heizen und Kühlen"
},
{
"href": "#",
"text": "Industrierohrsysteme"
},
{
"href": "#",
"text": "Nahwärme"
},
{
"href": "#",
"text": "Raumakustik"
},
{
"href": "#",
"text": "Sanitärinstallation"
},
{
"href": "#",
"text": "Terassensysteme"
}
]
},
{
"href": "#",
"text": "Industrierohrsysteme",
"items": [
{
"href": "#",
"text": "Elektroinstallation"
},
{
"href": "#",
"text": "Erneuerbare Energien"
},
{
"href": "#",
"text": "Fenster und Türen"
},
{
"href": "#",
"text": "Heizen und Kühlen"
},
{
"href": "#",
"text": "Industrierohrsysteme"
},
{
"href": "#",
"text": "Nahwärme"
},
{
"href": "#",
"text": "Raumakustik"
},
{
"href": "#",
"text": "Sanitärinstallation"
},
{
"href": "#",
"text": "Terassensysteme"
}
]
},
{
"href": "#",
"text": "Nahwärme",
"items": [
{
"href": "#",
"text": "Elektroinstallation"
},
{
"href": "#",
"text": "Erneuerbare Energien"
},
{
"href": "#",
"text": "Fenster und Türen"
},
{
"href": "#",
"text": "Heizen und Kühlen"
},
{
"href": "#",
"text": "Industrierohrsysteme"
},
{
"href": "#",
"text": "Nahwärme"
},
{
"href": "#",
"text": "Raumakustik"
},
{
"href": "#",
"text": "Sanitärinstallation"
},
{
"href": "#",
"text": "Terassensysteme"
}
]
},
{
"href": "#",
"text": "Raumakustik",
"items": [
{
"href": "#",
"text": "Elektroinstallation"
},
{
"href": "#",
"text": "Erneuerbare Energien"
},
{
"href": "#",
"text": "Fenster und Türen"
},
{
"href": "#",
"text": "Heizen und Kühlen"
},
{
"href": "#",
"text": "Industrierohrsysteme"
},
{
"href": "#",
"text": "Nahwärme"
},
{
"href": "#",
"text": "Raumakustik"
},
{
"href": "#",
"text": "Sanitärinstallation"
},
{
"href": "#",
"text": "Terassensysteme"
}
]
},
{
"href": "#",
"text": "Sanitärinstallation",
"items": [
{
"href": "#",
"text": "Elektroinstallation"
},
{
"href": "#",
"text": "Erneuerbare Energien"
},
{
"href": "#",
"text": "Fenster und Türen"
},
{
"href": "#",
"text": "Heizen und Kühlen"
},
{
"href": "#",
"text": "Industrierohrsysteme"
},
{
"href": "#",
"text": "Nahwärme"
},
{
"href": "#",
"text": "Raumakustik"
},
{
"href": "#",
"text": "Sanitärinstallation"
},
{
"href": "#",
"text": "Terassensysteme"
}
]
},
{
"href": "#",
"text": "Terassensysteme",
"items": [
{
"href": "#",
"text": "Elektroinstallation"
},
{
"href": "#",
"text": "Erneuerbare Energien"
},
{
"href": "#",
"text": "Fenster und Türen"
},
{
"href": "#",
"text": "Heizen und Kühlen"
},
{
"href": "#",
"text": "Industrierohrsysteme"
},
{
"href": "#",
"text": "Nahwärme"
},
{
"href": "#",
"text": "Raumakustik"
},
{
"href": "#",
"text": "Sanitärinstallation"
},
{
"href": "#",
"text": "Terassensysteme"
}
]
}
]
},
{
"href": "#",
"text": "Tiefbau",
"items": [
{
"href": "#",
"text": "Abwasser"
},
{
"href": "#",
"text": "Regenwasser"
},
{
"href": "#",
"text": "Telekommunikation"
},
{
"href": "#",
"text": "Verkehrswegebau"
},
{
"href": "#",
"text": "Gasversorgung"
}
]
},
{
"href": "#",
"text": "Innenausbau",
"items": [
{
"href": "#",
"text": "Kanten"
},
{
"href": "#",
"text": "Oberflächen"
},
{
"href": "#",
"text": "Schrankrolladen"
},
{
"href": "#",
"text": "Wandanschluss"
},
{
"href": "#",
"text": "Sockelblenden"
},
{
"href": "#",
"text": "Terassensystem"
},
{
"href": "#",
"text": "Raumakustik"
},
{
"href": "#",
"text": "Zentrales Staubsaugersystem"
}
]
},
{
"href": "#",
"text": "Industriebau",
"items": [
{
"href": "#",
"text": "Trinkwasserversorgung"
},
{
"href": "#",
"text": "PE-Xa-Gasrohr"
},
{
"href": "#",
"text": "Drucklift & Kühlwasser"
},
{
"href": "#",
"text": "Kältetransport"
},
{
"href": "#",
"text": "Industrieabwasser"
}
]
},
{
"href": "#",
"text": "Tiefbau",
"items": [
{
"href": "#",
"text": "Abwasser"
},
{
"href": "#",
"text": "Regenwasser"
},
{
"href": "#",
"text": "Telekommunikation"
},
{
"href": "#",
"text": "Verkehrswegebau"
},
{
"href": "#",
"text": "Gasversorgung"
}
]
}
],
"service": [
{
"href": "#",
"text": "Referenzen"
},
{
"href": "#",
"text": "Services"
},
{
"href": "#",
"text": "Akademie"
}
],
"modifiers": "-three-level",
"news": {
"newsTeaser": {}
}
}
-
Content:
/* Flyout */ .section { $root: &; &__list { padding-left: 0; list-style: none; } &__item { display: block; } &__link, &__text { display: block; color: inherit; } &__link { &:hover, &:active, &.-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); @each $breakpoint, $gutter in $grid-gutters { @if (false != index($only, $breakpoint)) { @include breakpoint($breakpoint) { &__item { margin: rem-calc($gutter) 0; } &__link { padding: 0 rem-calc($gutter); } } } } &__link { position: relative; overflow: hidden; text-overflow: ellipsis; &.-next, &.-prev { cursor: pointer; } &.-prev { @include typography-level('main-nav-active-link'); color: $primary; } &.-next::after { 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; } } &__sub-section { display: none; } &__list.-expand { #{$root}__item:not(.-expand) { display: none; } } &__item.-expand { > #{$root}__link { @include typography-level('main-nav-active-link'); } > #{$root}__sub-section { display: block; } } } @include breakpoint(pre-large) { &__list { display: flex; flex-flow: row wrap; padding: $flyout-padding / 2; &.-grouped { #{$root}__link, #{$root}__text { margin-bottom: $flyout-section-item-margin * 2; font-weight: $font-weight-bold; } } } &__item { width: calc((100% - #{$flyout-padding}) / 4); padding: $flyout-padding / 2; } } } .sub-section { $root: &; &__list { padding-left: 0; list-style: none; } &__item { display: block; } // stylelint-disable-next-line order/order @include breakpoint(medium down) { &__item.-expand { > #{$root}__link { @include typography-level('main-nav-active-link'); } > .section__sub-section { display: block; } } &__link { position: relative; overflow: hidden; text-overflow: ellipsis; &.-next, &.-prev { cursor: pointer; } &.-prev { @include typography-level('main-nav-active-link'); color: $primary; } &.-next::after { 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; } } } &__link { display: block; color: inherit; &:hover, &:active, &.-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); @each $breakpoint, $gutter in $grid-gutters { @if (false != index($only, $breakpoint)) { @include breakpoint($breakpoint) { &__item { margin: rem-calc($gutter) 0; } &__link { padding: 0 rem-calc($gutter); } } } } } @include breakpoint(pre-large) { &__item { margin-bottom: $flyout-section-item-margin; } } } .service { $root: &; &__list { padding-left: 0; list-style: none; } &__item { display: block; } &__link { display: block; color: inherit; &:hover, &:active, &.-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); @each $breakpoint, $gutter in $grid-gutters { @if (false != index($only, $breakpoint)) { @include breakpoint($breakpoint) { &__item { margin: rem-calc($gutter) 0; } &__link { padding: 0 rem-calc($gutter); } } } } } @include breakpoint(pre-large) { &__item { padding: $flyout-padding; } &__link { &:hover, &:active, &.-active { color: $primary; } &:hover, &:active { text-decoration: none; } } } } .flyout { $root: &; // stylelint-disable-next-line order/order @include breakpoint(medium down) { $only: -zf-breakpoints-less-than(pre-large); &__service:not(:first-child) { border-top: 1px solid $gray-lighter; } @each $breakpoint, $gutter in $grid-gutters { @if (false != index($only, $breakpoint)) { @include breakpoint($breakpoint) { &__section:not(:last-child) { margin-bottom: rem-calc($gutter / 2); padding-bottom: rem-calc($gutter / 2); } &__service { margin-top: rem-calc($gutter / 2); padding-top: rem-calc($gutter / 2); } } } } &__section.-expand + &__service { display: none; } } @include breakpoint(pre-large) { background: $white; &__section, &__service { border: 1px solid $gray-lighter; } &__section { margin-bottom: 0; } &__service { display: flex; justify-content: center; border-top: 0 none; } } @include breakpoint(pre-large) { &.-three-level { display: flex; .flyout__section { flex-flow: column; width: calc((100% - #{$flyout-padding}) / 4); background-color: $gray-lighter; .section__item { width: 100%; } .section__link { display: inline-block; margin: -$flyout-padding; padding: $flyout-padding; font-weight: $font-weight-bold; &:hover { display: block; } } } .section__second-level { display: none; padding-top: $flyout-padding; > .sub-section__item { > .sub-section__link { margin-bottom: $flyout-section-item-margin * 2; font-weight: $font-weight-bold; } } > .sub-section__item { width: calc((100% - #{$flyout-padding}) / 3); } } .section__item.-active { .section__link { display: blcok; color: $primary; } .section__second-level { position: absolute; top: 0; left: calc((100% - #{$flyout-padding}) / 4); display: flex; flex-flow: row wrap; width: calc((100% + #{$flyout-padding}) / 4 * 3); margin-left: -$flyout-padding/2; padding-left: $flyout-padding; } } .flyout__wrapper { display: flex; flex-grow: 1; flex-flow: row wrap; } .flyout__news { width: 100%; padding: $flyout-padding; list-style: none; .cell:last-child .teaser { border-bottom: 0; } } .flyout__service { z-index: 10000; flex-grow: 1; align-self: flex-end; width: 100%; border-top: 1px solid $gray-lighter; } .service__item { padding: ($flyout-padding / 2) $flyout-padding; } } } @include breakpoint(medium down) { .flyout__news { display: none; } &.-three-level .section__sub-section { padding-left: $flyout-padding/2; } } } - URL: /components/raw/molecules-flyout/_flyout.scss
- Filesystem Path: src/components/02-ui-components/02-molecules/02-flyout/_flyout.scss
- Size: 8.3 KB
- Handle: @molecules-flyout--three-level-flyout
- Variants (3): Default , Second Level Only , Three Level Flyout
- Preview:
- Filesystem Path: src/components/02-ui-components/02-molecules/02-flyout/flyout.hbs
- References (1): @molecules-teaser--horizontal
There are no notes for this item.