Styleguide

Submenu: Default 

<div class="a-submenu ">
    <a class="a-submenu__title" href="#">Submenu</a>
    <ul class="a-submenu__list">
        <li class="a-submenu__item">
            <a class="a-submenu__link" href="#">Fair-Food</a>
        </li>
        <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>
 
<div class="a-submenu {{ modifiers_classes }}">
	{{#if featured}}
		<div class="a-submenu--featured__cat-title">
			{{> @a-cat-title cat-title}}
		</div>
		<div class="a-submenu--featured__image">
			{{> @a-image link-image }}
		</div>
		<a class="a-submenu--featured__link" href="{{ this.url }}">
			<h3 class="a-submenu--featured__link__title">{{ title }}</h3>
		</a>
		{{#if text}}
			<p class="a-submenu--featured__text">{{ text }}</p>
		{{/if}}
		{{#if button}}
			{{> @a-button button}}
		{{/if}}
	{{else}}
		<a class="a-submenu__title" href="{{ url }}">{{ title }}</a>
		<ul class="a-submenu__list">
			{{#each items}}
				<li class="a-submenu__item">
					<a class="a-submenu__link" href="{{ this.url }}">{{ this.label }}</a>
				</li>
			{{/each}}
		</ul>
	{{/if}}
</div>
  • Content: 
    .a-submenu {
	width: 100%;
	max-width: 269px;

	@include media($_DESKTOP) {
		min-width: 177px;
	}

	&__title {
		@include clean-link;
		font-family: $font-title;
		display: block;
		line-height: 2em;
		color: $color-text;
		transition: color $transition-fast $transition-ease;

		&:hover, &--active {
			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);

				@include media($_DESKTOP) {
					border-left-color: $color-primary;

					@include high-contrast {
						border-left-color: $color-primary-dark;
					}
				}
			}
		}

		@include media($_DESKTOP) {
			color: $color-primary;
			margin-bottom: 5px;
			padding-bottom: 12px;
			position: relative;
			line-height: 1.25em;
			transition: color $transition-fast $transition-ease;

			@include high-contrast {
				color: $color-primary-dark;
			}

			&:after {
				content: "";
				width: 0;
				height: 2px;
				background-color: $color-primary-dark;
				position: absolute;
				bottom: 0;
				left: 0;
				transition: width $transition-fast $transition-ease;
			}

			&:hover, &--active {
				color: $color-primary-dark;

				&:after {
					width: 69px;
				}
			}
		}
	}

	&__list {
		@include clean-ul;
		list-style-image: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7); // fix edge bug
	}

	&__item {
		@include clean-li;
		color: $color-text;
		margin: 1em 0 0 1.25em;

		@include media($_DESKTOP) {
			margin: 0;
		}
	}

	&__link {
		@include clean-link;
		color: $color-text;
		line-height: 1.75em;
		padding: 7px 0;
		display: block;
		position: relative;
		transition: color $transition-fast $transition-ease;

		&:hover, &--active {
			color: $color-secondary;

			@include media($_DESKTOP) {
				color: $color-text;
			}
		}

		&:focus {
			&:before {
				content: '';
				width: 0;
				height: 0;
				border-left: 1px solid $color-secondary;
				margin-right: 0.5em;
				margin-left: calc(-1px - 0.5em);

				@include media($_DESKTOP) {
					border-left-color: $color-primary;

					@include high-contrast {
						border-color: $color-primary-dark;
					}
				}
			}
		}

		@include media($_DESKTOP) {
			&:after {
				content: "";
				width: 36px;
				height: 1px;
				background-color: $color-grey-2;
				position: absolute;
				bottom: 0;
				left: 0;
				transition: width $transition-fast $transition-ease;
			}

			&:hover, &--active {
				color: $color-text;

				&:after {
					width: 69px;
					background-color: $color-primary;

					@include high-contrast {
						background-color: $color-primary-dark;
					}
				}
			}
		}
	}

	&--featured {
		margin-top: 2em;

		@include media($_DESKTOP) {
			margin-top: initial;
		}

		&__image {
			margin-top: 28px;
			@include aspect-ratio-box(56.25%);
		}

		&__link {
			@include clean-link;

			&__image {
				width: 100%;
				margin-top: 28px;
				transition: transform $transition-fast $transition-ease;
			}

			&__title {
				@include heading-font;
				font-size: 1.25rem;
				line-height: 1.4em;
				margin-top: 16px;
				transition: color $transition-fast $transition-ease;

				@include hover {
					color: $color-primary-dark;
				}
			}
		}
	}

	&--featured__text {
		margin-top: 12px;
		margin-bottom: 28px;
	}
}
  • URL: /components/raw/a-submenu/_a-submenu.scss
  • Filesystem Path: styleguide/src/components/atoms/a-submenu/_a-submenu.scss
  • Size: 3.3 KB 
{
  "title": "Submenu",
  "url": "#",
  "items": [
    {
      "label": "Fair-Food",
      "url": "#"
    },
    {
      "label": "Petition «Nein zur Lex Beznau»",
      "url": "#"
    },
    {
      "label": "Referendum gegen Versicherungsspione",
      "url": "#"
    },
    {
      "label": "Events",
      "url": "#"
    }
  ]
}

No notes defined.