<nav class="a-main-menu" aria-label="Huvudmeny">
<ul class="a-main-menu__list">
<li class="u-hidden-mobile">
<a href="#" class="a-main-menu__list__link">
<span class="a-main-menu__list__text">Kunskap</span>
</a>
</li>
<li class="u-hidden-mobile">
<a href="#" class="a-main-menu__list__link">
<span class="a-main-menu__list__text">Innovation</span>
</a>
</li>
<li class="u-hidden-mobile">
<a href="#" class="a-main-menu__list__link is-current">
<span class="a-main-menu__list__text">Domäner</span>
</a>
</li>
<li class="u-hidden-mobile">
<button type="button" class="a-main-menu__list__link" aria-expanded="false" data-a11y-toggle="dropdown">
<span class="a-main-menu__list__text">Ämnen</span>
<div class="icon-arrow-down"></div>
</button>
<ul id="dropdown" class="a-main-menu__subnav u-box-shadow-card">
<li class="a-main-menu__subnav__item">
<a href="#">Desinformation</a>
</li>
<li class="a-main-menu__subnav__item">
<a href="#">Föräldraskap</a>
</li>
<li class="a-main-menu__subnav__item">
<a href="#">Integritet</a>
</li>
<li class="a-main-menu__subnav__item">
<a href="#">Källkritik</a>
</li>
<li class="a-main-menu__subnav__item">
<a href="#">Ordlista</a>
</li>
<li class="a-main-menu__subnav__item">
<a href="#">Så funkar internet</a>
</li>
<li class="a-main-menu__subnav__item">
<a href="#">Sökkritik</a>
</li>
<li class="a-main-menu__subnav__item">
<a href="#">Vanliga IT-brott</a>
</li>
<li class="a-main-menu__subnav__item">
<a href="#">Yttrandefrihet</a>
</li>
</ul>
</li>
<li>
<span class="a-main-menu__list__button">
<a href="#" class="a-button a-button--small a-button--lemon">
<span class="a-button__text">Bli medlem</span>
</a>
</span>
<span class="a-main-menu__list__button">
<a href="/medlem/rhedman" class="a-button a-button--icon a-button--icon-left a-button--transparent">
<span class="a-button__text u-nowrap">Min sida</span>
<svg class="icon a-button__icon">
<use xlink:href="#icon-user"></use>
</svg>
</a>
</span>
</li>
<li>
<div id="readspeaker_button1" class="rs_skip rsbtn rs_preserve">
<a rel="nofollow" accesskey="L" class="rsbtn_play a-main-menu__list__link is-top-level" aria-describedby="readspeaker-info" href="//app-eu.readspeaker.com/cgi-bin/rsent?customerid=10645&lang=<?php echo iis_set_language( 'sv_SE' ); ?>&voice=Maja&readclass=site__main&url=<?php the_permalink(); ?>">
<span class="a-main-menu__list__text rsbtn_left rsimg rspart"><span class="rsbtn_text"><span class="u-nowrap">Lyssna</span></span></span>
<span class="rsbtn_right rsimg rsplay rspart"></span>
<div class="a-button a-button--standalone-icon a-button--icon u-p-0">
<svg class="icon a-button__icon ">
<use xlink:href="#icon-speaker"></use>
</svg>
</div>
<span class="u-visuallyhidden" id="readspeaker-info">Lyssna på sidans text med ReadSpeaker</span>
</a>
</div>
</li>
<li class="u-hidden-mobile">
<button type="button" class="a-main-menu__list__link js-toggle-domain-search" aria-expanded="false" data-a11y-toggle="domain-search">
<span class="a-main-menu__list__text">Sök ledig domän</span>
<div class="icon-arrow-down"></div>
</button>
</li>
<li>
<button type="button" class="a-main-menu__list__link js-toggle-mega-menu" aria-expanded="false" data-a11y-toggle="mega-menu">
<span class="a-main-menu__list__text">Meny</span>
<div class="icon-hamburger"></div>
</button>
</li>
</ul>
</nav>
<nav class="a-main-menu" aria-label="Huvudmeny">
<ul class="a-main-menu__list">
{{#each item}}
<li {{#if hide_mobile}}class="u-hidden-mobile"{{/if}}>
{{#if is_button}}
<span class="a-main-menu__list__button">
<a href="{{url}}" class="a-button a-button--small a-button--lemon">
<span class="a-button__text">{{text}}</span>
</a>
</span>
<span class="a-main-menu__list__button">
<a href="/medlem/rhedman" class="a-button a-button--icon a-button--icon-left a-button--transparent">
<span class="a-button__text u-nowrap">Min sida</span>
<svg class="icon a-button__icon">
<use xlink:href="#icon-user"></use>
</svg>
</a>
</span>
{{else has_readspeaker}}
<div id="readspeaker_button1" class="rs_skip rsbtn rs_preserve">
<a rel="nofollow" accesskey="L" class="rsbtn_play a-main-menu__list__link is-top-level" aria-describedby="readspeaker-info" href="//app-eu.readspeaker.com/cgi-bin/rsent?customerid=10645&lang=<?php echo iis_set_language( 'sv_SE' ); ?>&voice=Maja&readclass=site__main&url=<?php the_permalink(); ?>">
<span class="a-main-menu__list__text rsbtn_left rsimg rspart"><span class="rsbtn_text"><span class="u-nowrap">Lyssna</span></span></span>
<span class="rsbtn_right rsimg rsplay rspart"></span>
<div class="a-button a-button--standalone-icon a-button--icon u-p-0">
<svg class="icon a-button__icon ">
<use xlink:href="#icon-speaker"></use>
</svg>
</div>
<span class="u-visuallyhidden" id="readspeaker-info">Lyssna på sidans text med ReadSpeaker</span>
</a>
</div>
{{else}}
<{{#if url}}a href="{{url}}"{{else}}button type="button"{{/if}} class="a-main-menu__list__link{{#if is_current}} is-current{{/if}}{{#if extra_class}} {{extra_class}}{{/if}}" {{#if has_expandable}}aria-expanded="false" data-a11y-toggle="{{controls}}"{{/if}}>
<span class="a-main-menu__list__text">{{text}}</span>
{{#if icon}}
<div class="{{icon}}"></div>
{{/if}}
{{#if url}}</a>{{else}}</button>{{/if}}
{{/if}}
{{#if has_dropdown}}
<ul id="dropdown" class="a-main-menu__subnav u-box-shadow-card">
<li class="a-main-menu__subnav__item">
<a href="#">Desinformation</a>
</li>
<li class="a-main-menu__subnav__item">
<a href="#">Föräldraskap</a>
</li>
<li class="a-main-menu__subnav__item">
<a href="#">Integritet</a>
</li>
<li class="a-main-menu__subnav__item">
<a href="#">Källkritik</a>
</li>
<li class="a-main-menu__subnav__item">
<a href="#">Ordlista</a>
</li>
<li class="a-main-menu__subnav__item">
<a href="#">Så funkar internet</a>
</li>
<li class="a-main-menu__subnav__item">
<a href="#">Sökkritik</a>
</li>
<li class="a-main-menu__subnav__item">
<a href="#">Vanliga IT-brott</a>
</li>
<li class="a-main-menu__subnav__item">
<a href="#">Yttrandefrihet</a>
</li>
</ul>
{{/if}}
</li>
{{/each}}
</ul>
</nav>
{
"item": [
{
"text": "Kunskap",
"url": "#",
"is_current": false,
"icon": false,
"hide_mobile": true
},
{
"text": "Innovation",
"url": "#",
"is_current": false,
"icon": false,
"hide_mobile": true
},
{
"text": "Domäner",
"url": "#",
"is_current": true,
"icon": false,
"hide_mobile": true
},
{
"text": "Ämnen",
"url": false,
"is_current": false,
"icon": "icon-arrow-down",
"hide_mobile": true,
"has_dropdown": true,
"has_expandable": true,
"controls": "dropdown"
},
{
"text": "Bli medlem",
"url": "#",
"is_current": false,
"icon": false,
"hide_mobile": false,
"is_button": true
},
{
"text": "Lyssna",
"url": false,
"is_current": false,
"icon": false,
"has_readspeaker": true,
"hide_mobile": false
},
{
"text": "Sök ledig domän",
"url": false,
"is_current": false,
"icon": "icon-arrow-down",
"extra_class": "js-toggle-domain-search",
"has_expandable": true,
"controls": "domain-search",
"hide_mobile": true
},
{
"text": "Meny",
"url": false,
"is_current": false,
"icon": "icon-hamburger",
"extra_class": "js-toggle-mega-menu",
"has_expandable": true,
"controls": "mega-menu",
"hide_mobile": false
}
]
}
@charset 'UTF-8';
@include atom(main-menu) {
@include e(list) {
$root: &;
display: flex;
justify-content: flex-end;
width: 100%;
margin: 0;
padding: 0;
list-style: none;
li {
display: flex;
align-items: center;
position: relative;
&:last-child {
#{$root}#{$element-separator}link {
padding-right: 0;
}
}
}
@include e(button) {
padding: rhythm(2) 0 rhythm(2) rhythm(1);
@include atom(button) {
padding: rhythm(0.4) rhythm(1.5);
font-family: $font-family-medium;
font-size: $size-small;
@include e(text) {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
@include m(icon-left) {
padding-left: rhythm(5);
}
@include m(icon-right) {
padding-right: rhythm(5);
}
}
@include bp-up(sm) {
@include atom(button) {
padding-top: rhythm(0.6);
padding-bottom: rhythm(0.6);
font-size: $size-base;
}
}
}
@include e(link) {
@extend %normalize-links;
display: flex;
align-items: center;
padding: rhythm(2) rhythm(1);
border: 0;
background-color: transparent;
color: var(--cyberspace-color);
font-family: $font-family-medium;
font-size: rem($size-small);
text-decoration: none;
-webkit-appearance: none;
line-height: 1;
&:focus,
&:hover {
text-decoration: underline;
}
&.is-current {
color: $color-ruby;
font-family: $font-family-medium;
}
&[aria-expanded='true'] {
@include b(icon-hamburger) {
transform: rotate(-90deg);
background-color: transparent;
&::before {
top: 0;
transform: rotate(45deg);
}
&::after {
bottom: 0;
transform: rotate(-45deg);
}
}
@include b(icon-arrow-down) {
&::before {
left: 0;
width: 100%;
transform: rotate(-45deg);
}
&::after {
right: 0;
width: 100%;
transform: rotate(45deg);
}
}
}
@include b(icon-hamburger) {
display: flex;
position: relative;
z-index: -1;
flex-direction: column;
width: $icon-size-medium;
height: 2px;
margin-left: rhythm(1);
transform-origin: 50% 50%;
transition: all 0.3s ease-out, background-color 0.15s ease-out;
border: 0;
border-radius: 0;
background-color: currentColor;
color: var(--cyberspace-color);
&::before,
&::after {
content: '';
display: block;
position: absolute;
width: 100%;
height: 2px;
transition: transform 0.3s ease-out, top 0.3s ease-out, bottom 0.3s ease-out;
background-color: currentColor;
}
&::before {
top: -#{rem(6px)};
}
&::after {
bottom: -#{rem(6px)};
}
}
@include b(icon-arrow-down) {
display: flex;
position: relative;
z-index: -1;
flex-direction: column;
width: $icon-size-medium;
height: $icon-size-medium;
margin-left: rhythm(1);
margin-top: -#{rem(3px)};
transform-origin: 50% 50%;
transition: all 0.3s ease-out;
border: 0;
border-radius: 0;
color: var(--cyberspace-color);
&::before,
&::after {
content: '';
display: block;
position: absolute;
top: 50%;
width: 75%;
height: 2px;
transition: all 0.3s ease-out;
background-color: currentColor;
}
&::before {
left: -#{rem(2px)};
transform: rotate(45deg);
}
&::after {
right: -#{rem(2px)};
transform: rotate(-45deg);
}
}
@include bp-up(sm) {
font-size: $size-base;
}
}
@include e(text) {
margin-top: -#{rem(3px)}; // Adjust for the font's bad placement in viewbox
pointer-events: none;
}
}
@include e(subnav) {
position: absolute;
left: 0;
top: calc(100% - #{rhythm(1)});
margin: 0;
padding: 0;
background-color: $color-snow;
border: 1px solid $color-ash;
@include card-shadow($color-cyberspace, 0.2);
&::after,
&:before {
bottom: 100%;
left: rhythm(4);
border: solid transparent;
content: '';
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
&::after {
border-color: rgba(255, 255, 255, 0);
border-bottom-color: $color-snow;
border-width: 15px;
margin-left: -15px;
}
&::before {
border-color: rgba(238, 238, 238, 0);
border-bottom-color: $color-ash;
border-width: 16px;
margin-left: -16px;
}
&[aria-hidden='true'],
&:not([aria-hidden]) {
display: none;
}
@include e(item) {
width: 100%;
& + & {
border-top: 1px solid $color-ash;
}
a {
color: $color-cyberspace;
display: block;
width: 100%;
padding: rhythm(0.5) rhythm(2);
text-decoration: none;
white-space: nowrap;
&:hover {
text-decoration: underline;
}
}
}
}
}
.no-js {
@include atom(main-menu) {
@include e(subnav) {
display: block;
}
}
}
No notes defined.