Submenu

<style media="screen">
    :root {
        --m-submenu-background-color: #ffce2e;
        --m-submenu-icon-fill-color: #1f2a36;
        --m-submenu-icon-background-hover-color: #ffce2e;
    }
</style>
<nav>
    <dl class="m-submenu">
        <dt class="m-submenu__title">
            <a href="#" class="m-submenu__title__link">
                <span>Om oss</span>
                <svg class="icon">
                    <use xlink:href="#icon-arrow-variant"></use>
                </svg>
            </a>
        </dt>
        <dd class="m-submenu__item">
            <a href="#" class="m-submenu__item__link">
                <span>Vi är internetstiftelsen</span>

            </a>
        </dd>
        <dd class="m-submenu__item">
            <a href="#" class="m-submenu__item__link is-current">
                <span>Kontakt</span>

            </a>
        </dd>
        <dd class="m-submenu__item">
            <a href="#" class="m-submenu__item__link is-current">
                <span>Press</span>

            </a>
        </dd>
        <dd class="m-submenu__item">
            <a href="#" class="m-submenu__item__link">
                <span>Jobba hos oss</span>

            </a>
        </dd>
    </dl>
</nav>
<style media="screen">
:root {
	--m-submenu-background-color: {{background_color}};
	--m-submenu-icon-fill-color: {{icon_fill_color}};
	--m-submenu-icon-background-hover-color: {{icon_background_hover_color}};
}
</style>
<nav>
	<dl class="m-submenu">
		<dt class="m-submenu__title">
			<a href="#" class="m-submenu__title__link">
				<span>Om oss</span>
				{{> @icon id="arrow-variant"}}
			</a>
		</dt>
		<dd class="m-submenu__item">
			<a href="#" class="m-submenu__item__link">
				<span>Vi är internetstiftelsen</span>
				{{#if has_icons}}{{> @icon id="arrow-variant"}}{{/if}}
			</a>
		</dd>
		{{#unless has_sublevel}}
		<dd class="m-submenu__item">
			<a href="#" class="m-submenu__item__link is-current">
				<span>Kontakt</span>
				{{#if has_icons}}{{> @icon id="arrow-variant"}}{{/if}}
			</a>
		</dd>
		{{/unless}}
		{{#if has_sublevel}}
		<dd class="m-submenu__item">
			<div class="m-submenu__item__sublevel">
				<a href="#" class="m-submenu__item__link m-submenu__item__link--has-sublevel">
					<span>Mer om oss</span>
					{{#if has_icons}}{{> @icon id="arrow-variant"}}{{/if}}
				</a>
				<button type="button" class="m-submenu__item__toggle-button" data-a11y-toggle="sublvl007" aria-controls="sublvl007"><span class="u-visuallyhidden">Öppna/stäng</span></button>
			</div>
			<ul class="m-submenu__sublevel" aria-hidden="true" id="sublvl007" data-focus-trap="false">
				<li class="m-submenu__sublevel__item">
					<a href="#" class="m-submenu__item__link m-submenu__sublevel__item__link">
						<span>Styrelse</span>
						{{#if sublevel_has_icon}}{{> @icon id="arrow-variant"}}{{/if}}
					</a>
				</li>
				<li class="m-submenu__sublevel__item">
					<a href="#" class="m-submenu__item__link m-submenu__sublevel__item__link">
						<span>Stadgar</span>
						{{#if sublevel_has_icon}}{{> @icon id="arrow-variant"}}{{/if}}
					</a>
				</li>
			</ul>
		</dd>
		{{/if}}
		<dd class="m-submenu__item">
			<a href="#" class="m-submenu__item__link is-current">
				<span>Press</span>
				{{#if has_icons}}{{> @icon id="arrow-variant"}}{{/if}}
			</a>
		</dd>
		<dd class="m-submenu__item">
			<a href="#" class="m-submenu__item__link">
				<span>Jobba hos oss</span>
				{{#if has_icons}}{{> @icon id="arrow-variant"}}{{/if}}
			</a>
		</dd>
	</dl>
</nav>
{
  "background_color": "#ffce2e",
  "icon_fill_color": "#1f2a36",
  "icon_background_hover_color": "#ffce2e"
}
  • Content:
    @charset "UTF-8";
    
    @use "sass:math";
    
    @include molecule(submenu) {
    	margin: 0 0 rhythm(2) 0;
    	padding: 0;
    	overflow: hidden;
    	border-radius: $border-radius;
    	background-color: $color-snow;
    	list-style: none;
    
    	@include e(title) {
    		background-color: var(--m-submenu-background-color);
    
    		@include e(link) {
    			display: flex;
    			align-items: center;
    			justify-content: space-between;
    			padding: rhythm(2);
    			color: $color-cyberspace;
    			font-family: $font-family-headings;
    			text-decoration: none;
    
    			&:hover,
    			&:focus {
    				text-decoration: underline;
    
    				> svg {
    					animation: up-icon 1.5s infinite linear;
    				}
    			}
    
    			> svg {
    				flex-shrink: 0;
    				width: $icon-size-small;
    				height: $icon-size-small;
    				margin-left: rhythm(1);
    				transform: rotate(-90deg);
    			}
    
    			@include bp-up(md) {
    				padding: rhythm(2) rhythm(3);
    
    				> svg {
    					width: $icon-size-medium;
    					height: $icon-size-medium;
    				}
    			}
    		}
    	}
    
    	@include e(item) {
    		margin: 0;
    		padding: 0;
    
    		& + & {
    			border-top: 1px solid $color-ash;
    		}
    
    		&:last-child {
    			> a {
    				padding-bottom: rhythm(2);
    
    				@include bp-up(md) {
    					padding-bottom: rhythm(3);
    				}
    			}
    		}
    
    		@include e(link) {
    			display: flex;
    			position: relative;
    			align-items: center;
    			justify-content: space-between;
    			padding: rhythm(1) rhythm(6) rhythm(1) rhythm(2);
    			overflow: hidden;
    			color: var(--m-submenu-icon-fill-color);
    			text-decoration: none;
    
    			&:hover,
    			&:focus {
    				text-decoration: underline;
    
    				> svg {
    					display: flex;
    				}
    			}
    
    			> svg {
    				display: none;
    				position: absolute;
    				top: 50%;
    				right: rhythm(2);
    				flex-shrink: 0;
    				width: $icon-size;
    				height: $icon-size;
    				margin-left: rhythm(1);
    				padding: rhythm(0.5);
    				overflow: hidden;
    				transform: translateY(-50%);
    				border-radius: 50%;
    				background-color: var(--m-submenu-icon-background-hover-color);
    				fill: var(--m-submenu-icon-fill-color);
    
    				@include bp-up(md) {
    					right: rhythm(3);
    					width: $icon-size * 1.6;
    					height: $icon-size * 1.6;
    					padding: rhythm(1);
    				}
    			}
    
    			&.is-current {
    				font-family: $font-family-headings;
    				pointer-events: none;
    
    				> svg {
    					display: none;
    				}
    			}
    
    			@include bp-up(md) {
    				padding: rhythm(2) rhythm(7) rhythm(2) rhythm(3);
    			}
    
    			@include m(has-sublevel) {
    				display: flex;
    				flex-grow: 1;
    			}
    		}
    
    		@include e(sublevel) {
    			display: flex;
    			justify-content: space-between;
    		}
    
    		@include e(toggle-button) {
    			display: flex;
    			position: relative;
    			position: relative;
    			align-items: center;
    			margin: 0;
    			padding: rhythm(1) rhythm(3);
    			border: 0;
    			border-left: 1px solid darken($color-ash, 5%);
    			background-color: transparent;
    
    			&::before,
    			&::after {
    				content: '';
    				display: block;
    				position: absolute;
    				top: rem(22px);
    				right: rem(25px);
    				width: math.div($icon-size-small, 1.5);
    				height: 2px;
    				transform-origin: center center;
    				transition: transform 0.25s ease-out;
    				background-color: $color-cyberspace;
    			}
    
    			&::before {
    				transform: rotate(45deg);
    			}
    
    			&::after {
    				right: rem(18px);
    				transform: rotate(-45deg);
    			}
    
    			&[aria-expanded='true'] {
    				margin-bottom: -1px;
    				background-color: lighten($color-ash, 3%);
    
    				&::after {
    					transform: rotate(-135deg);
    				}
    
    				&::before {
    					transform: rotate(135deg);
    				}
    			}
    
    			&:hover {
    				background-color: lighten($color-ash, 3%);
    			}
    
    			@include bp-up(md) {
    				padding: rhythm(2) rhythm(4);
    
    				&::before,
    				&::after {
    					top: rem(31px);
    					right: rem(33px);
    					width: $icon-size-small;
    					height: 3px;
    				}
    
    				&::after {
    					right: rem(23px);
    				}
    			}
    		}
    	}
    
    	@include e(sublevel) {
    		margin: 0;
    		padding: 0;
    		border-top: 1px solid darken($color-ash, 3);
    		background-color: lighten($color-ash, 3%);
    		list-style: none;
    
    		&[aria-hidden='true'] {
    			display: none;
    			border-top: 1px solid transparent;
    		}
    
    		@include e(item) {
    			margin: 0;
    			padding: 0 rhythm(1.5);
    
    			& + & {
    				border-top: 1px solid darken($color-ash, 4);
    			}
    
    			/* Support for icon on sublevel */
    
    			@include e(link) {
    				> svg {
    					display: none;
    					padding: rhythm(0.5);
    					background-color: $color-concrete;
    
    					@include bp-up(md) {
    						padding: rhythm(1);
    					}
    				}
    
    				&:hover,
    				&:focus {
    					> svg {
    						display: flex;
    					}
    				}
    			}
    		}
    	}
    }
    
    @keyframes up-icon {
    	0% {
    		transform: translateY(0) rotate(-90deg);
    	}
    
    	25% {
    		transform: translateY(-#{rhythm(0.5)}) rotate(-90deg);
    	}
    
    	75% {
    		transform: translateY(rhythm(0.5)) rotate(-90deg);
    	}
    
    	100% {
    		transform: translateY(0) rotate(-90deg);
    	}
    }
    
  • URL: /components/raw/submenu/_submenu.scss
  • Filesystem Path: src/molecules/submenu/_submenu.scss
  • Size: 4.7 KB

Submenu component

The submenu component has 3 CSS variables available to control the color scheme of the component.

  1. --m-submenu-background-color
  2. --m-submenu-icon-background-color
  3. --m-submenu-icon-hover-color

Current page

To mark the current page, use the class is-current