<div class="wrapper-fluid o-mega-menu" aria-hidden="false" id="megaMenu">
<nav class="wrapper o-mega-menu__wrapper" aria-label="Megameny">
<div class="row align-items-start">
<div class="grid-18 grid-lg">
<a href="#" class="o-mega-menu__link o-mega-menu__link--large">Domäner</a>
<dl class="o-mega-menu__list">
<dd class="o-mega-menu__list__item"><a href="#" class="o-mega-menu__link">Är domänen ledig?</a></dd>
<dd class="o-mega-menu__list__item"><a href="#" class="o-mega-menu__link">Regler och beskrivning av whois</a></dd>
<dd class="o-mega-menu__list__item"><a href="#" class="o-mega-menu__link">Registrera en domän</a></dd>
<dd class="o-mega-menu__list__item"><a href="#" class="o-mega-menu__link">Villkor och regler</a></dd>
<dd class="o-mega-menu__list__item"><a href="#" class="o-mega-menu__link">.se-/.nu-domäner som snart kan bli lediga</a></dd>
<dd class="o-mega-menu__list__item"><a href="#" class="o-mega-menu__link">Tips innan du registrerar en domän/Inspiration och tips</a></dd>
<dd class="o-mega-menu__list__item"><a href="#" class="o-mega-menu__link">Återförsäljare</a></dd>
<dd class="o-mega-menu__list__item"><a href="#" class="o-mega-menu__link">Kontakta din kundtjänst</a></dd>
<dd class="o-mega-menu__list__item"><a href="#" class="o-mega-menu__link">Så fungerar ett domännamn</a></dd>
<dd class="o-mega-menu__list__item"><a href="#" class="o-mega-menu__link">Oseriösa metoder</a></dd>
<dd class="o-mega-menu__list__item"><a href="#" class="o-mega-menu__link">Tvistlösning</a></dd>
<dd class="o-mega-menu__list__item"><a href="#" class="o-mega-menu__link">Domännamnsbranschen</a></dd>
<dd class="o-mega-menu__list__item"><a href="#" class="o-mega-menu__link">Tjänster</a></dd>
<dd class="o-mega-menu__list__item"><a href="#" class="o-mega-menu__link">Domänstatistik</a></dd>
</dl>
</div>
<div class="grid-18 grid-lg">
<a href="#" class="o-mega-menu__link o-mega-menu__link--large">Kunskap</a>
<dl class="o-mega-menu__list">
<dt class="o-mega-menu__list__topic"><a href="#" class="o-mega-menu__link">För skolan</a></dt>
<dd class="o-mega-menu__list__item"><a href="#" class="o-mega-menu__link">Digitala lektioner</a></dd>
<dd class="o-mega-menu__list__item"><a href="#" class="o-mega-menu__link">Lärarfortbildning</a></dd>
<dd class="o-mega-menu__list__item"><a href="#" class="o-mega-menu__link">Fördjupning</a></dd>
<dt class="o-mega-menu__list__topic"><a href="#" class="o-mega-menu__link">För samhället</a></dt>
<dd class="o-mega-menu__list__item"><a href="#" class="o-mega-menu__link">Svenskarna och internet</a></dd>
<dd class="o-mega-menu__list__item"><a href="#" class="o-mega-menu__link">Projekt internetaccess</a></dd>
<dd class="o-mega-menu__list__item"><a href="#" class="o-mega-menu__link">Federationers</a></dd>
</dl>
</div>
<div class="grid-18 grid-lg">
<a href="#" class="o-mega-menu__link o-mega-menu__link--large">Mötesplatser</a>
<dl class="o-mega-menu__list">
<dd class="o-mega-menu__list__item"><a href="#" class="o-mega-menu__link">Internetdagarna<svg class="icon o-mega-menu__link__icon">
<use xlink:href="#icon-external-link"></use>
</svg>
</a></dd>
<dd class="o-mega-menu__list__item"><a href="#" class="o-mega-menu__link">Goto 10<svg class="icon o-mega-menu__link__icon">
<use xlink:href="#icon-external-link"></use>
</svg>
</a></dd>
<dd class="o-mega-menu__list__item"><a href="#" class="o-mega-menu__link">Forskningssamarbeten<svg class="icon o-mega-menu__link__icon">
<use xlink:href="#icon-external-link"></use>
</svg>
</a></dd>
<dd class="o-mega-menu__list__item"><a href="#" class="o-mega-menu__link">Internetstiftelsen stöttar</a></dd>
<dd class="o-mega-menu__list__item"><a href="#" class="o-mega-menu__link">Investeringar<svg class="icon o-mega-menu__link__icon">
<use xlink:href="#icon-external-link"></use>
</svg>
</a></dd>
</dl>
</div>
<div class="grid-18 grid-lg">
<a href="#" class="o-mega-menu__link o-mega-menu__link--large">Om oss</a>
<dl class="o-mega-menu__list">
<dt class="o-mega-menu__list__topic"><a href="#" class="o-mega-menu__link">Presentation</a></dt>
<dd class="o-mega-menu__list__item"><a href="#" class="o-mega-menu__link">Jobba hos oss<svg class="icon o-mega-menu__link__icon">
<use xlink:href="#icon-external-link"></use>
</svg>
</a></dd>
<dd class="o-mega-menu__list__item"><a href="#" class="o-mega-menu__link">Press</a></dd>
<dd class="o-mega-menu__list__item"><a href="#" class="o-mega-menu__link">Pressbilder och fotografier</a></dd>
<dd class="o-mega-menu__list__item"><a href="#" class="o-mega-menu__link">Kontakt</a></dd>
</dl>
</div>
<div class="grid-18 grid-lg">
<a href="#" class="o-mega-menu__link o-mega-menu__link--large">English</a>
<dl class="o-mega-menu__list">
<dd class="o-mega-menu__list__item"><a href="#" class="o-mega-menu__link">Lorem ipsum</a></dd>
<dd class="o-mega-menu__list__item"><a href="#" class="o-mega-menu__link">Dolor sit amet</a></dd>
<dd class="o-mega-menu__list__item"><a href="#" class="o-mega-menu__link">Aenean sodales vestibulum</a></dd>
</dl>
</div>
</div>
</nav>
<div class="row o-mega-menu__search__wrapper background-jade">
<div class="wrapper">
<div class="row align-items-center">
<div class="grid-auto u-p-r-0">
<span class="o-search__icon">
<svg class="icon">
<use xlink:href="#icon-search"></use>
</svg>
</span>
</div>
<form role="search" method="get" action="/" class="grid u-p-l-0 display-flex">
<label for="" class="u-visuallyhidden">sök internetstiftelsen.se</label>
<input type="search" name="s" class="o-search__input" value="" placeholder="sök internetstiftelsen.se" aria-describedby="number-of-hits" id="">
<button id="o-search-result-submit" type="submit" class="a-button a-button a-button--large-responsive o-search__submit">
<span class="a-button__text">Sök</span>
</button>
</form>
</div>
</div>
</div>
</div>
<div class="wrapper-fluid o-mega-menu{{#if modifier}} {{modifier}}{{/if}}" aria-hidden="{{hidden}}" id="{{id}}">
{{#if domain_search}}
{{> @domain-search hidden="true" id="domain-search-2" input_id="search-domain-2" label="sök en .se- eller .nu-domän" addidional_classes="o-domain-search--is-in-mega-menu"}}
{{/if}}
<nav class="wrapper o-mega-menu__wrapper" aria-label="Megameny">
<div class="row align-items-start">
{{#each columns}}
<div class="grid-18 grid-lg">
<a href="#" class="o-mega-menu__link o-mega-menu__link--large">{{headline}}</a>
<dl class="o-mega-menu__list">
{{#each topics}}
{{#if topic}}<dt class="o-mega-menu__list__topic"><a href="#" class="o-mega-menu__link">{{topic}}</a></dt>{{/if}}
{{#each items}}
<dd class="o-mega-menu__list__item"><a href="#" class="o-mega-menu__link">{{item}}{{#if external}}{{> @icon id="external-link" additional_classes="o-mega-menu__link__icon"}}{{/if}}</a></dd>
{{/each}}
{{/each}}
</dl>
</div>
{{/each}}
</div>
</nav>
{{#if search}}
<div class="row o-mega-menu__search__wrapper background-jade">
<div class="wrapper">
<div class="row align-items-center">
<div class="grid-auto u-p-r-0">
<span class="o-search__icon">
<svg class="icon">
<use xlink:href="#icon-search"></use>
</svg>
</span>
</div>
<form role="search" method="get" action="/" class="grid u-p-l-0 display-flex">
<label for="" class="u-visuallyhidden">sök internetstiftelsen.se</label>
<input type="search" name="s" class="o-search__input" value="" placeholder="sök internetstiftelsen.se" aria-describedby="number-of-hits" id="">
<button id="o-search-result-submit" type="submit" class="a-button a-button a-button--large-responsive o-search__submit">
<span class="a-button__text">Sök</span>
</button>
</form>
</div>
</div>
</div>
{{/if}}
</div>
{
"hidden": "false",
"id": "megaMenu",
"modifier": "",
"columns": [
{
"headline": "Domäner",
"list_id": "domains",
"topics": [
{
"topic": "",
"items": [
{
"item": "Är domänen ledig?"
},
{
"item": "Regler och beskrivning av whois"
},
{
"item": "Registrera en domän"
},
{
"item": "Villkor och regler"
},
{
"item": ".se-/.nu-domäner som snart kan bli lediga"
},
{
"item": "Tips innan du registrerar en domän/Inspiration och tips"
},
{
"item": "Återförsäljare"
},
{
"item": "Kontakta din kundtjänst"
},
{
"item": "Så fungerar ett domännamn"
},
{
"item": "Oseriösa metoder"
},
{
"item": "Tvistlösning"
},
{
"item": "Domännamnsbranschen"
},
{
"item": "Tjänster"
},
{
"item": "Domänstatistik"
}
]
}
]
},
{
"headline": "Kunskap",
"list_id": "kunskap",
"topics": [
{
"topic": "För skolan",
"items": [
{
"item": "Digitala lektioner",
"is_sub_level": true
},
{
"item": "Lärarfortbildning",
"is_sub_level": true
},
{
"item": "Fördjupning",
"is_sub_level": true
}
]
},
{
"topic": "För samhället",
"items": [
{
"item": "Svenskarna och internet",
"is_sub_level": true
},
{
"item": "Projekt internetaccess",
"is_sub_level": true
},
{
"item": "Federationers",
"is_sub_level": true
}
]
}
]
},
{
"headline": "Mötesplatser",
"list_id": "motesplatser",
"topics": [
{
"topic": "",
"items": [
{
"item": "Internetdagarna",
"external": true
},
{
"item": "Goto 10",
"external": true
},
{
"item": "Forskningssamarbeten",
"external": true
},
{
"item": "Internetstiftelsen stöttar"
},
{
"item": "Investeringar",
"external": true
}
]
}
]
},
{
"headline": "Om oss",
"list_id": "om-oss",
"topics": [
{
"topic": "Presentation",
"items": [
{
"item": "Jobba hos oss",
"is_sub_level": true,
"external": true
},
{
"item": "Press",
"is_sub_level": true
},
{
"item": "Pressbilder och fotografier",
"is_sub_level": true
},
{
"item": "Kontakt",
"is_sub_level": true
}
]
}
]
},
{
"headline": "English",
"list_id": "english",
"topics": [
{
"topic": "",
"items": [
{
"item": "Lorem ipsum"
},
{
"item": "Dolor sit amet"
},
{
"item": "Aenean sodales vestibulum"
}
]
}
]
}
],
"search": true
}
@charset "UTF-8";
@use "sass:color";
@use '../../configurations/mixins' as mixin;
@use '../../configurations/bem' as bem;
@use '../../configurations/config' as config;
@use '../../configurations/variables' as var;
@use '../../configurations/functions' as func;
@use '../../configurations/colors/colors' as colors;
@use '../../configurations/colors/colors-functions' as colorFunc;
@use '../../vendor/grid/breakpoints' as breakpoint;
@use '../../vendor/grid/grid' as grid;
$border-color: color.adjust(colors.$color-jade, $lightness: -5%);
@include mixin.organism(mega-menu) {
z-index: func.z_index(middlegroundImportant);
padding-right: 0;
padding-left: 0;
transition: transform 0.25s ease-out;
background-color: colors.$color-jade-light;
&[aria-hidden='true'] {
display: none;
transform: translateY(-115%);
}
&[aria-hidden='false'] {
transform: translateY(0);
+ {
@include mixin.organism(domain-search) {
display: none;
}
}
}
&[tabindex='-1'] {
a,
button,
input {
visibility: hidden;
}
}
@include bem.e(wrapper) {
padding-top: func.rhythm(3);
@include breakpoint.bp-down(md) {
padding-right: func.rhythm(1);
padding-left: func.rhythm(1);
}
}
@include bem.e(list) {
margin-top: func.rhythm(1);
@include bem.e(topic) {
margin-top: func.rhythm(2);
margin-bottom: func.rhythm(0.5);
padding: func.rhythm(1) func.rhythm(1);
border-bottom: 1px solid $border-color;
font-family: var.$font-family-headings;
&:first-child {
margin-top: 0;
}
}
@include bem.e(item) {
margin: 0 0 func.rhythm(0.5) 0;
padding: func.rhythm(1) func.rhythm(1);
& + & {
border-top: 1px solid $border-color;
}
}
@include breakpoint.bp-up(lg) {
@include bem.e(topic) {
padding: 0;
border-bottom: 0;
}
@include bem.e(item) {
margin-bottom: func.rhythm(1);
padding: 0;
line-height: 1.3;
& + & {
border-top: 0;
}
}
}
}
@include bem.e(link) {
display: inline-flex;
align-items: baseline;
color: colors.$color-cyberspace;
text-decoration: none;
&:hover {
&:not(span) {
text-decoration: underline;
}
}
@include bem.m(large) {
display: block;
padding: 0 func.rhythm(1);
font-family: var.$font-family-headings;
font-size: func.to_rem(23px);
white-space: nowrap;
@include breakpoint.bp-up(lg) {
padding: 0;
}
}
@include bem.e(icon) {
width: var.$icon-size-smallest;
height: var.$icon-size-smallest;
flex-shrink: 0;
margin-left: func.rhythm(0.5);
}
}
@include breakpoint.bp-up(lg) {
padding-bottom: 0;
@include bem.e(link) {
@include bem.m(large) {
padding: 0;
}
}
}
@include bem.e(search) {
@include bem.e(wrapper) {
padding: func.rhythm(2) func.rhythm(1);
@include breakpoint.bp-up(md) {
padding: func.rhythm(3) func.rhythm(2);
}
}
}
}
import { createFocusTrap } from 'focus-trap';
/**
* Collect the needed elements.
*/
const html = document.querySelector('html');
const megaMenuButton = document.querySelector('.js-toggle-mega-menu');
const megaMenu = document.getElementById('megaMenu');
const content = document.getElementById('siteMain');
const header = document.getElementById('siteHeader');
const footer = document.getElementById('siteFooter');
const alert = document.querySelector('.js-dismiss-alert');
const isIE11 = !!window.MSInputMethodContext && !!document.documentMode;
let focusTrap = null;
if (megaMenu) {
focusTrap = createFocusTrap(megaMenu);
}
/**
* Check if the element is in the viewport
*
* @param {Element} element
* @returns {boolean}
*/
function isInViewport(element) {
const rect = element.getBoundingClientRect();
// Very simple since we only use it for the footer atm
return (
rect.top <= window.innerHeight
);
}
/**
* Before the animations start we need to change how certain elements
* are placed. The visual result should be exactly the same as before these changes.
*/
function prepareAnimation() {
const scrollTop = window.scrollY || document.body.scrollTop;
const contentRect = content.getBoundingClientRect();
const inViewport = isInViewport(footer);
header.style.flex = '1 0 auto';
if (!isIE11) {
const initialFooterTop = footer.getBoundingClientRect().top;
megaMenu.style.cssText = 'display: block; flex: 1';
content.style.cssText = `
position: absolute;
top: ${scrollTop + contentRect.top}px;
left: 0;
right: 0;
bottom: 0;
overflow: hidden;
`;
if (!inViewport) {
footer.style.transform = 'translateY(100%)';
} else {
requestAnimationFrame(() => {
const newFooterTop = footer.getBoundingClientRect().top;
if (newFooterTop > initialFooterTop) {
footer.style.transform = `translateY(-${newFooterTop - initialFooterTop}px)`;
}
});
}
}
}
/**
* Removes all changes to all elements that took part in the animations.
*/
function removeAnimationPreparations() {
content.removeAttribute('style');
footer.removeAttribute('style');
header.removeAttribute('style');
megaMenu.removeAttribute('style');
}
/**
* Animate the mega menu and footer into the view
*/
function animateIn() {
megaMenuButton.setAttribute('aria-expanded', 'true');
megaMenu.setAttribute('aria-hidden', 'false');
if (!isIE11) {
footer.style.cssText = 'transform: translateY(0); transition: transform 0.25s ease-in-out;';
footer.classList.add('is-animated');
}
}
/**
* Preparations before the hide animation starts.
* The visual result should be exactly the same as before these changes.
*/
function prepareOutAnimation() {
const headerRect = megaMenu.getBoundingClientRect();
const initialFooterTop = footer.getBoundingClientRect().top;
/* Take into account it the site has an alert message at the top */
let alertHeight;
if (alert) {
alertHeight = alert.offsetHeight;
} else {
alertHeight = 0;
}
megaMenu.style.cssText = `
position: absolute;
top: ${headerRect.top - alertHeight}px;
left: 0;
right: 0;
display: block;
`;
content.removeAttribute('style');
header.removeAttribute('style');
if (!isIE11) {
requestAnimationFrame(() => {
const newFooterTop = footer.getBoundingClientRect().top;
footer.style.transition = 'none';
if (initialFooterTop > newFooterTop) {
footer.style.transform = `translateY(${initialFooterTop - newFooterTop}px)`;
} else if (newFooterTop > initialFooterTop) {
footer.style.transform = `translateY(-${newFooterTop - initialFooterTop}px)`;
}
});
}
}
/**
* Start the animation that hides the mega menu and footer.
*/
function animateOut() {
megaMenuButton.setAttribute('aria-expanded', 'false');
megaMenu.setAttribute('aria-hidden', 'true');
if (!isIE11) {
footer.addEventListener('transitionend', removeAnimationPreparations, { once: true });
footer.style.transition = '0.25s ease-in-out';
footer.classList.remove('is-animated');
setTimeout(() => {
if (!isInViewport(footer)) {
footer.style.transform = 'translateY(100%)';
} else {
footer.style.transform = 'translateY(0)';
}
}, 4);
}
}
/**
* Hide the mega menu (and footer)
*/
function hideMegaMenu() {
if (megaMenu) {
if (megaMenu.getAttribute('aria-hidden') === 'true') {
return;
}
prepareOutAnimation();
setTimeout(() => {
requestAnimationFrame(animateOut);
if (html.classList.contains('tab-highlight')) {
focusTrap.deactivate();
}
}, 50);
}
}
/**
* Show the mega menu (and footer)
*/
function showMegaMenu() {
if (megaMenu.getAttribute('aria-hidden') === 'false') {
return;
}
prepareAnimation();
setTimeout(() => {
requestAnimationFrame(animateIn);
if (html.classList.contains('tab-highlight')) {
focusTrap.activate();
}
}, 50);
}
/**
* Toggle the mega menu
* @param {MouseEvent} e
*/
function toggleMegaMenu(e) {
e.preventDefault();
if (megaMenu.getAttribute('aria-hidden') === 'false') {
hideMegaMenu();
} else {
showMegaMenu();
}
}
function handleMouseUp(e) {
const button = e.target.closest('.js-toggle-domain-search');
if (button && megaMenu.getAttribute('aria-hidden') === 'false') {
hideMegaMenu();
}
}
if (megaMenuButton && megaMenu) {
megaMenuButton.addEventListener('click', toggleMegaMenu);
document.addEventListener('mouseup', handleMouseUp);
}
The domain search is only visisble on smaller screens when the global domain search is hidden.