<style media="screen">
:root {
--m-submenu-background-color: #ffce2e;
--m-submenu-icon-fill-color: #1f2a36;
--m-submenu-icon-background-hover-color: #ffce2e;
}
</style>
<nav aria-label="Undermeny">
<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">
<div class="m-submenu__item__sublevel">
<a href="#" class="m-submenu__item__link m-submenu__item__link--has-sublevel">
<span>Mer om oss</span>
</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>
</a>
</li>
<li class="m-submenu__sublevel__item">
<a href="#" class="m-submenu__item__link m-submenu__sublevel__item__link">
<span>Stadgar</span>
</a>
</li>
</ul>
</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 aria-label="Undermeny">
<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",
"has_sublevel": true,
"sublevel_has_icon": false
}
@charset "UTF-8";
@use "sass:math";
@use "sass:color";
@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 color.adjust($color-ash, $lightness: -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: color.adjust($color-ash, $lightness: 3%);
&::after {
transform: rotate(-135deg);
}
&::before {
transform: rotate(135deg);
}
}
&:hover {
background-color: color.adjust($color-ash, $lightness: 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 color.adjust($color-ash, $lightness: -3%);
background-color: color.adjust($color-ash, $lightness: 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 color.adjust($color-ash, $lightness: -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);
}
}
The submenu component has 3 CSS variables available to control the color scheme of the component.
--m-submenu-background-color
--m-submenu-icon-background-color
--m-submenu-icon-hover-color
To mark the current page, use the class is-current