Styleguide

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>
 
<button class="a-hamburger"
				aria-label="{{ aria-label-toggle-navigation }}"
				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>
  • Content: 
    .a-hamburger {
	padding: 0;
	font-size: 0;

	&__box {
		width: 24px;
		height: 24px;
		display: inline-block;
		position: relative;
		perspective: 80px;
	}

	&__inner {
		display: block;
		top: 50%;
		margin-top: -1px;
		transition: transform $transition-fast $transition-ease;

		&, &:before, &:after {
			width: 24px;
			height: 2px;
			background-color: $color-text-light;
			position: absolute;
			transition: all $transition-fast $transition-ease;
		}

		&:before, &:after {
			content: "";
			display: block;
		}

		&:before {
			top: -8px;
		}

		&:after {
			bottom: -8px;
		}
	}

	@include hover {
		.a-hamburger__inner {
			&, &:before, &:after {
				background-color: $color-primary;

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

	&.is-open &__inner {
		background-color: transparent;
		transform: rotateX(180deg) rotateY(180deg);

		&:before {
			transform: translate3d(0, 8px, 0) rotate(45deg);
		}

		&:after {
			transform: translate3d(0, -8px, 0) rotate(-45deg);
		}
	}
}
  • URL: /components/raw/a-hamburger/_a-hamburger.scss
  • Filesystem Path: styleguide/src/components/atoms/a-hamburger/_a-hamburger.scss
  • Size: 1 KB 
{
  "aria-label-toggle-navigation": "Navigation anzeigen / verbergen"
}

No notes defined.