<nav class="c-menu o-bg-dark u-shadow-bottom u-size-full u-pt-base@md is-open u-top " data-menu>
<div class="c-menu__brand u-py-base u-px-small">
<svg class="c-brand
c-brand--resize-medium
" viewBox="0 0 233 50" xmlns="http://www.w3.org/2000/svg">
<path d="M0 50V0h105.4v50H0Z" fill="#fff" />
<path d="M58.5 27.3h-3.9v9.3h4.1c2.8 0 4.1-1.7 4.1-4.6 0-3-1.7-4.7-4.3-4.7ZM85.5 13.2c-4 0-6 3-6 11.7 0 8.8 2 12 6 12s6.1-3 6.1-12c0-8.9-2-11.7-6-11.7ZM61.7 17.3c0-2.5-1.3-4-3.7-4h-3.4v8h3.5c2 0 3.6-1.4 3.6-4Z" fill="#E31D57" />
<path d="M0 0v50h105.4V0H0Zm19.8 36.8c3.2 0 4.5-2.1 5.4-5.3l6.7 1.9c-1.6 6.2-4.7 10.4-12.2 10.4-8.2 0-13.5-5.2-13.5-19S11.3 6.2 19.7 6.2c6.5 0 11 3 12.3 11.1l-6.7 1.8c-.5-2.5-1.5-6-5.4-6-4.3 0-6 3.6-6 11.5 0 9.1 2 12.2 5.9 12.2ZM42.7 43h-7.4V7h7.4V43ZM59 43H47.4V7h11.2c6.3 0 10 3.5 10 9.5 0 4.4-2.7 7-5 7.4v.2c3 .7 6.5 3 6.5 8.9 0 6.5-3.3 10.1-11 10.1Zm26.5.8c-8.5 0-13.6-5.4-13.6-19 0-13.4 5.1-18.6 13.6-18.6 8.6 0 13.7 5 13.7 18.7 0 13.6-5.1 18.9-13.7 18.9Z" fill="#E31D57" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M144.7 6.3c8.3 0 13.3 5 13.3 18.8s-5 18.7-13.3 18.7-13.1-5-13.1-18.8c0-14 4.9-18.7 13.1-18.7Zm70.8.6 3.4 10 1.3 4.3h.2l1.4-4.3 3.4-10h7.7l-9 23.3v13h-7.6v-13L207.1 7h8.4Zm-82.1 0v2.5a12.9 12.9 0 0 0-2.9 4.7h-4.4v29h-7.5v-29h-7.3V7h22.1Zm38.8 0c9.2 0 13.3 6.9 13.3 18.3s-3.8 18-13 18H161V6.8h11.2Zm31.3 0 7.6 36.2h-7.9l-1-6.3H194l-1 6.3h-7.7L193 7h10.6Zm-58.7 6.6c-3.8 0-5.6 2.7-5.6 11.4 0 8.8 1.8 11.7 5.6 11.7 3.7 0 5.5-2.6 5.5-11.5 0-8.8-1.9-11.6-5.5-11.6Zm26.7.6h-3V36h3c4.1 0 6.4-2.7 6.4-10.5 0-8.7-2.3-11.3-6.4-11.3Zm26.7 0h-.3l-1 6.6-1.7 9.1h5.7l-1.6-9-1.1-6.7Z" class="c-brand__network" />
</svg>
</div>
<div class="c-menu__search o-container u-justify-between u-column u-row@md u-my-base">
<div class="u-relative">
<input class="u-size-full " type="text" placeholder="Cerca nel sito">
<button class="c-form-action c-btn c-btn--reset u-absolute u-cursor-pointer" type="submit">
<svg class="c-form-icon o-icon o-icon--md">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-search"></use>
</svg>
</button>
</div>
</div>
<div class="o-container u-flex u-justify-between u-column u-row@md u-mb-base">
<div tabindex="1" class="c-menu__group u-relative u-z-cover u-size-1-5@md is-active " data-group data-channel="">
<input type="checkbox" id="Notizie" name="navigation" value="Notizie" class="u-absolute u-size-full u-right u-top u-z-cover u-opacity-none u-none@md">
<div class="c-menu__title u-flex u-justify-between u-justify-center">
<a class="u-z-cover c-menu__link u-a-underline u-relative u-no-underline" href="#">Notizie</a>
<div data-title>
<label for="Notizie">
<svg class="c-menu__icon o-icon o-icon--inverse o-icon--md u-none@md u-cursor-pointer u-block" data-arrow>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-chevron-down"></use>
</svg>
</label>
</div>
</div>
<ul class="c-menu__list u-list-none u-justify-between u-wrap">
<li class='c-menu__item u-size-1-2 u-size-full@md u-pt-xsmall u-pb-xsmall'>
<a class='c-menu__link u-a-underline u-relative u-no-underline u-nav-03' href="">Politica</a>
</li>
<li class='c-menu__item u-size-1-2 u-size-full@md u-pt-xsmall u-pb-xsmall'>
<a class='c-menu__link u-a-underline u-relative u-no-underline u-nav-03' href="">Economia</a>
</li>
<li class='c-menu__item u-size-1-2 u-size-full@md u-pt-xsmall u-pb-xsmall'>
<a class='c-menu__link u-a-underline u-relative u-no-underline u-nav-03' href="">Europa</a>
</li>
<li class='c-menu__item u-size-1-2 u-size-full@md u-pt-xsmall u-pb-xsmall'>
<a class='c-menu__link u-a-underline u-relative u-no-underline u-nav-03' href="">Cronaca</a>
</li>
<li class='c-menu__item u-size-1-2 u-size-full@md u-pt-xsmall u-pb-xsmall'>
<a class='c-menu__link u-a-underline u-relative u-no-underline u-nav-03' href="">Mondo</a>
</li>
<li class='c-menu__item u-size-1-2 u-size-full@md u-pt-xsmall u-pb-xsmall'>
<a class='c-menu__link u-a-underline u-relative u-no-underline u-nav-03' href="">Ambiente</a>
</li>
<li class='c-menu__item u-size-1-2 u-size-full@md u-pt-xsmall u-pb-xsmall'>
<a class='c-menu__link u-a-underline u-relative u-no-underline u-nav-03' href="">Green</a>
</li>
<li class='c-menu__item u-size-1-2 u-size-full@md u-pt-xsmall u-pb-xsmall'>
<a class='c-menu__link u-a-underline u-relative u-no-underline u-nav-03' href="">Attualità</a>
</li>
<li class='c-menu__item u-size-1-2 u-size-full@md u-pt-xsmall u-pb-xsmall'>
<a class='c-menu__link u-a-underline u-relative u-no-underline u-nav-03' href="">Città</a>
</li>
</ul>
</div>
<div tabindex="1" class="c-menu__group u-relative u-z-cover u-size-1-5@md " data-group data-channel="">
<input type="checkbox" id="Eventi" name="navigation" value="Eventi" class="u-absolute u-size-full u-right u-top u-z-cover u-opacity-none u-none@md">
<div class="c-menu__title u-flex u-justify-between u-justify-center">
<a class="u-z-cover c-menu__link u-a-underline u-relative u-no-underline" href="#">Eventi</a>
<div data-title>
<label for="Eventi">
<svg class="c-menu__icon o-icon o-icon--inverse o-icon--md u-none@md u-cursor-pointer u-block" data-arrow>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-chevron-down"></use>
</svg>
</label>
</div>
</div>
<ul class="c-menu__list u-list-none u-justify-between u-wrap">
<li class='c-menu__item u-size-1-2 u-size-full@md u-pt-xsmall u-pb-xsmall'>
<a class='c-menu__link u-a-underline u-relative u-no-underline u-nav-03' href="">Cinema</a>
</li>
<li class='c-menu__item u-size-1-2 u-size-full@md u-pt-xsmall u-pb-xsmall'>
<a class='c-menu__link u-a-underline u-relative u-no-underline u-nav-03' href="">Ristoranti</a>
</li>
<li class='c-menu__item u-size-1-2 u-size-full@md u-pt-xsmall u-pb-xsmall'>
<a class='c-menu__link u-a-underline u-relative u-no-underline u-nav-03' href="">Shopping</a>
</li>
</ul>
</div>
<div tabindex="1" class="c-menu__group u-relative u-z-cover u-size-1-5@md " data-group data-channel="">
<input type="checkbox" id="Cibo" name="navigation" value="Cibo" class="u-absolute u-size-full u-right u-top u-z-cover u-opacity-none u-none@md">
<div class="c-menu__title u-flex u-justify-between u-justify-center">
<a class="u-z-cover c-menu__link u-a-underline u-relative u-no-underline" href="#">Cibo</a>
<div data-title>
<label for="Cibo">
<svg class="c-menu__icon o-icon o-icon--inverse o-icon--md u-none@md u-cursor-pointer u-block" data-arrow>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-chevron-down"></use>
</svg>
</label>
</div>
</div>
<ul class="c-menu__list u-list-none u-justify-between u-wrap">
<li class='c-menu__item u-size-1-2 u-size-full@md u-pt-xsmall u-pb-xsmall'>
<a class='c-menu__link u-a-underline u-relative u-no-underline u-nav-03' href="">Dove mangiare</a>
</li>
<li class='c-menu__item u-size-1-2 u-size-full@md u-pt-xsmall u-pb-xsmall'>
<a class='c-menu__link u-a-underline u-relative u-no-underline u-nav-03' href="">Mappe</a>
</li>
<li class='c-menu__item u-size-1-2 u-size-full@md u-pt-xsmall u-pb-xsmall'>
<a class='c-menu__link u-a-underline u-relative u-no-underline u-nav-03' href="">Storie</a>
</li>
</ul>
</div>
<div tabindex="1" class="c-menu__group u-relative u-z-cover u-size-1-5@md " data-group data-channel="">
<input type="checkbox" id="Zone" name="navigation" value="Zone" class="u-absolute u-size-full u-right u-top u-z-cover u-opacity-none u-none@md">
<div class="c-menu__title u-flex u-justify-between u-justify-center">
<a class="u-z-cover c-menu__link u-a-underline u-relative u-no-underline" href="#">Zone</a>
<div data-title>
<label for="Zone">
<svg class="c-menu__icon o-icon o-icon--inverse o-icon--md u-none@md u-cursor-pointer u-block" data-arrow>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-chevron-down"></use>
</svg>
</label>
</div>
</div>
<ul class="c-menu__list u-list-none u-justify-between u-wrap">
<li class='c-menu__item u-size-1-2 u-size-full@md u-pt-xsmall u-pb-xsmall'>
<a class='c-menu__link u-a-underline u-relative u-no-underline u-nav-03' href="">Roma</a>
</li>
<li class='c-menu__item u-size-1-2 u-size-full@md u-pt-xsmall u-pb-xsmall'>
<a class='c-menu__link u-a-underline u-relative u-no-underline u-nav-03' href="">Esquilino</a>
</li>
<li class='c-menu__item u-size-1-2 u-size-full@md u-pt-xsmall u-pb-xsmall'>
<a class='c-menu__link u-a-underline u-relative u-no-underline u-nav-03' href="">Centro storico</a>
</li>
<li class='c-menu__item u-size-1-2 u-size-full@md u-pt-xsmall u-pb-xsmall'>
<a class='c-menu__link u-a-underline u-relative u-no-underline u-nav-03' href="">Frascati</a>
</li>
</ul>
</div>
<div tabindex="1" class="c-menu__group u-relative u-z-cover u-size-1-5@md " data-group data-channel="">
<input type="checkbox" id="Altre sezioni" name="navigation" value="Altre sezioni" class="u-absolute u-size-full u-right u-top u-z-cover u-opacity-none u-none@md">
<div class="c-menu__title u-flex u-justify-between u-justify-center">
<a class="u-z-cover c-menu__link u-a-underline u-relative u-no-underline" href="#">Altre sezioni</a>
<div data-title>
<label for="Altre sezioni">
<svg class="c-menu__icon o-icon o-icon--inverse o-icon--md u-none@md u-cursor-pointer u-block" data-arrow>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-chevron-down"></use>
</svg>
</label>
</div>
</div>
<ul class="c-menu__list u-list-none u-justify-between u-wrap">
<li class='c-menu__item u-size-1-2 u-size-full@md u-pt-xsmall u-pb-xsmall'>
<a class='c-menu__link u-a-underline u-relative u-no-underline u-nav-03' href="">Foto</a>
</li>
<li class='c-menu__item u-size-1-2 u-size-full@md u-pt-xsmall u-pb-xsmall'>
<a class='c-menu__link u-a-underline u-relative u-no-underline u-nav-03' href="">Video</a>
</li>
<li class='c-menu__item u-size-1-2 u-size-full@md u-pt-xsmall u-pb-xsmall'>
<a class='c-menu__link u-a-underline u-relative u-no-underline u-nav-03' href="">Segnalazioni</a>
</li>
<li class='c-menu__item u-size-1-2 u-size-full@md u-pt-xsmall u-pb-xsmall'>
<a class='c-menu__link u-a-underline u-relative u-no-underline u-nav-03' href="">Opinioni</a>
</li>
</ul>
</div>
<div class="u-text-center u-my-base u-none@md">
<a href="/user/login/" class="c-btn c-btn--primary c-btn--rounded u-no-underline u-size-full u-flex u-gap-small u-items-center u-justify-center">
<svg class="o-icon o-icon--sm">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-user"></use>
</svg>
Accedi
</a>
</div>
<div class="u-text-center u-my-base u-none@md">
<a href="/user/login/" class="c-btn c-btn--inverse c-btn--rounded u-no-underline u-size-full u-flex u-gap-small u-items-center u-justify-center">
<svg class="o-icon o-icon--sm">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-unlock"></use>
</svg>
Abbonati
</a>
</div>
</div>
<div class="u-size-full u-mt-base u-mb-base u-none@md">
<div class="u-none@md u-flex u-column u-items-center o-container">
<div class="c-modetoggle u-inline-flex">
<label class="u-pointer c-modetoggle__label u-relative" aria-label="Modalità light">
<input type="radio" value="-1" class="u-none" data-color-scheme="-1">
<svg class="c-modetoggle__icon u-m-xsmall o-icon o-icon--animated o-icon--sm u-cursor-pointer">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-sun"></use>
</svg>
</label>
<label class="u-pointer c-modetoggle__label u-relative" aria-label="Modalità di sistema">
<input type="radio" value="0" class="u-none" data-color-scheme="0">
<svg class="c-modetoggle__icon u-m-xsmall o-icon o-icon--animated o-icon--sm u-cursor-pointer">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-monitor"></use>
</svg>
</label>
<label class="u-pointer c-modetoggle__label u-relative" aria-label="Modalità dark">
<input type="radio" value="1" class="u-none" data-color-scheme="1">
<svg class="c-modetoggle__icon u-m-xsmall o-icon o-icon--animated o-icon--sm u-cursor-pointer">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-moon"></use>
</svg>
</label>
</div>
<a class="u-mt-base" href="#" target="_blank" rel="noopener noreferrer">
<svg class="c-brand-cn" width="91" height="24">
<use xlink:href="#brand-citynews"></use>
</svg>
</a>
</div>
</div>
</nav>
<nav class="c-menu o-bg-dark u-shadow-bottom u-size-full u-pt-base@md {% if open %} is-open u-top {% endif %}" data-menu>
<div class="c-menu__brand u-py-base u-px-small">
{% render "@brand" %}
</div>
<div class="c-menu__search o-container u-justify-between u-column u-row@md u-my-base">
{% render "@action--default", {helper: false, label: false, inverse: true, placeholder: 'Cerca nel sito', action: 'search'}, true %}
</div>
<div class="o-container u-flex u-justify-between u-column u-row@md u-mb-base">
{% for nav in navigation %}
<div tabindex="1" class="c-menu__group u-relative u-z-cover u-size-1-5@md {% if nav.active %} is-active {% endif %}" data-group data-channel="{{nav.channel}}">
<input type="checkbox" id="{{nav.name}}" name="navigation" value="{{nav.name}}" class="u-absolute u-size-full u-right u-top u-z-cover u-opacity-none u-none@md">
<div class="c-menu__title u-flex u-justify-between u-justify-center">
<a class="u-z-cover c-menu__link u-a-underline u-relative u-no-underline" href="#">{{nav.name}}</a>
<div data-title>
<label for="{{nav.name}}">
<svg class="c-menu__icon o-icon o-icon--inverse o-icon--md u-none@md u-cursor-pointer u-block" data-arrow>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-chevron-down"></use>
</svg>
</label>
</div>
</div>
<ul class="c-menu__list u-list-none u-justify-between u-wrap">
{% for item in nav.list %}
<li class='c-menu__item u-size-1-2 u-size-full@md u-pt-xsmall u-pb-xsmall'>
<a class='c-menu__link u-a-underline u-relative u-no-underline u-nav-03' href="">{{item.name}}</a>
</li>
{% endfor %}
</ul>
</div>
{% endfor %}
<div class="u-text-center u-my-base u-none@md">
<a href="/user/login/" class="c-btn c-btn--primary c-btn--rounded u-no-underline u-size-full u-flex u-gap-small u-items-center u-justify-center">
<svg class="o-icon o-icon--sm">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-user"></use>
</svg>
Accedi
</a>
</div>
<div class="u-text-center u-my-base u-none@md">
<a href="/user/login/" class="c-btn c-btn--inverse c-btn--rounded u-no-underline u-size-full u-flex u-gap-small u-items-center u-justify-center">
<svg class="o-icon o-icon--sm">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-unlock"></use>
</svg>
Abbonati
</a>
</div>
</div>
<div class="u-size-full u-mt-base u-mb-base u-none@md">
<div class="u-none@md u-flex u-column u-items-center o-container">
{% render "@modetoggle" %}
<a class="u-mt-base" href="#" target="_blank" rel="noopener noreferrer">
<svg class="c-brand-cn" width="91" height="24">
<use xlink:href="#brand-citynews"></use>
</svg>
</a>
</div>
</div>
</nav>
{
"open": true,
"navigation": [
{
"nav": null,
"name": "Notizie",
"active": true,
"list": [
{
"item": null,
"name": "Politica"
},
{
"item": null,
"name": "Economia"
},
{
"item": null,
"name": "Europa"
},
{
"item": null,
"name": "Cronaca"
},
{
"item": null,
"name": "Mondo"
},
{
"item": null,
"name": "Ambiente"
},
{
"item": null,
"name": "Green"
},
{
"item": null,
"name": "Attualità"
},
{
"item": null,
"name": "Città"
}
]
},
{
"nav": null,
"name": "Eventi",
"active": false,
"list": [
{
"item": null,
"name": "Cinema"
},
{
"item": null,
"name": "Ristoranti"
},
{
"item": null,
"name": "Shopping"
}
]
},
{
"nav": null,
"name": "Cibo",
"active": false,
"list": [
{
"item": null,
"name": "Dove mangiare"
},
{
"item": null,
"name": "Mappe"
},
{
"item": null,
"name": "Storie"
}
]
},
{
"nav": null,
"name": "Zone",
"active": false,
"list": [
{
"item": null,
"name": "Roma"
},
{
"item": null,
"name": "Esquilino"
},
{
"item": null,
"name": "Centro storico"
},
{
"item": null,
"name": "Frascati"
}
]
},
{
"nav": null,
"name": "Altre sezioni",
"list": [
{
"item": null,
"name": "Foto"
},
{
"item": null,
"name": "Video"
},
{
"item": null,
"name": "Segnalazioni"
},
{
"item": null,
"name": "Opinioni"
}
]
}
]
}
// Name: Menu
// Description: Menu of website
//
// Component: `c-menu`
//
// Dependencies: `settings/v7/colors.tokens`
// `settings/v7/spacing.tokens`
//
// ========================================================================
@use '../../../assets/sass/objects/v7/links' as *;
@use '../../../assets/sass/objects/v7/icons' as *;
@use '../../../assets/sass/tools/v7/utils'as *;
@use '../../../assets/sass/tools/v7/colors'as *;
@use '../../../assets/sass/tools/v7/mq'as *;
@use '../../../assets/sass/tools/v7/spacing'as *;
@use '../../../assets/sass/tools/v7/typography'as *;
@use '../../../assets/sass/tools/v7/zindex'as *;
@use '../../../assets/sass/settings/v7/layout-standard' as *;
@use '../../../assets/sass/settings/v7/atomictypography.map' as *;
@use '../../../assets/sass/settings/v7/colors.tokens' as *;
@use '../../../assets/sass/settings/v7/colors.map' as *;
@use '../../../assets/sass/settings/v7/sizes.map' as *;
@use '../../../assets/sass/settings/v7/spacing.tokens' as *;
@use '../../../assets/sass/settings/v7/typography.tokens' as *;
@use '../../../assets/sass/settings/v7/visibility.map' as *;
@use '../../../assets/sass/settings/v7/global' as *;
@use '../../../assets/sass/settings/v7/properties' as *;
@use '../../../assets/sass/settings/v7/scrollbar' as *;
// Variables
// ========================================================================
$menu-background: var(--theme-color);
$menu-panel-height: 87vh;
$menu-logo-size: 20px;
$menu-navbar-line: $global-active-line;
$menu-divider-color: rgba($ui-01, .3);
// ========================================================================
.c-menu {
// Custom properties
// ========================================================================
--nav-border: var(--theme-color);
--menu-divider-color: #{rgba($ui-01, .3)};
--menu-background: #{$ui-02};
display: none;
right: 100%;
background-color: var(--menu-background);
// ========================================================================
@if $layout==wide {
position: fixed;
}
@else {
position: absolute;
}
@include z(underneath);
@if $responsive-breakpoints {
@include bp(md) {
--menu-background: #{$ui-05};
--menu-divider-color: #{rgba($ui-07, .3)};
right: 0;
min-height: auto;
}
}
@if $responsive-breakpoints {
body[data-model*="video"]:not([data-theme="today"]) &,
body[data-channel*="/foto/"]:not([data-theme="today"]) &,
body[data-channel*="/video/"]:not([data-theme="today"]) &,
body[data-color-scheme*="dark"]:not([data-theme="today"]) &{
@include bp(md) {
--menu-background: #{$ui-07};
--menu-divider-color: #{rgba($ui-01, .3)};
}
}
}
&.is-open {
--menu-bottom: 0;
display: block;
position: var(--menu-position);
top: var(--menu-top);
right: 0;
bottom: var(--menu-bottom);
padding-top: var(--menu-padding-top);
overflow-y: scroll;
@if $layout==amp {
--menu-top: 56px;
z-index: 2147483647;
max-width: 100%;
padding: 0 $padding-small;
}
@else if $layout==wide {
--menu-background: #{$ui-02} !important;
--menu-position: fixed;
--menu-padding-top: 64px;
--menu-top: 64px;
@include z(cover);
}
@else {
--menu-top: 0;
--menu-position: absolute;
animation: slidein .3s ease-in-out;
@include z(upside);
@media (max-width:739px) {
[data-fullpage][data-homepage] & {
--menu-position: fixed;
}
}
@if $responsive-breakpoints {
@include bp(xs) {
body:not([data-homepage]) & {
--menu-padding-top: 64px;
}
}
@include bp(md) {
--menu-bottom: auto;
--menu-padding-top: #{$padding-xlarge};
--menu-position: absolute;
animation: none;
overflow: hidden;
@if $layout!=wide {
--menu-top: 182px;
}
[data-branded] &,
[data-model*="sponsor"] & {
--menu-top: 64px;
}
[data-model*="sponsor"][data-channel*="speciale"] & {
--menu-top: 56px;
}
}
}
[data-channel*="/speciale"] & {
@include bp(md) {
--menu-top: 56px;
}
}
body:not([data-homepage]) & {
--menu-padding-top: 56px;
}
}
}
&__brand {
display: none;
body[data-homepage] & {
display: block;
@if $responsive-breakpoints {
@include bp(md) {
display: none;
}
}
}
}
//
// Menu Group - contains a Title and a List
//
&__group {
--menu-group-my: calc(var(--outer-gutter) * -1);
outline: none;
margin: 0 var(--menu-group-my);
@if $responsive-breakpoints {
@include bp(md) {
--menu-group-my: 0;
&:not(:first-child) {
padding-left: $padding-base;
border-left: 1px solid var(--menu-divider-color);
}
}
@include bp(md, max-width) {
&:first-child {
border-top: 1px solid var(--menu-divider-color);
}
}
}
}
//
// Menu List - navigation menu
//
&__list {
display: none;
margin: 0;
padding: 0 0 0 $padding-base;
border-bottom: 1px solid var(--menu-divider-color);
@if $responsive-breakpoints {
@include bp(md) {
display: flex;
flex-direction: column;
padding: 0;
border-bottom: 0;
}
}
.c-menu__group > input[type="checkbox"]:checked ~ & {
display: flex;
}
}
//
// Menu Title - title of menu list
//
&__title {
padding: $padding-small;
border-bottom: 1px solid var(--menu-divider-color);
@include type(nav-01);
@if $responsive-breakpoints {
@include bp(md){
margin-bottom: $margin-base;
padding: 0;
border-bottom: 0;
@include type(nav-05);
}
}
.c-menu__group:focus &,
.c-menu__group:hover & {
box-shadow: inset #{$menu-navbar-line} 0 var(--nav-border);
@if $responsive-breakpoints {
@include bp(md) {
box-shadow: none;
}
}
}
}
&__logo {
width: auto;
height: $menu-logo-size;
}
&__icon {
.c-menu__group > input[type="checkbox"]:checked ~ .c-menu__title & {
transform: rotate(180deg);
}
}
&__link{
--menu-link: #{$link-01};
color: var(--menu-link);
@if $responsive-breakpoints {
@include bp(md) {
--menu-link: #{$link-02};
}
}
[data-model*="video"] &,
[data-channel*="/foto/"] &,
[data-channel*="/video/"] &,
[data-color-scheme*="dark"] &{
@if $responsive-breakpoints {
@include bp(md) {
--menu-link: #{$link-01};
}
}
}
}
&__search {
display: flex;
@if $responsive-breakpoints {
@include bp(md) {
display: none;
}
}
}
}
// Set different top value for menu opened by menu toggle in header slim
body:not([data-homepage]),
body[data-branded] {
.c-header--slim ~ .c-menu {
--menu-top: 56px;
--menu-padding-top: 0;
@include bp(xs) {
--menu-top: 64px;
}
@if $layout==standard {
@include bp(md) {
--menu-top: 114px;
--menu-padding-top: #{$padding-medium};
}
}
}
}
// Set different top value for menu opened by menu toggle in header motion
@if $layout==wide {
.c-header--wide-transparent ~ .c-menu.is-open {
--menu-top: 0;
@include bp(md) {
--menu-top: 64px;
}
}
}
@if $responsive-breakpoints {
.alert.alert-network ~ .c-menu.is-open {
@include bp(md) {
--menu-top: 250px;
}
}
}
This component shows the menu of website
Possible variations:
In order to display a menu component use following syntax:
{% render "@menu--default" %} {% render "@menu--local" %}