<div class="wrapper-fluid o-mega-menu" aria-hidden="false" id="mega-menu">
    <div class="wrapper-fluid o-domain-search o-domain-search--is-in-mega-menu" id="domain-search-2" aria-hidden="true">
        <div class="wrapper u-p-x-0">
            <div class="grid">
                <div class="display-flex align-items-center">
                    <div class="grid display-flex u-p-x-0">
                        <label for="search-domain-2" class="u-visuallyhidden">sök en .se- eller .nu-domän</label>
                        <input type="search" class="o-domain-search__input js-search-domain-input" autocomplete="off" placeholder="sök en .se- eller .nu-domän" id="search-domain-2">
                        <button id="o-domain-search-submit""
								type=" submit" class="a-button a-button--secondary o-domain-search__submit">
                            <span class="a-button__text"">Sök domän</span>
							</button>
						</div>
					</div>
					<div class=" row o-domain-search__list-container">
                                <div class="grid">
                                    <ul class="o-domain-search__list u-list-clean row">
                                        <li class="grid-18 grid-md-7 grid-xl-4">
                                            <a href="https://old.iis.se/domaner/registrera/tips/">Hur registrerar jag en domän?
                                                <svg class="icon o-mega-menu__link__icon">
                                                    <use xlink:href="#icon-external-link"></use>
                                                </svg>
                                            </a>
                                        </li>
                                        <li class="grid-18 grid-md-10 grid-xl-4">
                                            <a href="https://old.iis.se/domaner/kontakta-kundtjanst/?q=">
                                                Ändra mina befintliga uppgifter
                                                <svg class="icon o-mega-menu__link__icon">
                                                    <use xlink:href="#icon-external-link"></use>
                                                </svg>
                                            </a>
                                        </li>
                                        <li class="grid-sm-18 grid-md-7 grid-xl-4">
                                            <a href="https://old.iis.se/domaner/aterforsaljare/">
                                                Hitta återförsäljare av domäner
                                                <svg class="icon o-mega-menu__link__icon">
                                                    <use xlink:href="#icon-external-link"></use>
                                                </svg>
                                            </a>
                                        </li>
                                        <li class="grid-18 grid-md-10 grid-xl-4">
                                            <a href="https://old.iis.se/domaner/free/?q=">
                                                Ta reda på ägaren av ett domännamn
                                                <svg class="icon o-mega-menu__link__icon">
                                                    <use xlink:href="#icon-external-link"></use>
                                                </svg>
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="wrapper o-mega-menu__wrapper">
            <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">
                        <dt class="o-mega-menu__list__topic"><a href="#" class="o-mega-menu__link">Är domänen ledig?</a></dt>
                        <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>
                        <dt class="o-mega-menu__list__topic"><a href="#" class="o-mega-menu__link">Domännamnsbranschen</a></dt>
                        <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">Federationer</a></dd>
                        <dt class="o-mega-menu__list__topic"><a href="#" class="o-mega-menu__link">För allmänheten</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>
                    </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 <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">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</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 biografier</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>
        </div>
    </div>
<div class="wrapper-fluid o-mega-menu" 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}}
	<div class="wrapper o-mega-menu__wrapper">
		<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">
					<dt class="o-mega-menu__list__topic"><a href="#" class="o-mega-menu__link">Är domänen ledig?</a></dt>
					<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>
					<dt class="o-mega-menu__list__topic"><a href="#" class="o-mega-menu__link">Domännamnsbranschen</a></dt>
					<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">Federationer</a></dd>
					<dt class="o-mega-menu__list__topic"><a href="#" class="o-mega-menu__link">För allmänheten</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>
				</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 {{> @icon id="external-link" additional_classes="o-mega-menu__link__icon"}}</a></dd>
					<dd class="o-mega-menu__list__item"><a href="#" class="o-mega-menu__link">Goto 10 {{> @icon id="external-link" additional_classes="o-mega-menu__link__icon"}}</a></dd>
					<dd class="o-mega-menu__list__item"><a href="#" class="o-mega-menu__link">Forskningssamarbeten {{> @icon id="external-link" additional_classes="o-mega-menu__link__icon"}}</a></dd>
					<dd class="o-mega-menu__list__item"><a href="#" class="o-mega-menu__link">Internetstiftelsen stöttar {{> @icon id="external-link" additional_classes="o-mega-menu__link__icon"}}</a></dd>
					<dd class="o-mega-menu__list__item"><a href="#" class="o-mega-menu__link">Investeringar {{> @icon id="external-link" additional_classes="o-mega-menu__link__icon"}}</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</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 biografier</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>
	</div>
	{{#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": "mega-menu",
  "domain_search": true
}
  • Content:
    $border-color: darken($color-jade, 5%);
    
    @include organism(mega-menu) {
    	z-index: z_index(middlegroundImportant);
    	padding-right: 0;
    	padding-left: 0;
    	transition: transform 0.25s ease-out;
    	background-color: $color-jade-light;
    
    	&[aria-hidden='true'] {
    		display: none;
    		transform: translateY(-115%);
    	}
    
    	&[aria-hidden='false'] {
    		transform: translateY(0);
    
    		+ {
    			@include organism(domain-search) {
    				display: none;
    			}
    		}
    	}
    
    	&[tabindex='-1'] {
    		a,
    		button,
    		input {
    			visibility: hidden;
    		}
    	}
    
    	@include e(wrapper) {
    		padding-top: rhythm(3);
    
    		@include bp-down(md) {
    			padding-right: rhythm(1);
    			padding-left: rhythm(1);
    		}
    	}
    
    	@include e(list) {
    		margin-top: rhythm(1);
    
    		@include e(topic) {
    			margin-top: rhythm(2);
    			margin-bottom: rhythm(0.5);
    			padding: rhythm(1) rhythm(1);
    			border-bottom: 1px solid $border-color;
    			font-family: $font-family-headings;
    
    			&:first-child {
    				margin-top: 0;
    			}
    		}
    
    		@include e(item) {
    			margin: 0 0 rhythm(0.5) 0;
    			padding: rhythm(1) rhythm(1);
    
    			& + & {
    				border-top: 1px solid $border-color;
    			}
    		}
    
    		@include bp-up(lg) {
    
    			@include e(topic) {
    				padding: 0;
    				border-bottom: 0;
    			}
    
    			@include e(item) {
    				margin-bottom: rhythm(1);
    				padding: 0;
    				line-height: 1.3;
    
    				& + & {
    					border-top: 0;
    				}
    			}
    		}
    	}
    
    	@include e(link) {
    		display: inline-flex;
    		align-items: center;
    		color: $color-cyberspace;
    		text-decoration: none;
    
    		&:hover {
    			&:not(span) {
    				text-decoration: underline;
    			}
    		}
    
    		@include m(large) {
    			display: block;
    			padding: 0 rhythm(1);
    			font-family: $font-family-headings;
    			font-size: rem(23px);
    			white-space: nowrap;
    
    			@include bp-up(lg) {
    				padding: 0;
    			}
    		}
    
    		@include e(icon) {
    			width: $icon-size-smallest;
    			height: $icon-size-smallest;
    			margin-top: rem(2px);
    			margin-left: rhythm(0.5);
    		}
    	}
    
    	@include bp-up(lg) {
    		padding-bottom: 0;
    
    		@include e(link) {
    			@include m(large) {
    				padding: 0;
    			}
    		}
    	}
    
    	@include e(search) {
    		@include e(wrapper) {
    			padding: rhythm(2) rhythm(1);
    
    			@include bp-up(md) {
    				padding: rhythm(3) rhythm(2);
    			}
    		}
    	}
    }
    
  • URL: /components/raw/mega-menu/_mega-menu.scss
  • Filesystem Path: src/organisms/mega-menu/_mega-menu.scss
  • Size: 2.1 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 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;
    
    	megaMenu.style.cssText = `
            position: absolute;
            top: ${headerRect.top}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);
    }
    
  • URL: /components/raw/mega-menu/mega-menu.js
  • Filesystem Path: src/organisms/mega-menu/mega-menu.js
  • Size: 5.2 KB

Mega menu

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