<div class="m-menu ">
<a class="m-menu__logo" href="/" title="">
<img class="a-logo" alt="Logo Grüne Schweiz" src="/img/logo-defr--green.svg"> </a>
<nav class="m-menu__nav">
<div class="m-menu__hamburger">
<button class="a-hamburger" aria-label="Navigation anzeigen / verbergen" accesskey="1" type="button" aria-haspopup="true" aria-expanded="false" aria-controls="menu">
<span class="a-hamburger__box">
<span class="a-hamburger__inner"></span>
</span>
</button>
</div>
<ul class="m-menu__nav-list" role="menubar" id="menu" aria-label="Hauptnavigation">
<li class="m-menu__nav-item" role="none">
<a class="m-menu__nav-link m-menu__nav-link--js-hook m-menu__nav-link--active" href="#" role="menuitem" tabindex="0" accesskey="1" aria-haspopup="menu" aria-expanded="false">Aktuelles</a>
<ul class="m-menu__submenu " role="menu" aria-label="">
<li class="m-menu__submenu__section" role="none">
<div class="a-submenu ">
<a class="a-submenu__title" href="">Kampagnen und Events</a>
<ul class="a-submenu__list">
<li class="a-submenu__item">
<a class="a-submenu__link" href="">Petition «Nein zur Lex Beznau»</a>
</li>
<li class="a-submenu__item">
<a class="a-submenu__link" href="">Referendum gegen Versicherungsspione</a>
</li>
<li class="a-submenu__item">
<a class="a-submenu__link" href="">Events</a>
</li>
</ul>
</div>
</li>
<li class="m-menu__submenu__section" role="none">
<div class="a-submenu ">
<a class="a-submenu__title" href="">Abstimmungen</a>
<ul class="a-submenu__list">
<li class="a-submenu__item">
<a class="a-submenu__link" href="">Gegenvorschlag Veloinitiative</a>
</li>
<li class="a-submenu__item">
<a class="a-submenu__link" href="">Ernährungssouveränität</a>
</li>
<li class="a-submenu__item">
<a class="a-submenu__link" href="">Fair-Food</a>
</li>
</ul>
</div>
</li>
<li class="m-menu__submenu__section" role="none">
<div class="a-submenu ">
<a class="a-submenu__title" href="">Medienmitteilungen</a>
<ul class="a-submenu__list">
</ul>
</div>
</li>
<li class="m-menu__submenu__section" role="none">
<div class="a-submenu a-submenu--featured">
<div class="a-submenu--featured__cat-title">
<h2 class="a-cat-title">
<span class="a-cat-title__link a-cat-title__link--no-link">Fair-Food-Initiative</span>
</h2>
</div>
<div class="a-submenu--featured__image">
<figure class="a-image a-image--cover">
<a class="a-image__link" href="#" tabindex="-1">
<img src="/img/wheat_ratio.jpg" alt="Symbolbild Fair-Food" title="This is a linked image" class="a-image__image a-image__image--fp a-image__image--fp-">
</a>
<figcaption>
</figcaption>
</figure>
</div>
<a class="a-submenu--featured__link" href="">
<h3 class="a-submenu--featured__link__title">Fair-Food-Initiative</h3>
</a>
<p class="a-submenu--featured__text">Umweltfreundlich und fair hergestellte Lebensmittel – dies wollen die Grünen mit der Fair-Food-Initiative erreichen.</p>
<button type="button" class="a-button ">Kampagne anzeigen</button>
</div>
</li>
<li class="m-menu__submenu__close-wrapper" role="none">
<button class="m-menu__submenu__close" aria-label="">
<svg role="img">
<title></title>
<use xlink:href="#close"></use>
</svg>
</button>
</li>
</ul>
</li>
<li class="m-menu__nav-item" role="none">
<a class="m-menu__nav-link m-menu__nav-link--js-hook" href="#" role="menuitem" aria-haspopup="menu" aria-expanded="false">Positionen</a>
</li>
<li class="m-menu__nav-item" role="none">
<a class="m-menu__nav-link m-menu__nav-link--js-hook" href="#" role="menuitem" aria-haspopup="menu" aria-expanded="false">Grüne Schweiz</a>
</li>
<li class="m-menu__nav-item" role="none">
<a class="m-menu__nav-link m-menu__nav-link--js-hook" href="#" role="menuitem" aria-haspopup="menu" aria-expanded="false">Publikationen</a>
</li>
<li class="m-menu__nav-item" role="none">
<a class="m-menu__nav-link m-menu__nav-link--js-hook" href="#" role="menuitem" aria-haspopup="menu" aria-expanded="false">Kontakt</a>
</li>
<li class="m-menu__nav-item" role="none">
<div class="a-search a-search--covering">
<form role="search" method="get" id="searchform" class="a-search__form" action="" autocomplete="off">
<div>
<label class="screen-reader-text" for="s">Suche</label>
<input class="a-search__field" type="text" value="" name="s" id="s" placeholder="Suche">
<label class="a-search__submit-label">
<input class="a-search__submit" type="submit" id="searchsubmit" value="Suchen">
<svg class="a-search__icon" aria-hidden="true">
<title>Suchen</title>
<use xlink:href="#glass"></use>
</svg>
</label>
</div>
</form>
</div>
</li>
</ul>
</nav>
<div class="m-menu__right">
<div class="m-menu__cta">
<div class="m-menu__nav-item">
<button type="button" class="a-button a-button--secondary a-button--outline m-menu__nav-link--js-hook">Mitmachen</button>
<ul class="m-menu__submenu m-menu__submenu--cta" role="menu" aria-label="">
<li class="m-menu__submenu__section" role="none">
<div class="a-submenu a-submenu--featured">
<div class="a-submenu--featured__cat-title">
<h2 class="a-cat-title">
<span class="a-cat-title__link a-cat-title__link--no-link">Mitmachen</span>
</h2>
</div>
<div class="a-submenu--featured__image">
<figure class="a-image a-image--cover">
<a class="a-image__link" href="#" tabindex="-1">
<img src="/img/wheat_ratio.jpg" alt="Symbolbild Fair-Food" title="This is a linked image" class="a-image__image a-image__image--fp a-image__image--fp-">
</a>
<figcaption>
</figcaption>
</figure>
</div>
<a class="a-submenu--featured__link" href="">
<h3 class="a-submenu--featured__link__title">Mitglied werden</h3>
</a>
</div>
</li>
<li class="m-menu__submenu__section" role="none">
<div class="a-submenu a-submenu--featured">
<div class="a-submenu--featured__cat-title">
<h2 class="a-cat-title">
<span class="a-cat-title__link a-cat-title__link--no-link">Unterstützen</span>
</h2>
</div>
<div class="a-submenu--featured__image">
<figure class="a-image a-image--cover">
<a class="a-image__link" href="#" tabindex="-1">
<img src="/img/wheat_ratio.jpg" alt="Symbolbild Fair-Food" title="This is a linked image" class="a-image__image a-image__image--fp a-image__image--fp-">
</a>
<figcaption>
</figcaption>
</figure>
</div>
<a class="a-submenu--featured__link" href="">
<h3 class="a-submenu--featured__link__title">Spenden</h3>
</a>
</div>
</li>
<li class="m-menu__submenu__close-wrapper" role="none">
<button class="m-menu__submenu__close" aria-label="">
<svg role="img">
<title></title>
<use xlink:href="#close"></use>
</svg>
</button>
</li>
</ul>
</div>
</div>
<div class="m-menu__language-nav">
<ul class="m-menu__language-nav-list" role="menubar" aria-label="Sprachmenü">
<li class="m-menu__language-nav-item">
<a class="m-menu__language-nav-link m-menu__language-nav-link--active" href="#">de</a>
</li>
<li class="m-menu__language-nav-item">
<a class="m-menu__language-nav-link " href="#">fr</a>
</li>
</ul>
</div>
</div>
</div>
<div class="m-menu {{ modifiers_classes }}">
<a class="m-menu__logo" href="/" title="{{ home }}">
{{> @a-logo logo}}
</a>
<nav class="m-menu__nav">
<div class="m-menu__hamburger">
{{ render '@a-hamburger' }}
</div>
<ul class="m-menu__nav-list" role="menubar" id="menu" aria-label="{{ aria-label-main-navigation }}">
{{#each nav-items}}
<li class="m-menu__nav-item" role="none">
<a class="m-menu__nav-link m-menu__nav-link--js-hook{{#if @first }} m-menu__nav-link--active{{/if}}"
href="#" role="menuitem" {{#if @first }}tabindex="0" accesskey="1"{{/if}}
aria-haspopup="menu" aria-expanded="false">{{ this.title }}</a>
{{#if section-items}}
{{> @m-menu--submenu}}
{{/if}}
</li>
{{/each}}
<li class="m-menu__nav-item" role="none">
{{> @a-search search='Suche' search_submit='Suchen' modifiers=search_modifiers}}
</li>
</ul>
</nav>
<div class="m-menu__right">
<div class="m-menu__cta">
{{#each cta-items}}
<div class="m-menu__nav-item">
{{> @a-button--outlined label=this.title class='a-button--secondary a-button--outline m-menu__nav-link--js-hook'}}
{{#if section-items}}
{{> @m-menu--submenu submenu_class='m-menu__submenu--cta'}}
{{/if}}
</div>
{{/each}}
</div>
<div class="m-menu__language-nav">
<ul class="m-menu__language-nav-list" role="menubar" aria-label="{{ aria-label-language-navigation }}">
{{#each languages}}
<li class="m-menu__language-nav-item">
<a class="m-menu__language-nav-link {{#if @first }}m-menu__language-nav-link--active{{/if}}"
href="#">{{ . }}</a>
</li>
{{/each}}
</ul>
</div>
</div>
</div>
import BaseView from 'base-view';
export const MAIN_MENU_SELECTOR = '.m-menu__nav-list';
export const MAIN_ENTRY_SELECTOR = '.m-menu__nav-link--js-hook';
export const SUBMENU_SELECTOR = '.m-menu__submenu';
export const OPEN_STATE = 'is-open';
export class MMenuBase extends BaseView {
initialize() {
super.initialize();
this.currentSub = null;
}
bind() {
super.bind();
this.on( 'click', MAIN_ENTRY_SELECTOR,
( event ) => this.toggleSubNavigation( event ) );
}
setOrientation( orientation ) {
const main = this.getScopedElement( MAIN_MENU_SELECTOR );
if (main) {
main.setAttribute( 'aria-orientation', orientation );
}
}
toggleSubNavigation( event ) {
if (this.currentSub !== event.target) {
this.closeSubNavigation();
this.openSubNavigation( event );
}
else {
event.preventDefault();
this.closeSubNavigation();
}
}
openSubNavigation( event ) {
let element = event.target;
let submenu = element.parentElement.querySelector( SUBMENU_SELECTOR );
if (null === submenu) {
// if there is no submenu, handle it as regular link
return;
}
event.preventDefault();
this.currentSub = element;
this.addClass( submenu, OPEN_STATE );
this.addClass( element, OPEN_STATE );
element.setAttribute( 'aria-expanded', true );
this.afterOpenSubNavigation( element );
}
closeSubNavigation() {
this.currentSub = null;
this.getScopedElements( MAIN_ENTRY_SELECTOR ).forEach( ( element ) => {
this.removeClass( element, OPEN_STATE );
element.setAttribute( 'aria-expanded', false );
} );
this.getScopedElements( SUBMENU_SELECTOR ).forEach( ( element ) => {
this.removeClass( element, OPEN_STATE );
} );
this.afterCloseSubNavigation();
}
closeNavigation() {
this.closeSubNavigation();
}
/**
* overwrite those functions to do some more stuff on opening
*
* @param {EventTarget} element
*/
afterOpenSubNavigation() {
}
/**
* overwrite those functions to do some more stuff on closing
*/
afterCloseSubNavigation() {
}
}
import { MMenuBase, OPEN_STATE, SUBMENU_SELECTOR } from './m-menu--base';
const CLOSE_SELECTOR = '.m-menu__submenu__close';
const UP = 1;
const DOWN = 2;
export default class MMenuDesktop extends MMenuBase {
initialize() {
super.initialize();
this.ticking = false;
this.setOrientation( 'horizontal' );
}
bind() {
super.bind();
this.on('click', CLOSE_SELECTOR, () => this.closeSubNavigation());
}
afterOpenSubNavigation() {
this.clickedItem = this.currentSub;
this.submenu = this.getScopedElement(SUBMENU_SELECTOR + '.' + OPEN_STATE);
if (this.submenu.offsetHeight !== this.submenu.scrollHeight) {
this.setInitialScrollPos();
this.scrollHandler = (event) => this.requestTick(event);
window.addEventListener('scroll', this.scrollHandler, false);
}
}
afterCloseSubNavigation() {
if (this.submenu) {
window.removeEventListener('scroll', this.scrollHandler);
}
if (this.clickedItem === document.activeElement) {
document.activeElement.blur();
this.clickedItem = null;
}
}
setInitialScrollPos() {
const scrollTop = this.scrollTop();
const submenuHeight = this.submenu.scrollHeight;
const body = document.body;
const html = document.documentElement;
const documentHeight = Math.max(body.scrollHeight, body.offsetHeight,
html.clientHeight, html.scrollHeight, html.offsetHeight);
if (scrollTop + submenuHeight > documentHeight) {
window.scrollTo(0, scrollTop - submenuHeight);
}
this.initialScrollPos = this.lastPos = this.scrollTop();
}
requestTick() {
if (!this.ticking && this.submenu) {
this.ticking = true;
window.requestAnimationFrame(this.scrollSubNavigation.bind(this));
}
}
scrollTop() {
// browser incompatibilities are so awful
return window.scrollY
|| window.pageYOffset
|| document.body.scrollTop + (document.documentElement && document.documentElement.scrollTop || 0);
}
scrollSubNavigation() {
const scrollTop = this.scrollTop();
let direction = DOWN;
if (this.lastPos > scrollTop) {
direction = UP;
}
if (this.lastDirection !== direction) {
if (UP === direction) {
this.initialScrollPos = scrollTop - this.submenu.scrollTop;
} else {
this.initialScrollPos = scrollTop;
}
}
this.submenu.scrollTop = scrollTop - this.initialScrollPos;
this.lastPos = scrollTop;
this.lastDirection = direction;
this.ticking = false;
}
destroy() {
super.destroy();
window.removeEventListener('scroll', this.scrollHandler);
}
}
import { MAIN_MENU_SELECTOR, MMenuBase, OPEN_STATE } from './m-menu--base';
const NAV_WRAPPER_SELECTOR = '.m-menu__nav';
const RIGHT_SELECTOR = '.m-menu__right';
const HAMBURGER_SELECTOR = '.a-hamburger';
const SUBMENU_ITEMS_SELECTOR = '.m-menu__nav-item';
const HIDDEN_STATE = 'is-hidden';
const ACTIVE_STATE = 'is-active';
export default class MMenuMobile extends MMenuBase {
initialize() {
super.initialize();
this.mobileOpen = false;
this.navWrapper = this.getScopedElement( NAV_WRAPPER_SELECTOR );
this.mainNav = this.getScopedElement( MAIN_MENU_SELECTOR );
this.hamburger = this.getScopedElement( HAMBURGER_SELECTOR );
this.right = this.getScopedElement( RIGHT_SELECTOR );
this.menuItems = this.getScopedElements( SUBMENU_ITEMS_SELECTOR );
this.setOrientation( 'vertical' );
}
bind() {
super.bind();
this.on( 'click', HAMBURGER_SELECTOR,
( event ) => this.toggleMainNavigation( event ) );
}
toggleMainNavigation( event ) {
event.preventDefault();
if (this.mobileOpen) {
this.closeMainNavigation();
}
else {
this.openMainNavigation();
}
}
openMainNavigation() {
this.mobileOpen = true;
this.addClass( this.navWrapper, OPEN_STATE );
this.addClass( this.hamburger, OPEN_STATE );
this.addClass( this.mainNav, OPEN_STATE );
this.addClass( this.right, OPEN_STATE );
this.hamburger.setAttribute( 'aria-expanded', true );
}
closeMainNavigation() {
this.mobileOpen = false;
const toClose = [
this.navWrapper,
this.hamburger,
this.mainNav,
this.right,
];
for (const el of toClose) {
if (el) {
this.removeClass( el, OPEN_STATE );
}
}
if (this.hamburger) {
this.hamburger.setAttribute( 'aria-expanded', false );
}
this.closeSubNavigation();
}
afterOpenSubNavigation( element ) {
const isRight = element.closest( RIGHT_SELECTOR );
if (isRight) {
return;
}
this.removeClass( this.right, OPEN_STATE );
const liClicked = element.parentElement;
this.menuItems.forEach( item => {
if (item === liClicked) {
this.addClass( item, ACTIVE_STATE );
}
else {
this.addClass( item, HIDDEN_STATE );
}
} );
}
afterCloseSubNavigation() {
if (this.mobileOpen) {
this.addClass( this.right, OPEN_STATE );
}
this.menuItems.forEach( item => {
this.removeClass( item, HIDDEN_STATE );
this.removeClass( item, ACTIVE_STATE );
} );
}
closeNavigation() {
this.closeMainNavigation();
}
}
import BaseView from 'base-view';
import MMenuDesktop from './m-menu--desktop';
import MMenuMobile from './m-menu--mobile';
import distractionFree from '../../../js/service/distractionFree';
const FORCE_MOBILE_CLASS = 'm-menu--force-mobile';
const HAMBURGER_SELECTOR = '.a-hamburger';
export default class MMenu extends BaseView {
initialize() {
this.forceMobile = this.element.classList.contains( FORCE_MOBILE_CLASS );
this.distractionFree = distractionFree();
this.setMenuHandler();
}
bind() {
super.bind();
this.setMenuHandler = this.setMenuHandler.bind( this );
window.addEventListener( 'resize', this.setMenuHandler );
if (this.distractionFree) {
this.on( 'click', HAMBURGER_SELECTOR, () => this.removeForceMobile() );
}
else {
this.removeForceMobile();
}
}
removeForceMobile() {
if (this.forceMobile) {
this.element.classList.remove( FORCE_MOBILE_CLASS );
this.forceMobile = false;
}
}
setMenuHandler() {
let old = this.handler;
let old_desktop = this.desktop;
this.desktop = this.isDesktop();
if (old_desktop !== this.desktop) {
if (this.desktop) {
this.handler = new MMenuDesktop( this.element );
}
else {
this.handler = new MMenuMobile( this.element );
}
if (undefined !== old) {
old.closeNavigation();
old.destroy();
}
this.handler.initialize();
this.handler.bind();
}
}
destroy() {
super.destroy();
window.removeEventListener( 'resize', this.setMenuHandler );
}
}
// makes php storm happy. normally it would be enough to add it in styles.scss
@use 'sass:math';
.m-menu {
font-size: 0.9375rem; // 15/16
border-bottom: 0.125rem solid $color-grey-1;
background: $color-white;
z-index: $z-index-menu;
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
position: relative;
@include fluid-props(height, $size-medium, $grid-max-width-max, 80px, 100px);
&__logo {
@include clean-link;
@include fluid-props(width, $size-medium, $grid-max-width-max, 100px, 116px);
margin-left: 30px;
position: relative;
z-index: 5;
@include media($_DESKTOP) {
@include fluid-props(margin-left, $size-medium, $grid-max-width-max, 16px, 33px);
}
&:focus {
border-left: solid 1px $color-primary;
@include high-contrast {
border-color: $color-primary-dark;
}
}
.a-logo {
max-width: 100%;
max-height: 100%;
}
}
&__right {
&.is-open {
display: block;
}
@include media($_MOBILE) {
display: none;
background: $color-grey-1;
position: absolute;
top: 80px;
left: 0;
width: 100%;
padding: 22px 38px;
min-height: 80px;
}
@include media($_DESKTOP) {
@include fluid-props(padding-right, $size-medium, $size-huge, 24px, 33px);
}
}
&__cta {
display: inline-block;
}
&__language-nav {
font-size: 0.875rem;
display: inline-block;
@include fluid-props(margin-left, $size-medium, $size-huge, 24px, 55px);
float: right;
margin-top: 11px;
margin-bottom: 11px;
@include media($_DESKTOP) {
float: none;
margin-top: 0;
margin-bottom: 0;
}
}
&__language-nav-list {
@include clean-ul;
}
&__language-nav-item {
@include clean-li;
display: inline-block;
font-weight: $font-weight-bold;
text-transform: uppercase;
&:not(:last-of-type)::after {
content: '|';
font-weight: $font-weight-normal;
padding: 0 0.125em;
}
}
&__language-nav-link {
@include clean-link;
color: $color-text;
transition: color $transition-fast $transition-ease;
&--active {
color: $color-secondary;
}
&:hover {
@extend .m-menu__language-nav-link--active;
}
&:focus {
text-decoration: underline;
}
}
/**
* Main navigation
*/
&__nav {
@include media($_DESKTOP) {
width: calc(100% - 500 * (100vw / 1024));
}
@include media($_MOBILE) {
width: 100%;
padding: 27px 38px 40px;
position: absolute;
top: 0;
right: 0;
&.is-open {
background: $color-white;
min-height: calc(100vh - 160px);
@include fluid-props(top, $size-medium, $grid-max-width-max, 160px, 164px);
.m-menu__hamburger {
@include fluid-props(top, $size-medium, $grid-max-width-max, -133px, -135px);
}
}
&--no-menu-right.is-open {
top: 80px;
.m-menu__hamburger {
top: -53px;
}
}
}
}
&__hamburger {
position: absolute;
top: 27px;
right: 31px;
@include media($_DESKTOP) {
display: none;
}
}
&__nav-list {
@include clean-ul;
width: 100%;
margin: 0 auto;
display: none;
justify-content: space-between;
flex-direction: column;
&.is-open {
display: flex;
}
@include media($_DESKTOP) {
display: flex;
flex-direction: row;
max-width: 800px;
gap: 0.4rem;
}
}
&__nav-item {
@include clean-li;
min-height: 2.5rem;
&.is-active {
position: absolute;
top: -80px;
height: 84px;
padding-left: 41px;
padding-right: 34px;
width: 100%;
left: 0;
background: $color-white;
}
&.is-hidden {
display: none;
}
&:last-of-type {
min-width: 34px;
}
}
&__nav-link {
@include clean-link;
display: inline-block;
font-weight: $font-weight-bold;
white-space: nowrap;
color: $color-text;
position: relative;
padding: 19px 0;
transition: color $transition-fast $transition-ease;
@include media($_DESKTOP) {
margin: 0;
}
&--active,
&:hover {
color: $color-secondary;
}
&:focus {
&:before {
content: '';
width: 0;
height: 0;
border-left: 1px solid $color-secondary;
margin-right: 0.5em;
margin-left: calc(-1px - 0.5em);
}
}
&.is-open {
&:after {
@include fluid-props(bottom, $size-medium, $grid-max-width-max, -14.7px, -24px);
}
@include media($_MOBILE) {
color: $color-secondary;
width: 100%;
margin-top: 15px;
&:after {
content: "";
position: absolute;
right: 0;
top: 19px;
bottom: auto; // because the fluid props can't be nested in media query
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNSIgaGVpZ2h0PSIxNCI+PHBhdGggZmlsbD0ibm9uZSIgc3Ryb2tlPSIjRTEwMDc4IiBzdHJva2Utd2lkdGg9IjIiIGQ9Ik0yNSA3SDFtNi01LjdMMS4zIDcgNyAxMi43Ii8+PC9zdmc+Cg==);
width: 24px;
height: 14px;
}
&:before {
content: "";
position: absolute;
left: 0;
bottom: -18px;
width: 34px;
height: 2px;
z-index: 1;
background-color: $color-secondary;
}
@include hover {
&:before {
margin-left: 0;
width: calc(100vw - 69px);
transition: width $transition-fast $transition-ease;
}
}
}
@include media($_DESKTOP) {
&:after {
content: '';
position: absolute;
left: 0;
width: 100%;
height: 2px;
background-color: $color-primary;
@include high-contrast {
background-color: $color-primary-dark;
}
}
}
}
}
/**
* Submenu
*/
&__submenu {
@include clean-ul;
list-style-image: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7); // fix edge bug
position: absolute;
@include fluid-props(top, $size-medium, $grid-max-width-max, 80px, 100px);
left: 0;
width: 100%;
min-height: calc(100vh - 57px + 20 * (100vh - 1024px) / 416);
height: 100%;
overflow-y: scroll;
display: none;
hyphens: auto;
background-color: $color-grey-1;
flex-direction: column;
@include media($_MOBILE) {
top: 84px;
}
@include media($_DESKTOP) {
background-color: $color-white;
justify-content: center;
align-items: flex-start;
flex-direction: row;
padding: 0 14px 50px 100px;
overflow-y: hidden;
}
&--cta {
background-color: $color-white;
}
&.is-open {
display: flex;
opacity: 1;
animation-name: fadeInOpacity;
animation-iteration-count: 1;
animation-duration: $transition-fast;
@keyframes fadeInOpacity {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@include media($_MOBILE) {
min-height: calc(100vh - 151px + 20 * (100vh - 1024px) / 416);
}
}
&__section {
@include clean-li;
width: calc(100% - 74px);
display: block;
margin-left: 41px;
margin-right: 41px;
margin-top: 2em;
animation: fadeIn $transition-fast $transition-ease both;
&:nth-last-of-type(2) {
// second last because the last one is the close button
margin-bottom: 37px;
}
@for $i from 1 through 4 {
&:nth-of-type(#{$i}) {
animation-delay: math.div($i * $transition-fast, 8);
}
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(-5px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@include media($_DESKTOP) {
max-width: 268px;
@include fluid-props(margin-left margin-right, $size-medium, $grid-max-width-max, 12px, 16px);
margin-top: 72px;
}
}
&__close-wrapper {
@include clean-li;
margin-left: 30px;
margin-top: 12px;
display: none;
@include media($_DESKTOP) {
display: block;
}
}
&__close {
width: 48px;
height: 48px;
svg {
width: 100%;
height: 100%;
stroke: $color-primary;
transition: stroke $transition-fast $transition-ease;
@include high-contrast {
stroke: $color-primary-dark;
}
}
@include hover {
svg {
stroke: $color-secondary;
}
}
}
}
&--force-mobile {
.m-menu {
&__right {
display: none;
}
&__nav-list {
display: none;
}
&__hamburger {
display: block;
}
}
}
}
{
"nav-items": [
{
"title": "Aktuelles",
"section-items": [
{
"title": "Kampagnen und Events",
"items": [
{
"label": "Petition «Nein zur Lex Beznau»"
},
{
"label": "Referendum gegen Versicherungsspione"
},
{
"label": "Events"
}
]
},
{
"title": "Abstimmungen",
"items": [
{
"label": "Gegenvorschlag Veloinitiative"
},
{
"label": "Ernährungssouveränität"
},
{
"label": "Fair-Food"
}
]
},
{
"title": "Medienmitteilungen"
},
{
"title": "Fair-Food-Initiative",
"featured": true,
"link-image": {
"link-url": "#",
"image-src": "/img/wheat_ratio.jpg",
"alt": "Symbolbild Fair-Food",
"title": "This is a linked image"
},
"cat-title": {
"label": "Fair-Food-Initiative"
},
"text": "Umweltfreundlich und fair hergestellte Lebensmittel – dies wollen die Grünen mit der Fair-Food-Initiative erreichen.",
"button": {
"label": "Kampagne anzeigen"
},
"modifiers": [
"featured"
]
}
]
},
{
"title": "Positionen"
},
{
"title": "Grüne Schweiz"
},
{
"title": "Publikationen"
},
{
"title": "Kontakt"
}
],
"cta-items": [
{
"title": "Mitmachen",
"section-items": [
{
"title": "Mitglied werden",
"featured": true,
"link-image": {
"link-url": "#",
"image-src": "/img/wheat_ratio.jpg",
"alt": "Symbolbild Fair-Food",
"title": "This is a linked image"
},
"cat-title": {
"label": "Mitmachen"
},
"modifiers": [
"featured"
]
},
{
"title": "Spenden",
"featured": true,
"link-image": {
"link-url": "#",
"image-src": "/img/wheat_ratio.jpg",
"alt": "Symbolbild Fair-Food",
"title": "This is a linked image"
},
"cat-title": {
"label": "Unterstützen"
},
"modifiers": [
"featured"
]
}
]
}
],
"aria-label-main-navigation": "Hauptnavigation",
"aria-label-language-navigation": "Sprachmenü",
"aria-label-sub-navigation": "Untermenü",
"aria-label-close-sub-navigation": "Untermenü schliessen",
"search_modifiers": [
"covering"
],
"languages": [
"de",
"fr"
],
"logo": {
"de": true,
"title": "Logo Grüne Schweiz"
}
}
No notes defined.