<div class="c-main-menu">
<input type="checkbox" id="mainMenuTrigger" class="c-main-menu__trigger" />
<label for="mainMenuTrigger" class="c-main-menu__label">
<span class="o-css-icon o-css-icon--menu"></span>
Menü
</label>
<div class="c-main-menu__actor">
<div class="c-main-menu__section c-main-menu__section--search">
<div class="c-searchbox c-searchbox--integrated js-searchbox">
<input type="checkbox" id="searchboxIntegratedTrigger" class="c-searchbox__trigger" />
<label for="searchboxIntegratedTrigger" class="c-searchbox__label">
<span class="o-css-icon o-css-icon--search"></span>
Suche
</label>
<div class="c-searchbox__actor">
<div class="c-searchbox__section">
<span class="c-searchbox__section-title">Suche</span>
<form class="o-form o-form--search">
<div class="grid-x grid-margin-x">
<div class="cell large-8 medium-8 small-8">
<div class="o-form__field">
<div class="o-form__fluid">
<input title="" type="text" class="o-form__input o-form__input--text " placeholder="Bitte ausfüllen" aria-describedby="input-01" required>
</div>
<span class="o-form__status o-form__status--warning">
</span>
<span class="o-form__info" id="input-01"></span>
</div>
</div>
<div class="cell large-4 medium-4 small-4">
<input type="submit" class="o-form__input c-button c-button--full" value="Suchen">
</div>
</div>
<div id="kesearch_filters" class="o-searchfacets">
<div class="grid-x">
<div class="cell small-6">
<fieldset class="o-form__field">
<legend class="u-h5">Facette 1</legend>
<input class="o-form__input o-form__input--checkbox o-form__input--hidden" type="checkbox" value="idx_author" id="f1_1">
<label class="o-form__label o-form__label--checkbox" for="f1_1">
Autoren</label>
<input class="o-form__input o-form__input--checkbox o-form__input--hidden" type="checkbox" value="idx_nws" id="f1_2">
<label class="o-form__label o-form__label--checkbox" for="f1_2">
News</label>
<input class="o-form__input o-form__input--checkbox o-form__input--hidden" type="checkbox" value="idx_pg" id="f1_3">
<label class="o-form__label o-form__label--checkbox" for="f1_3">
Seiten</label>
</fieldset>
</div>
<div class="cell small-6">
<fieldset class="o-form__field">
<legend class="u-h5">Facette 2</legend>
<input class="o-form__input o-form__input--checkbox o-form__input--hidden" type="checkbox" value="idx_24h" id="f2_1">
<label class="o-form__label o-form__label--checkbox" for="f2_1">
Letzte 24 Stunden</label>
<input class="o-form__input o-form__input--checkbox o-form__input--hidden" type="checkbox" value="idx_7d" id="f2_2">
<label class="o-form__label o-form__label--checkbox" for="f2_2">
Letzte Woche</label>
<input class="o-form__input o-form__input--checkbox o-form__input--hidden" type="checkbox" value="idx_30d" id="f2_3">
<label class="o-form__label o-form__label--checkbox" for="f2_3">
Letzter Monat</label>
<input class="o-form__input o-form__input--checkbox o-form__input--hidden" type="checkbox" value="idx_old" id="f2_4">
<label class="o-form__label o-form__label--checkbox" for="f2_4">
Älter</label>
</fieldset>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="c-main-menu__section c-main-menu__section--meta">
<div class="c-main-menu__subscription-menu">
<div class="c-subscription-menu c-subscription-menu--integrated">
<input type="checkbox" id="subscriptionMenuIntegratedTrigger" class="c-subscription-menu__trigger" />
<label for="subscriptionMenuIntegratedTrigger" class="c-subscription-menu__label">
<span class="o-css-icon o-css-icon--haz"></span>
Abo
</label>
<div class="c-subscription-menu__actor">
<nav class="c-subscription-menu__section">
<ul class="c-subscription-menu__list c-subscription-menu__list--lvl1">
<li class="c-subscription-menu__item c-subscription-menu__item--lvl1">
<span class="c-subscription-menu__section-title">Abo</span>
<ul class="c-subscription-menu__list c-subscription-menu__list--lvl2">
<li class="c-subscription-menu__item c-subscription-menu__item--lvl2">
<a href="#" class="c-subscription-menu__anchor">Abo bestellen</a>
</li>
<li class="c-subscription-menu__item c-subscription-menu__item--lvl2">
<a href="#" class="c-subscription-menu__anchor">Abo mit Tablet bestellen</a>
</li>
<li class="c-subscription-menu__item c-subscription-menu__item--lvl2">
<a href="#" class="c-subscription-menu__anchor">Abo verwalten</a>
</li>
<li class="c-subscription-menu__item c-subscription-menu__item--lvl2">
<a href="#" class="c-subscription-menu__anchor">Reklamationsservice</a>
</li>
<li class="c-subscription-menu__item c-subscription-menu__item--lvl2">
<a href="#" class="c-subscription-menu__anchor">ABOEXTRA</a>
</li>
<li class="c-subscription-menu__item c-subscription-menu__item--lvl2">
<a href="#" class="c-subscription-menu__anchor">Vorteile</a>
</li>
</ul>
</ul>
</nav>
</div>
</div>
</div>
<div class="c-main-menu__login">
<a class="c-login o-link-covert js-customizedUI" href="#" data-href="/assets/json/login.json">
<span class="o-css-icon o-css-icon--user"></span>
Anmelden
</a>
</div>
</div>
<nav class="c-main-menu__section c-main-menu__section-01 c-main-menu__section--offers">
<ul class="c-main-menu__list c-main-menu__list--lvl1">
<li class="c-main-menu__item c-main-menu__item--lvl1">
<input type="checkbox" id="mainMenuAngeboteTrigger" class="c-main-menu__list-trigger" />
<label for="mainMenuAngeboteTrigger" class="c-main-menu__section-title">Angebote</label>
<ul class="c-main-menu__list c-main-menu__list--lvl2">
<li class="c-main-menu__item c-main-menu__item--lvl2">
<a href="#" class="c-main-menu__anchor">ePaper</a>
</li>
<li class="c-main-menu__item c-main-menu__item--lvl2">
<a href="#" class="c-main-menu__anchor">AboExtra</a>
</li>
<li class="c-main-menu__item c-main-menu__item--lvl2">
<a href="#" class="c-main-menu__anchor">HAZ+</a>
</li>
<li class="c-main-menu__item c-main-menu__item--lvl2">
<a href="#" class="c-main-menu__anchor">Kontakt</a>
</li>
</ul>
</ul>
</nav>
<nav class="c-main-menu__section c-main-menu__section-02 c-main-menu__section--departments">
<ul class="c-main-menu__list c-main-menu__list--lvl1">
<li class="c-main-menu__item c-main-menu__item--lvl1">
<input type="checkbox" id="mainMenuHildesheimTrigger" class="c-main-menu__list-trigger" />
<label for="mainMenuHildesheimTrigger" class="c-main-menu__section-title">Hildesheim</label>
<ul class="c-main-menu__list c-main-menu__list--lvl2">
<li class="c-main-menu__item c-main-menu__item--lvl2">
<a href="#" class="c-main-menu__anchor">Aus der Stadt</a>
</li>
<li class="c-main-menu__item c-main-menu__item--lvl2">
<a href="#" class="c-main-menu__anchor">Meinung</a>
</li>
<li class="c-main-menu__item c-main-menu__item--lvl2">
<a href="#" class="c-main-menu__anchor">Fotos</a>
</li>
<li class="c-main-menu__item c-main-menu__item--lvl2">
<a href="#" class="c-main-menu__anchor">Fotowettbewerb</a>
</li>
<li class="c-main-menu__item c-main-menu__item--lvl2">
<a href="#" class="c-main-menu__anchor">Videos</a>
</li>
</ul>
<li class="c-main-menu__item c-main-menu__item--lvl1 c-main-menu__item--columns-2">
<input type="checkbox" id="mainMenuRegionTrigger" class="c-main-menu__list-trigger" />
<label for="mainMenuRegionTrigger" class="c-main-menu__section-title">Region</label>
<ul class="c-main-menu__list c-main-menu__list--lvl2 c-main-menu__list--columns-2">
<li class="c-main-menu__item c-main-menu__item--lvl2">
<a href="#" class="c-main-menu__anchor">Alfeld</a>
</li>
<li class="c-main-menu__item c-main-menu__item--lvl2">
<a href="#" class="c-main-menu__anchor">Algermissen</a>
</li>
<li class="c-main-menu__item c-main-menu__item--lvl2">
<a href="#" class="c-main-menu__anchor">Bad Salzdetfurth</a>
</li>
<li class="c-main-menu__item c-main-menu__item--lvl2">
<a href="#" class="c-main-menu__anchor">Baddeckenstedt</a>
</li>
<li class="c-main-menu__item c-main-menu__item--lvl2">
<a href="#" class="c-main-menu__anchor">Bockenem</a>
</li>
<li class="c-main-menu__item c-main-menu__item--lvl2">
<a href="#" class="c-main-menu__anchor">Diekholzen</a>
</li>
<li class="c-main-menu__item c-main-menu__item--lvl2">
<a href="#" class="c-main-menu__anchor">Duingen</a>
</li>
<li class="c-main-menu__item c-main-menu__item--lvl2">
<a href="#" class="c-main-menu__anchor">Elze</a>
</li>
<li class="c-main-menu__item c-main-menu__item--lvl2">
<a href="#" class="c-main-menu__anchor">Fredene</a>
</li>
<li class="c-main-menu__item c-main-menu__item--lvl2">
<a href="#" class="c-main-menu__anchor">Giesen</a>
</li>
<li class="c-main-menu__item c-main-menu__item--lvl2">
<a href="#" class="c-main-menu__anchor">Gronau</a>
</li>
<li class="c-main-menu__item c-main-menu__item--lvl2">
<a href="#" class="c-main-menu__anchor">Harsum</a>
</li>
<li class="c-main-menu__item c-main-menu__item--lvl2">
<a href="#" class="c-main-menu__anchor">Hildesheim</a>
</li>
<li class="c-main-menu__item c-main-menu__item--lvl2">
<a href="#" class="c-main-menu__anchor">Hohenhameln</a>
</li>
<li class="c-main-menu__item c-main-menu__item--lvl2">
<a href="#" class="c-main-menu__anchor">Holle</a>
</li>
<li class="c-main-menu__item c-main-menu__item--lvl2">
<a href="#" class="c-main-menu__anchor">Lamspringe</a>
</li>
<li class="c-main-menu__item c-main-menu__item--lvl2">
<a href="#" class="c-main-menu__anchor">Nordstemmen</a>
</li>
<li class="c-main-menu__item c-main-menu__item--lvl2">
<a href="#" class="c-main-menu__anchor">Sarstedt</a>
</li>
<li class="c-main-menu__item c-main-menu__item--lvl2">
<a href="#" class="c-main-menu__anchor">Schellerten</a>
</li>
<li class="c-main-menu__item c-main-menu__item--lvl2">
<a href="#" class="c-main-menu__anchor">Sibesse</a>
</li>
<li class="c-main-menu__item c-main-menu__item--lvl2">
<a href="#" class="c-main-menu__anchor">Söhlde</a>
</li>
</ul>
<li class="c-main-menu__item c-main-menu__item--lvl1">
<input type="checkbox" id="mainMenuSportTrigger" class="c-main-menu__list-trigger" />
<label for="mainMenuSportTrigger" class="c-main-menu__section-title">Sport</label>
<ul class="c-main-menu__list c-main-menu__list--lvl2">
<li class="c-main-menu__item c-main-menu__item--lvl2">
<a href="#" class="c-main-menu__anchor">Eintracht Hildesheim</a>
</li>
<li class="c-main-menu__item c-main-menu__item--lvl2">
<a href="#" class="c-main-menu__anchor">Helios Grizzlys</a>
</li>
<li class="c-main-menu__item c-main-menu__item--lvl2">
<a href="#" class="c-main-menu__anchor">Hildesheim Invaders</a>
</li>
<li class="c-main-menu__item c-main-menu__item--lvl2">
<a href="#" class="c-main-menu__anchor">VfV 06</a>
</li>
<li class="c-main-menu__item c-main-menu__item--lvl2">
<a href="#" class="c-main-menu__anchor">Fußball</a>
</li>
</ul>
<li class="c-main-menu__item c-main-menu__item--lvl1">
<input type="checkbox" id="mainMenuUnsere autorenTrigger" class="c-main-menu__list-trigger" />
<label for="mainMenuUnsere autorenTrigger" class="c-main-menu__section-title">Unsere Autoren</label>
<ul class="c-main-menu__list c-main-menu__list--lvl2">
<li class="c-main-menu__item c-main-menu__item--lvl2">
<a href="#" class="c-main-menu__anchor">Übersicht aller Autoren</a>
</li>
<li class="c-main-menu__item c-main-menu__item--lvl2">
<a href="#" class="c-main-menu__anchor">Meinungen</a>
</li>
</ul>
</ul>
</nav>
<nav class="c-main-menu__section c-main-menu__section-03 c-main-menu__section--services">
<ul class="c-main-menu__list c-main-menu__list--lvl1">
<li class="c-main-menu__item c-main-menu__item--lvl1">
<input type="checkbox" id="mainMenuMärkteTrigger" class="c-main-menu__list-trigger" />
<label for="mainMenuMärkteTrigger" class="c-main-menu__section-title">Märkte</label>
<ul class="c-main-menu__list c-main-menu__list--lvl2">
<li class="c-main-menu__item c-main-menu__item--lvl2">
<a href="#" class="c-main-menu__anchor">Ärzte</a>
</li>
<li class="c-main-menu__item c-main-menu__item--lvl2">
<a href="#" class="c-main-menu__anchor">Immobilien</a>
</li>
<li class="c-main-menu__item c-main-menu__item--lvl2">
<a href="#" class="c-main-menu__anchor">Jobs</a>
</li>
<li class="c-main-menu__item c-main-menu__item--lvl2">
<a href="#" class="c-main-menu__anchor">Traueranzeigen</a>
</li>
</ul>
<li class="c-main-menu__item c-main-menu__item--lvl1">
<input type="checkbox" id="mainMenuServicesTrigger" class="c-main-menu__list-trigger" />
<label for="mainMenuServicesTrigger" class="c-main-menu__section-title">Services</label>
<ul class="c-main-menu__list c-main-menu__list--lvl2">
<li class="c-main-menu__item c-main-menu__item--lvl2">
<a href="#" class="c-main-menu__anchor">Alexa-Skill</a>
</li>
<li class="c-main-menu__item c-main-menu__item--lvl2">
<a href="#" class="c-main-menu__anchor">Leserreisen</a>
</li>
<li class="c-main-menu__item c-main-menu__item--lvl2">
<a href="#" class="c-main-menu__anchor">Push-Nachrichten</a>
</li>
<li class="c-main-menu__item c-main-menu__item--lvl2">
<a href="#" class="c-main-menu__anchor">Tägliche Rätsel</a>
</li>
<li class="c-main-menu__item c-main-menu__item--lvl2">
<a href="#" class="c-main-menu__anchor">Veranstaltungen</a>
</li>
<li class="c-main-menu__item c-main-menu__item--lvl2">
<a href="#" class="c-main-menu__anchor">WhatsApp-Newsletter</a>
</li>
<li class="c-main-menu__item c-main-menu__item--lvl2">
<a href="#" class="c-main-menu__anchor">Archiv</a>
</li>
</ul>
<li class="c-main-menu__item c-main-menu__item--lvl1">
<input type="checkbox" id="mainMenuVermarktungTrigger" class="c-main-menu__list-trigger" />
<label for="mainMenuVermarktungTrigger" class="c-main-menu__section-title">Vermarktung</label>
<ul class="c-main-menu__list c-main-menu__list--lvl2">
<li class="c-main-menu__item c-main-menu__item--lvl2">
<a href="#" class="c-main-menu__anchor">Private Kunden</a>
</li>
<li class="c-main-menu__item c-main-menu__item--lvl2">
<a href="#" class="c-main-menu__anchor">Gewerbliche Kunden</a>
</li>
<li class="c-main-menu__item c-main-menu__item--lvl2">
<a href="#" class="c-main-menu__anchor">Digitale Werbung</a>
</li>
<li class="c-main-menu__item c-main-menu__item--lvl2">
<a href="#" class="c-main-menu__anchor">Mediadaten</a>
</li>
</ul>
<li class="c-main-menu__item c-main-menu__item--lvl1">
<input type="checkbox" id="mainMenuVerlagTrigger" class="c-main-menu__list-trigger" />
<label for="mainMenuVerlagTrigger" class="c-main-menu__section-title">Verlag</label>
<ul class="c-main-menu__list c-main-menu__list--lvl2">
<li class="c-main-menu__item c-main-menu__item--lvl2">
<a href="#" class="c-main-menu__anchor">Ausbildung</a>
</li>
<li class="c-main-menu__item c-main-menu__item--lvl2">
<a href="#" class="c-main-menu__anchor">Jobs</a>
</li>
</ul>
<li class="c-main-menu__item c-main-menu__item--lvl1">
<input type="checkbox" id="mainMenuMehrTrigger" class="c-main-menu__list-trigger" />
<label for="mainMenuMehrTrigger" class="c-main-menu__section-title">Mehr</label>
<ul class="c-main-menu__list c-main-menu__list--lvl2">
<li class="c-main-menu__item c-main-menu__item--lvl2">
<a href="#" class="c-main-menu__anchor">Lorem ipsum</a>
</li>
<li class="c-main-menu__item c-main-menu__item--lvl2">
<a href="#" class="c-main-menu__anchor">Rafgenduks</a>
</li>
<li class="c-main-menu__item c-main-menu__item--lvl2">
<a href="#" class="c-main-menu__anchor">Dolor estisit amet</a>
</li>
<li class="c-main-menu__item c-main-menu__item--lvl2">
<a href="#" class="c-main-menu__anchor">Mustertext</a>
</li>
<li class="c-main-menu__item c-main-menu__item--lvl2">
<a href="#" class="c-main-menu__anchor">Und noch Einpunkt</a>
</li>
</ul>
</ul>
</nav>
</div>
</div>
<div class="c-main-menu">
<input type="checkbox" id="mainMenuTrigger" class="c-main-menu__trigger"/>
<label for="mainMenuTrigger" class="c-main-menu__label">
<span class="o-css-icon o-css-icon--menu"></span>
Menü
</label>
<div class="c-main-menu__actor">
<div class="c-main-menu__section c-main-menu__section--search">
{% render '@searchbox' with {modifier: 'integrated'} %}
</div>
<div class="c-main-menu__section c-main-menu__section--meta">
<div class="c-main-menu__subscription-menu">
{% render '@subscription-menu' with {modifier: 'integrated'} %}
</div>
<div class="c-main-menu__login">
{% render "@login" %}
</div>
</div>
<nav class="c-main-menu__section c-main-menu__section-01 c-main-menu__section--offers">
<ul class="c-main-menu__list c-main-menu__list--lvl1">
{% for section, items in sitemap.offers %}
<li class="c-main-menu__item c-main-menu__item--lvl1{% if items.cols >= 2 %} c-main-menu__item--columns-{{ items.cols }}{% endif %}">
<input type="checkbox" id="mainMenu{{ section | capitalize }}Trigger" class="c-main-menu__list-trigger"/>
<label for="mainMenu{{ section | capitalize }}Trigger" class="c-main-menu__section-title">{{ section }}</label>
<ul class="c-main-menu__list c-main-menu__list--lvl2{% if items.cols %} c-main-menu__list--columns-{{ items.cols }}{% endif %}">
{% for node in items.nodes %}
<li class="c-main-menu__item c-main-menu__item--lvl2">
<a href="#" class="c-main-menu__anchor">{{ node }}</a>
</li>
{% endfor %}
</ul>
{% endfor %}
</ul>
</nav>
<nav class="c-main-menu__section c-main-menu__section-02 c-main-menu__section--departments">
<ul class="c-main-menu__list c-main-menu__list--lvl1">
{% for section, items in sitemap.departments %}
<li class="c-main-menu__item c-main-menu__item--lvl1{% if items.cols %} c-main-menu__item--columns-{{ items.cols }}{% endif %}">
<input type="checkbox" id="mainMenu{{ section | capitalize }}Trigger" class="c-main-menu__list-trigger"/>
<label for="mainMenu{{ section | capitalize }}Trigger" class="c-main-menu__section-title">{{ section }}</label>
<ul class="c-main-menu__list c-main-menu__list--lvl2{% if items.cols %} c-main-menu__list--columns-{{ items.cols }}{% endif %}">
{% for node in items.nodes %}
<li class="c-main-menu__item c-main-menu__item--lvl2">
<a href="#" class="c-main-menu__anchor">{{ node }}</a>
</li>
{% endfor %}
</ul>
{% endfor %}
</ul>
</nav>
<nav class="c-main-menu__section c-main-menu__section-03 c-main-menu__section--services">
<ul class="c-main-menu__list c-main-menu__list--lvl1">
{% for section, items in sitemap.services %}
<li class="c-main-menu__item c-main-menu__item--lvl1{% if items.cols %} c-main-menu__item--columns-{{ items.cols }}{% endif %}">
<input type="checkbox" id="mainMenu{{ section | capitalize }}Trigger" class="c-main-menu__list-trigger"/>
<label for="mainMenu{{ section | capitalize }}Trigger" class="c-main-menu__section-title">{{ section }}</label>
<ul class="c-main-menu__list c-main-menu__list--lvl2{% if items.cols %} c-main-menu__list--columns-{{ items.cols }}{% endif %}">
{% for node in items.nodes %}
<li class="c-main-menu__item c-main-menu__item--lvl2">
<a href="#" class="c-main-menu__anchor">{{ node }}</a>
</li>
{% endfor %}
</ul>
{% endfor %}
</ul>
</nav>
</div>
</div>
{
"sitemap": {
"offers": {
"Angebote": {
"nodes": [
"ePaper",
"AboExtra",
"HAZ+",
"Kontakt"
]
}
},
"departments": {
"Hildesheim": {
"nodes": [
"Aus der Stadt",
"Meinung",
"Fotos",
"Fotowettbewerb",
"Videos"
]
},
"Region": {
"cols": "2",
"nodes": [
"Alfeld",
"Algermissen",
"Bad Salzdetfurth",
"Baddeckenstedt",
"Bockenem",
"Diekholzen",
"Duingen",
"Elze",
"Fredene",
"Giesen",
"Gronau",
"Harsum",
"Hildesheim",
"Hohenhameln",
"Holle",
"Lamspringe",
"Nordstemmen",
"Sarstedt",
"Schellerten",
"Sibesse",
"Söhlde"
]
},
"Sport": {
"nodes": [
"Eintracht Hildesheim",
"Helios Grizzlys",
"Hildesheim Invaders",
"VfV 06",
"Fußball"
]
},
"Unsere Autoren": {
"nodes": [
"Übersicht aller Autoren",
"Meinungen"
]
}
},
"services": {
"Märkte": {
"nodes": [
"Ärzte",
"Immobilien",
"Jobs",
"Traueranzeigen"
]
},
"Services": {
"nodes": [
"Alexa-Skill",
"Leserreisen",
"Push-Nachrichten",
"Tägliche Rätsel",
"Veranstaltungen",
"WhatsApp-Newsletter",
"Archiv"
]
},
"Vermarktung": {
"nodes": [
"Private Kunden",
"Gewerbliche Kunden",
"Digitale Werbung",
"Mediadaten"
]
},
"Verlag": {
"nodes": [
"Ausbildung",
"Jobs"
]
},
"Mehr": {
"nodes": [
"Lorem ipsum",
"Rafgenduks",
"Dolor estisit amet",
"Mustertext",
"Und noch Einpunkt"
]
}
}
},
"login": {
"label": "Anmelden",
"url": "/assets/json/login.json"
}
}
.c-main-menu {
&__trigger {
display: none;
}
&__label {
cursor: pointer;
font-size: rem-calc(18);
font-weight: 500;
line-height: 2;
padding-left: 25px;
position: relative;
}
&__actor {
background-color: $color-grey-dark;
display: none;
left: 0;
position: absolute;
top: 100%;
width: 100%;
&::before {
border-bottom: 20px solid $color-grey-dark;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
content: '';
height: 0;
left: 45px;
position: absolute;
top: -20px;
width: 0;
}
}
&__section {
padding: rem-calc(10) 0;
}
&__section--search,
&__section--meta {
display: none;
}
&__section-01,
&__section--offers {
background-color: $color-grey-dark;
color: $color-white;
float: left;
height: 100%;
position: relative;
width: calc(100% / 6);
}
&__section-02,
&__section--departments {
background-color: $color-grey-lightest;
margin-left: calc(100% / 6);
width: calc(100% / 6 * 5);
}
&__section-03,
&__section--services {
background-color: $color-white;
margin-left: calc(100% / 6);
width: calc(100% / 6 * 5);
}
&__list {
list-style: none;
margin: 0;
padding: 0;
}
&__section-title {
color: inherit;
display: block !important;
font-size: 1.4em;
font-weight: 500;
line-height: 1;
//border-bottom: rem-calc(2) solid;
margin: 0 0 rem-calc(20) 0 !important;
padding-bottom: rem-calc(8);
position: relative;
// BEN: border-color gets inherited from color BUT you CAN'T do sth. like "border-bottom: rem-calc(2) solid rgba(currentColor, 0.15)"...
// (Short reasoning for the pseudo-element)
&::before {
border-bottom: rem-calc(2) solid;
bottom: 0;
content: '';
left: 0;
opacity: .15;
position: absolute;
right: 0;
top: 0;
}
}
&__anchor {
border-bottom: 3px solid transparent;
color: inherit;
transition: border ease-in-out 150ms;
&:hover {
border-bottom: 1px solid currentColor;
}
}
&__list--lvl1 {
display: flex;
}
&__item--lvl1 {
box-sizing: border-box;
flex: 1 1 calc(100% / 6);
padding: rem-calc(15);
}
&__list--lvl2 {
line-height: 1.8;
}
&__list-trigger {
display: none;
}
}
// Modifier
.c-main-menu__item--lvl1.c-main-menu__item--columns-2 {
flex-basis: calc(100% / 6 * 2);
}
.c-main-menu__list--columns-2 {
column-count: 2;
vertical-align: top;
}
// Behaviour
.c-main-menu__trigger:checked ~ .c-main-menu__actor {
display: block;
}
.c-main-menu__item--lvl1:hover .c-main-menu__section-title::before {
border-color: $color-yellow;
opacity: 1;
}
// Media
@include breakpoint(medium down) {
.c-main-menu {
&__actor {
background-color: $color-grey-lightest;
top: 100%;
}
&__actor::before {
display: none;
}
&__section--search {
display: block;
}
&__section--meta {
background-color: $color-white;
display: flex;
padding: 0;
> div {
flex: 1 1 50%;
}
}
&__login {
padding: rem-calc(10) 0;
}
&__section-01 {
float: none;
width: 100%;
.c-main-menu__list--lvl2 {
background-color: inherit;
}
}
&__section-02,
&__section-03,
&__section--departments,
&__section--services {
margin-left: 0;
width: 100%;
}
&__section-02,
&__section--departments {
background-color: $color-grey-lighter;
}
&__section-title {
margin-bottom: 0 !important;
padding-bottom: 0;
padding-left: rem-calc(30);
&::before {
border-color: $color-black !important;
border-style: solid;
border-width: .1em .1em 0 0;
bottom: initial;
content: '';
display: inline-block;
height: .4em;
left: .25em;
opacity: 1;
right: initial;
top: .25em;
transform: rotate(135deg);
//position: relative;
vertical-align: top;
width: .4em;
}
}
&__list {
display: none;
}
&__list--lvl1 {
display: block;
}
&__list--columns-2 {
column-count: 1;
}
&__item--lvl1 {
flex: none;
}
&__list--lvl2 {
background-color: rgba(255, 255, 255, .8);
margin: 20px -30px 0;
padding: 20px 60px 20px 30px;
}
&__anchor {
font-size: 1.2em;
font-weight: 500;
margin-left: rem-calc(30);
}
// States (Checkbox handling)
.c-main-menu__list-trigger:checked ~ .c-main-menu__section-title::before {
top: .5em;
transform: rotate(-45deg);
}
.c-main-menu__list-trigger:checked ~ .c-main-menu__list {
display: block;
}
}
}
There are no notes for this item.