<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 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 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 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 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"
            }
          ]
        }
      ]
    }
  ],
  "domain_search": true
}
  • Content:
    @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);
    			}
    		}
    	}
    }
    
  • URL: /components/raw/mega-menu/_mega-menu.scss
  • Filesystem Path: src/organisms/mega-menu/_mega-menu.scss
  • Size: 5.8 KB
  • Content:
    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);
    }
    
    /**
     * 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 .iis-a-main-menu__list__text').classList.add('u-hide-md');
    			document.querySelector('#readspeakerBtn .iis-a-button--icon').classList.add('u-hide-md');
    		});
    	});
    }
    
  • URL: /components/raw/mega-menu/mega-menu.js
  • Filesystem Path: src/organisms/mega-menu/mega-menu.js
  • Size: 6.8 KB

Mega menu

The domain search is only visisble on smaller screens when the global domain search is hidden.