<div class="js-menu-toggles wrapper-fluid o-mega-menu color-jade-light" aria-hidden="false" id="megaMenu">
<ul class="o-mega-menu__buttons-list js-search-toggles">
<li class="o-mega-menu__buttons-list__item color-jade">
<button type="button" data-a11y-toggle="domain-search" class="o-mega-menu__buttons-list__link color-jade">
<svg class="icon">
<use xlink:href="#icon-search-domain"></use>
</svg>
<span class="color-cyberspace u-display-inline-block u-p-x-1">Sök ledig domän</span>
</button>
</li>
<li class="o-mega-menu__buttons-list__item color-jade">
<button type="button" data-a11y-toggle="site-search" class="o-mega-menu__buttons-list__link color-jade">
<svg class="icon">
<use xlink:href="#icon-search"></use>
</svg>
<span class="color-cyberspace u-display-inline-block u-p-x-1">Sök information</span>
</button>
</li>
</ul>
<div id="domain-search" class="o-mega-menu__search-container color-jade">
<form action="">
<div class="wrapper">
<div class="display-flex align-items-center">
<div class="grid display-flex u-p-x-0">
<label for="domain-search-input" class="u-visuallyhidden">Sök ledig domän</label>
<input type="search" class="o-domain-search__input js-search-domain-input color-cyberspace" autocomplete="off" placeholder="Sök ledig domän" id="domain-search-input">
<button type="submit" class="a-button a-button--secondary o-domain-search__submit u-p-x-2 u-flex-grow-1 u-flex-shrink-0" id="o-domain-search-submit">
<span class="a-button__text u-nowrap">Sök domän</span>
</button>
</div>
</div>
</div>
</form>
</div>
<div id="site-search" class="o-mega-menu__search-container color-jade">
<form action="">
<div class="wrapper">
<div class="display-flex align-items-center">
<div class="grid display-flex u-p-x-0">
<label for="site-search-input" class="u-visuallyhidden">Sök info</label>
<input type="search" class="o-domain-search__input js-search-domain-input color-cyberspace" autocomplete="off" placeholder="Sök info" id="site-search-input">
<button type="submit" class="a-button a-button--secondary o-domain-search__submit u-p-x-2 u-flex-grow-1 u-flex-shrink-0" id="o-domain-search-submit">
<span class="a-button__text u-nowrap">Sök</span>
</button>
</div>
</div>
</div>
</form>
</div>
<nav class="wrapper o-mega-menu__wrapper color-jade" aria-label="Megameny">
<div class="row align-items-start">
<div class="grid-18 grid-lg o-mega-menu__column">
<div class="o-mega-menu__topic color-jade">
<a href="#" class="o-mega-menu__link o-mega-menu__link--large">Domäner</a>
<button class="a-button a-button--standalone-icon o-mega-menu__topic-button color-jade" data-a11y-toggle="domains" data-toggle-target="domains-text" data-toggle-text="Visa undermeny|Dölj undermeny">
<span class="a-button__text" id="domains-text">Visa undermeny för Domäner</span>
<svg class="icon a-button__icon">
<use xlink:href="#icon-arrow-down"></use>
</svg>
</button>
</div>
<dl class="o-mega-menu__list color-jade" id="domains">
<dd class="o-mega-menu__list__item color-jade-medium-dark"><a href="#" class="o-mega-menu__link">Är domänen ledig?</a></dd>
<dd class="o-mega-menu__list__item color-jade-medium-dark"><a href="#" class="o-mega-menu__link">Regler och beskrivning av whois</a></dd>
<dd class="o-mega-menu__list__item color-jade-medium-dark"><a href="#" class="o-mega-menu__link">Registrera en domän</a></dd>
<dd class="o-mega-menu__list__item color-jade-medium-dark"><a href="#" class="o-mega-menu__link">Villkor och regler</a></dd>
<dd class="o-mega-menu__list__item color-jade-medium-dark"><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 color-jade-medium-dark"><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 color-jade-medium-dark"><a href="#" class="o-mega-menu__link">Återförsäljare</a></dd>
<dd class="o-mega-menu__list__item color-jade-medium-dark"><a href="#" class="o-mega-menu__link">Kontakta din kundtjänst</a></dd>
<dd class="o-mega-menu__list__item color-jade-medium-dark"><a href="#" class="o-mega-menu__link">Så fungerar ett domännamn</a></dd>
<dd class="o-mega-menu__list__item color-jade-medium-dark"><a href="#" class="o-mega-menu__link">Oseriösa metoder</a></dd>
<dd class="o-mega-menu__list__item color-jade-medium-dark"><a href="#" class="o-mega-menu__link">Tvistlösning</a></dd>
<dd class="o-mega-menu__list__item color-jade-medium-dark"><a href="#" class="o-mega-menu__link">Domännamnsbranschen</a></dd>
<dd class="o-mega-menu__list__item color-jade-medium-dark"><a href="#" class="o-mega-menu__link">Tjänster</a></dd>
<dd class="o-mega-menu__list__item color-jade-medium-dark"><a href="#" class="o-mega-menu__link">Domänstatistik</a></dd>
</dl>
</div>
<div class="grid-18 grid-lg o-mega-menu__column">
<div class="o-mega-menu__topic color-jade">
<a href="#" class="o-mega-menu__link o-mega-menu__link--large">Kunskap</a>
<button class="a-button a-button--standalone-icon o-mega-menu__topic-button color-jade" data-a11y-toggle="kunskap" data-toggle-target="kunskap-text" data-toggle-text="Visa undermeny|Dölj undermeny">
<span class="a-button__text" id="kunskap-text">Visa undermeny för Kunskap</span>
<svg class="icon a-button__icon">
<use xlink:href="#icon-arrow-down"></use>
</svg>
</button>
</div>
<dl class="o-mega-menu__list color-jade" id="kunskap">
<dt class="o-mega-menu__list__topic color-jade-medium-dark"><a href="#" class="o-mega-menu__link">För skolan</a></dt>
<dd class="o-mega-menu__list__item color-jade-medium-dark"><a href="#" class="o-mega-menu__link o-mega-menu__link--sub-level">Digitala lektioner</a></dd>
<dd class="o-mega-menu__list__item color-jade-medium-dark"><a href="#" class="o-mega-menu__link o-mega-menu__link--sub-level">Lärarfortbildning</a></dd>
<dd class="o-mega-menu__list__item color-jade-medium-dark"><a href="#" class="o-mega-menu__link o-mega-menu__link--sub-level">Fördjupning</a></dd>
<dt class="o-mega-menu__list__topic color-jade-medium-dark"><a href="#" class="o-mega-menu__link">För samhället</a></dt>
<dd class="o-mega-menu__list__item color-jade-medium-dark"><a href="#" class="o-mega-menu__link o-mega-menu__link--sub-level">Svenskarna och internet</a></dd>
<dd class="o-mega-menu__list__item color-jade-medium-dark"><a href="#" class="o-mega-menu__link o-mega-menu__link--sub-level">Projekt internetaccess</a></dd>
<dd class="o-mega-menu__list__item color-jade-medium-dark"><a href="#" class="o-mega-menu__link o-mega-menu__link--sub-level">Federationers</a></dd>
</dl>
</div>
<div class="grid-18 grid-lg o-mega-menu__column">
<div class="o-mega-menu__topic color-jade">
<a href="#" class="o-mega-menu__link o-mega-menu__link--large">Mötesplatser</a>
<button class="a-button a-button--standalone-icon o-mega-menu__topic-button color-jade" data-a11y-toggle="motesplatser" data-toggle-target="motesplatser-text" data-toggle-text="Visa undermeny|Dölj undermeny">
<span class="a-button__text" id="motesplatser-text">Visa undermeny för Mötesplatser</span>
<svg class="icon a-button__icon">
<use xlink:href="#icon-arrow-down"></use>
</svg>
</button>
</div>
<dl class="o-mega-menu__list color-jade" id="motesplatser">
<dd class="o-mega-menu__list__item color-jade-medium-dark"><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 color-jade-medium-dark"><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 color-jade-medium-dark"><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 color-jade-medium-dark"><a href="#" class="o-mega-menu__link">Internetstiftelsen stöttar</a></dd>
<dd class="o-mega-menu__list__item color-jade-medium-dark"><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 o-mega-menu__column">
<div class="o-mega-menu__topic color-jade">
<a href="#" class="o-mega-menu__link o-mega-menu__link--large">Om oss</a>
<button class="a-button a-button--standalone-icon o-mega-menu__topic-button color-jade" data-a11y-toggle="om-oss" data-toggle-target="om-oss-text" data-toggle-text="Visa undermeny|Dölj undermeny">
<span class="a-button__text" id="om-oss-text">Visa undermeny för Om oss</span>
<svg class="icon a-button__icon">
<use xlink:href="#icon-arrow-down"></use>
</svg>
</button>
</div>
<dl class="o-mega-menu__list color-jade" id="om-oss">
<dt class="o-mega-menu__list__topic color-jade-medium-dark"><a href="#" class="o-mega-menu__link">Presentation</a></dt>
<dd class="o-mega-menu__list__item color-jade-medium-dark"><a href="#" class="o-mega-menu__link o-mega-menu__link--sub-level">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 color-jade-medium-dark"><a href="#" class="o-mega-menu__link o-mega-menu__link--sub-level">Press</a></dd>
<dd class="o-mega-menu__list__item color-jade-medium-dark"><a href="#" class="o-mega-menu__link o-mega-menu__link--sub-level">Pressbilder och fotografier</a></dd>
<dd class="o-mega-menu__list__item color-jade-medium-dark"><a href="#" class="o-mega-menu__link o-mega-menu__link--sub-level">Kontakt</a></dd>
</dl>
</div>
<div class="grid-18 grid-lg o-mega-menu__column">
<div class="o-mega-menu__topic color-jade">
<a href="#" class="o-mega-menu__link o-mega-menu__link--large">English</a>
<button class="a-button a-button--standalone-icon o-mega-menu__topic-button color-jade" data-a11y-toggle="english" data-toggle-target="english-text" data-toggle-text="Visa undermeny|Dölj undermeny">
<span class="a-button__text" id="english-text">Visa undermeny för English</span>
<svg class="icon a-button__icon">
<use xlink:href="#icon-arrow-down"></use>
</svg>
</button>
</div>
<dl class="o-mega-menu__list color-jade" id="english">
<dd class="o-mega-menu__list__item color-jade-medium-dark"><a href="#" class="o-mega-menu__link">Lorem ipsum</a></dd>
<dd class="o-mega-menu__list__item color-jade-medium-dark"><a href="#" class="o-mega-menu__link">Dolor sit amet</a></dd>
<dd class="o-mega-menu__list__item color-jade-medium-dark"><a href="#" class="o-mega-menu__link">Aenean sodales vestibulum</a></dd>
</dl>
</div>
</div>
</nav>
<ul class="o-mega-menu__buttons-list">
<li class="o-mega-menu__buttons-list__item color-jade">
<a href="" class="o-mega-menu__buttons-list__link color-jade-light">
<svg class="icon">
<use xlink:href="#icon-speaker"></use>
</svg>
<span class="color-cyberspace">Lyssna</span>
</a>
</li>
<li class="o-mega-menu__buttons-list__item color-jade">
<a href="" class="o-mega-menu__buttons-list__link color-jade-light">
<svg class="icon">
<use xlink:href="#icon-headset"></use>
</svg>
<span class="color-cyberspace">Kontakta oss</span>
</a>
</li>
</ul>
</div>
<script>
function collapse(toggle) {
var id = toggle.getAttribute('data-a11y-toggle');
var collapsibleBox = document.getElementById(id);
collapsibleBox.setAttribute('aria-hidden', true);
toggle.setAttribute('aria-expanded', false);
}
function collapseAll(event) {
toggles
.filter(function(toggle) {
return toggle !== event.target;
})
.forEach(collapse);
}
var toggles = Array.prototype.slice.call(
document.querySelectorAll('.js-menu-toggles [data-a11y-toggle]')
);
toggles.forEach(function(toggle) {
toggle.addEventListener('click', collapseAll);
});
</script>
<div class="js-menu-toggles wrapper-fluid o-mega-menu{{#if modifier}} {{modifier}}{{/if}} color-jade-light" aria-hidden="{{hidden}}" id="{{id}}">
<ul class="o-mega-menu__buttons-list js-search-toggles">
<li class="o-mega-menu__buttons-list__item color-jade">
<button type="button" data-a11y-toggle="domain-search" class="o-mega-menu__buttons-list__link color-jade">
<svg class="icon">
<use xlink:href="#icon-search-domain"></use>
</svg>
<span class="color-cyberspace u-display-inline-block u-p-x-1">Sök ledig domän</span>
</button>
</li>
<li class="o-mega-menu__buttons-list__item color-jade">
<button type="button" data-a11y-toggle="site-search" class="o-mega-menu__buttons-list__link color-jade">
<svg class="icon">
<use xlink:href="#icon-search"></use>
</svg>
<span class="color-cyberspace u-display-inline-block u-p-x-1">Sök information</span>
</button>
</li>
</ul>
<div id="domain-search" class="o-mega-menu__search-container color-jade">
<form action="">
<div class="wrapper">
<div class="display-flex align-items-center">
<div class="grid display-flex u-p-x-0">
<label for="domain-search-input" class="u-visuallyhidden">Sök ledig domän</label>
<input type="search" class="o-domain-search__input js-search-domain-input color-cyberspace" autocomplete="off" placeholder="Sök ledig domän" id="domain-search-input">
<button type="submit" class="a-button a-button--secondary o-domain-search__submit u-p-x-2 u-flex-grow-1 u-flex-shrink-0" id="o-domain-search-submit">
<span class="a-button__text u-nowrap">Sök domän</span>
</button>
</div>
</div>
</div>
</form>
</div>
<div id="site-search" class="o-mega-menu__search-container color-jade">
<form action="">
<div class="wrapper">
<div class="display-flex align-items-center">
<div class="grid display-flex u-p-x-0">
<label for="site-search-input" class="u-visuallyhidden">Sök info</label>
<input type="search" class="o-domain-search__input js-search-domain-input color-cyberspace" autocomplete="off" placeholder="Sök info" id="site-search-input">
<button type="submit" class="a-button a-button--secondary o-domain-search__submit u-p-x-2 u-flex-grow-1 u-flex-shrink-0" id="o-domain-search-submit">
<span class="a-button__text u-nowrap">Sök</span>
</button>
</div>
</div>
</div>
</form>
</div>
<nav class="wrapper o-mega-menu__wrapper color-jade" aria-label="Megameny">
<div class="row align-items-start">
{{#each columns}}
<div class="grid-18 grid-lg o-mega-menu__column">
<div class="o-mega-menu__topic color-jade">
<a href="#" class="o-mega-menu__link o-mega-menu__link--large">{{headline}}</a>
<button class="a-button a-button--standalone-icon o-mega-menu__topic-button color-jade" data-a11y-toggle="{{list_id}}" data-toggle-target="{{list_id}}-text" data-toggle-text="Visa undermeny|Dölj undermeny">
<span class="a-button__text" id="{{list_id}}-text">Visa undermeny för {{headline}}</span>
<svg class="icon a-button__icon">
<use xlink:href="#icon-arrow-down"></use>
</svg>
</button>
</div>
<dl class="o-mega-menu__list color-jade" id="{{list_id}}">
{{#each topics}}
{{#if topic}}<dt class="o-mega-menu__list__topic color-jade-medium-dark"><a href="#" class="o-mega-menu__link">{{topic}}</a></dt>{{/if}}
{{#each items}}
<dd class="o-mega-menu__list__item color-jade-medium-dark"><a href="#" class="o-mega-menu__link{{#if is_sub_level}} o-mega-menu__link--sub-level{{/if}}">{{item}}{{#if external}}{{> @icon id="external-link" additional_classes="o-mega-menu__link__icon"}}{{/if}}</a></dd>
{{/each}}
{{/each}}
</dl>
</div>
{{/each}}
</div>
</nav>
<ul class="o-mega-menu__buttons-list">
<li class="o-mega-menu__buttons-list__item color-jade">
<a href="" class="o-mega-menu__buttons-list__link color-jade-light">
<svg class="icon">
<use xlink:href="#icon-speaker"></use>
</svg>
<span class="color-cyberspace">Lyssna</span>
</a>
</li>
<li class="o-mega-menu__buttons-list__item color-jade">
<a href="" class="o-mega-menu__buttons-list__link color-jade-light">
<svg class="icon">
<use xlink:href="#icon-headset"></use>
</svg>
<span class="color-cyberspace">Kontakta oss</span>
</a>
</li>
</ul>
</div>
<script>
function collapse (toggle) {
var id = toggle.getAttribute('data-a11y-toggle');
var collapsibleBox = document.getElementById(id);
collapsibleBox.setAttribute('aria-hidden', true);
toggle.setAttribute('aria-expanded', false);
}
function collapseAll (event) {
toggles
.filter(function (toggle) {
return toggle !== event.target;
})
.forEach(collapse);
}
var toggles = Array.prototype.slice.call(
document.querySelectorAll('.js-menu-toggles [data-a11y-toggle]')
);
toggles.forEach(function (toggle) {
toggle.addEventListener('click', collapseAll);
});
</script>
{
"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"
}
]
}
]
}
]
}
@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(middleground);
padding-right: 0;
padding-left: 0;
transition: transform 0.25s ease-out;
background-color: currentColor;
&[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) {
@include breakpoint.bp-down(md) {
padding-right: func.rhythm(1);
padding-left: func.rhythm(1);
border-bottom: 1px solid currentColor;
}
@include breakpoint.bp-up(lg) {
padding-top: func.rhythm(3);
}
}
@include bem.e(column) {
padding-bottom: func.rhythm(2);
@include breakpoint.bp-down(md) {
padding-left: 0;
padding-right: 0;
padding-bottom: 0;
}
}
@include bem.e(buttons-list) {
display: flex;
align-items: stretch;
margin: 0;
padding: 0;
list-style: none;
@include bem.e(item) {
width: 50%;
flex-grow: 1;
flex-shrink: 0;
margin: 0;
padding: 0;
& + & {
border-left: 1px solid currentColor;
}
}
@include bem.e(link) {
display: flex;
flex-direction: column;
align-items: center;
padding-top: func.rhythm(2);
padding-bottom: func.rhythm(2);
text-align: center;
color: colors.$color-cyberspace;
text-decoration: none;
font-family: var.$font-family-headings;
border: 0;
background-color: transparent;
appearance: none;
width: 100%;
height: 100%;
&[aria-expanded='true'] {
background-color: currentColor;
}
svg {
width: var.$icon-size-large * 1.25;
height: var.$icon-size-large * 1.25;
margin-bottom: func.rhythm(1);
pointer-events: none;
}
span {
pointer-events: none;
}
}
@include breakpoint.bp-up(lg) {
display: none;
}
}
@include bem.e(search-container) {
background-color: currentcolor;
padding-top: func.rhythm(2);
padding-bottom: func.rhythm(2);
&[aria-hidden='true'] {
display: none;
}
@include breakpoint.bp-up(lg) {
display: none;
}
}
@include bem.e(topic) {
display: flex;
justify-content: space-between;
align-items: center;
border-top: 1px solid currentColor;
@include breakpoint.bp-up(lg) {
background-color: transparent;
border-top: 0;
margin-bottom: func.rhythm(1);
}
}
@include bem.e(topic-button) {
margin-left: auto;
align-self: stretch;
padding-left: func.rhythm(1.5);
padding-right: func.rhythm(1.5);
border-left: 1px solid currentColor;
@include breakpoint.bp-up(lg) {
display: none;
pointer-events: none;
}
&[aria-expanded='true'] {
background-color: currentColor;
svg {
transform: rotate(-180deg);
}
}
}
@include bem.e(list) {
margin-top: 0;
background-color: currentColor;
margin-bottom: 0;
padding-top: 0;
padding-bottom: 0;
&[aria-hidden='true'] {
display: none;
}
@include breakpoint.bp-up(lg) {
margin-top: func.rhythm(1);
background-color: transparent;
border-bottom: 0;
&[aria-hidden='true'] {
display: initial;
}
}
@include bem.e(topic) {
margin-top: 0;
margin-bottom: 0;
border-bottom: 1px solid currentColor;
font-family: var.$font-family-headings;
> a {
padding: func.rhythm(1) func.rhythm(3.5);
}
@include breakpoint.bp-up(lg) {
margin-top: func.to_rem(-2px);
margin-bottom: func.rhythm(1);
padding: func.rhythm(1) func.rhythm(1);
border-bottom: 0;
> a {
padding: 0;
}
}
}
@include bem.e(item) {
margin: 0;
border-bottom: 1px solid currentColor;
&:last-child {
border-bottom: 0;
}
@include breakpoint.bp-up(lg) {
padding: func.rhythm(1) func.rhythm(1);
margin-bottom: func.rhythm(0.5);
border-bottom: 0;
}
}
@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;
width: 100%;
color: colors.$color-cyberspace;
text-decoration: none;
padding: func.rhythm(1) func.rhythm(3.5);
@include bem.m(sub-level) {
padding: func.rhythm(1) func.rhythm(5);
}
&:hover {
&:not(span) {
text-decoration: underline;
}
}
@include breakpoint.bp-up(lg) {
padding: 0;
}
@include bem.m(large) {
display: block;
width: 100%;
padding: func.rhythm(1.5) func.rhythm(2);
font-family: var.$font-family-headings;
white-space: nowrap;
@include breakpoint.bp-up(lg) {
padding: 0;
font-size: func.to_rem(23px);
}
}
@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-page');
if (button && megaMenu.getAttribute('aria-hidden') === 'false') {
hideMegaMenu();
}
}
if (megaMenuButton && megaMenu) {
megaMenuButton.addEventListener('click', toggleMegaMenu);
document.addEventListener('mouseup', handleMouseUp);
}
/**
* Toggle the mega menu submenus
*/
function collapse(toggle) {
var id = toggle.getAttribute('data-a11y-toggle');
var collapsibleBox = document.getElementById(id);
collapsibleBox.setAttribute('aria-hidden', true);
toggle.setAttribute('aria-expanded', false);
}
function collapseAll(event) {
if(toggles) {
toggles
.filter(function (toggle) {
return toggle !== event.target;
})
.forEach(collapse);
}
}
const toggles = Array.prototype.slice.call(
document.querySelectorAll('.js-menu-toggles [data-a11y-toggle]')
);
if(toggles) {
toggles.forEach(function(toggle) {
toggle.addEventListener('click', collapseAll);
});
}
/**
* Handle mega menu and ReadSpeaker when clicking ReadSpeaker button in mega menu
*/
const closeMegaMenuBtn = document.querySelector('.js-close-mega-menu');
if(closeMegaMenuBtn) {
document.addEventListener('DOMContentLoaded', () => {
closeMegaMenuBtn.addEventListener('click', function() {
document.querySelector('.js-toggle-mega-menu').click();
document.getElementById('readspeakerMenuItem').classList.remove('u-hide-md');
document.getElementById('readspeakerBtn').click();
document.querySelector('#readspeakerBtn [class*=a-main-menu__list__text]').classList.add('u-hide-md');
document.querySelector('#readspeakerBtn [class*=a-button--icon]').classList.add('u-hide-md');
});
});
}
The default mega menu includes both the domain search and the site search. The domain search is only visible on smaller screens when the global domain search is hidden.