Menu: Submenu

Ready

HTML
View
Assets
Context
Info
Notes


        
        <ul class="m-menu__submenu " role="menu" aria-label="">
    <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>


        <ul class="m-menu__submenu {{ submenu_class }}" role="menu" aria-label="{{ ../aria-label-sub-navigation }}">
	{{#each section-items}}
		<li class="m-menu__submenu__section" role="none">
			{{> @a-submenu this}}
		</li>
	{{/each}}
	<li class="m-menu__submenu__close-wrapper" role="none">
		<button class="m-menu__submenu__close"
						aria-label="{{ ../aria-label-close-sub-navigation }}">
			<svg role="img">
				<title>{{close}}</title>
				<use xlink:href="#close"></use>
			</svg>
		</button>
	</li>
</ul>

File:

Content:


                                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 );
	}
}

URL: /components/raw/m-menu/m-menu.js
Filesystem Path: styleguide/src/components/molecules/m-menu/m-menu.js
Size: 1.5 KB

Content:


                                // 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;
			}
		}
	}
}

URL: /components/raw/m-menu/m-menu.scss
Filesystem Path: styleguide/src/components/molecules/m-menu/m-menu.scss
Size: 8.1 KB


        
            
            {
  "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"
  }
}

Handle: @m-menu--submenu
Variants (2): Default , Force Mobile
Preview:
- With layout
- Component only
Filesystem Path: styleguide/src/components/molecules/m-menu/m-menu--submenu.hbs
References (1): @a-submenu
Referenced by (2): @m-menu, @m-menu--force-mobile

No notes defined.