<div class="wrapper-fluid o-mega-menu" aria-hidden="false" id="mega-menu">
    <nav class="wrapper o-mega-menu__wrapper" aria-label="Megameny">
        <div class="row align-items-start">
            <div class="grid-18 grid-lg">
                <a href="#" class="o-mega-menu__link o-mega-menu__link--large">Domäner</a>
                <dl class="o-mega-menu__list">

                    <dd class="o-mega-menu__list__item"><a href="#" class="o-mega-menu__link">Är domänen ledig?</a></dd>
                    <dd class="o-mega-menu__list__item"><a href="#" class="o-mega-menu__link">Regler och beskrivning av whois</a></dd>
                    <dd class="o-mega-menu__list__item"><a href="#" class="o-mega-menu__link">Registrera en domän</a></dd>
                    <dd class="o-mega-menu__list__item"><a href="#" class="o-mega-menu__link">Villkor och regler</a></dd>
                    <dd class="o-mega-menu__list__item"><a href="#" class="o-mega-menu__link">.se-/.nu-domäner som snart kan bli lediga</a></dd>
                    <dd class="o-mega-menu__list__item"><a href="#" class="o-mega-menu__link">Tips innan du registrerar en domän/Inspiration och tips</a></dd>
                    <dd class="o-mega-menu__list__item"><a href="#" class="o-mega-menu__link">Återförsäljare</a></dd>
                    <dd class="o-mega-menu__list__item"><a href="#" class="o-mega-menu__link">Kontakta din kundtjänst</a></dd>
                    <dd class="o-mega-menu__list__item"><a href="#" class="o-mega-menu__link">Så fungerar ett domännamn</a></dd>
                    <dd class="o-mega-menu__list__item"><a href="#" class="o-mega-menu__link">Oseriösa metoder</a></dd>
                    <dd class="o-mega-menu__list__item"><a href="#" class="o-mega-menu__link">Tvistlösning</a></dd>
                    <dd class="o-mega-menu__list__item"><a href="#" class="o-mega-menu__link">Domännamnsbranschen</a></dd>
                    <dd class="o-mega-menu__list__item"><a href="#" class="o-mega-menu__link">Tjänster</a></dd>
                    <dd class="o-mega-menu__list__item"><a href="#" class="o-mega-menu__link">Domänstatistik</a></dd>
                </dl>
            </div>
            <div class="grid-18 grid-lg">
                <a href="#" class="o-mega-menu__link o-mega-menu__link--large">Kunskap</a>
                <dl class="o-mega-menu__list">
                    <dt class="o-mega-menu__list__topic"><a href="#" class="o-mega-menu__link">För skolan</a></dt>
                    <dd class="o-mega-menu__list__item"><a href="#" class="o-mega-menu__link">Digitala lektioner</a></dd>
                    <dd class="o-mega-menu__list__item"><a href="#" class="o-mega-menu__link">Lärarfortbildning</a></dd>
                    <dd class="o-mega-menu__list__item"><a href="#" class="o-mega-menu__link">Fördjupning</a></dd>
                    <dt class="o-mega-menu__list__topic"><a href="#" class="o-mega-menu__link">För samhället</a></dt>
                    <dd class="o-mega-menu__list__item"><a href="#" class="o-mega-menu__link">Svenskarna och internet</a></dd>
                    <dd class="o-mega-menu__list__item"><a href="#" class="o-mega-menu__link">Projekt internetaccess</a></dd>
                    <dd class="o-mega-menu__list__item"><a href="#" class="o-mega-menu__link">Federationers</a></dd>
                </dl>
            </div>
            <div class="grid-18 grid-lg">
                <a href="#" class="o-mega-menu__link o-mega-menu__link--large">Mötesplatser</a>
                <dl class="o-mega-menu__list">

                    <dd class="o-mega-menu__list__item"><a href="#" class="o-mega-menu__link">Internetdagarna<svg class="icon o-mega-menu__link__icon">
                                <use xlink:href="#icon-external-link"></use>
                            </svg>
                        </a></dd>
                    <dd class="o-mega-menu__list__item"><a href="#" class="o-mega-menu__link">Goto 10<svg class="icon o-mega-menu__link__icon">
                                <use xlink:href="#icon-external-link"></use>
                            </svg>
                        </a></dd>
                    <dd class="o-mega-menu__list__item"><a href="#" class="o-mega-menu__link">Forskningssamarbeten<svg class="icon o-mega-menu__link__icon">
                                <use xlink:href="#icon-external-link"></use>
                            </svg>
                        </a></dd>
                    <dd class="o-mega-menu__list__item"><a href="#" class="o-mega-menu__link">Internetstiftelsen stöttar</a></dd>
                    <dd class="o-mega-menu__list__item"><a href="#" class="o-mega-menu__link">Investeringar<svg class="icon o-mega-menu__link__icon">
                                <use xlink:href="#icon-external-link"></use>
                            </svg>
                        </a></dd>
                </dl>
            </div>
            <div class="grid-18 grid-lg">
                <a href="#" class="o-mega-menu__link o-mega-menu__link--large">Om oss</a>
                <dl class="o-mega-menu__list">
                    <dt class="o-mega-menu__list__topic"><a href="#" class="o-mega-menu__link">Presentation</a></dt>
                    <dd class="o-mega-menu__list__item"><a href="#" class="o-mega-menu__link">Jobba hos oss<svg class="icon o-mega-menu__link__icon">
                                <use xlink:href="#icon-external-link"></use>
                            </svg>
                        </a></dd>
                    <dd class="o-mega-menu__list__item"><a href="#" class="o-mega-menu__link">Press</a></dd>
                    <dd class="o-mega-menu__list__item"><a href="#" class="o-mega-menu__link">Pressbilder och fotografier</a></dd>
                    <dd class="o-mega-menu__list__item"><a href="#" class="o-mega-menu__link">Kontakt</a></dd>
                </dl>
            </div>
            <div class="grid-18 grid-lg">
                <a href="#" class="o-mega-menu__link o-mega-menu__link--large">English</a>
                <dl class="o-mega-menu__list">

                    <dd class="o-mega-menu__list__item"><a href="#" class="o-mega-menu__link">Lorem ipsum</a></dd>
                    <dd class="o-mega-menu__list__item"><a href="#" class="o-mega-menu__link">Dolor sit amet</a></dd>
                    <dd class="o-mega-menu__list__item"><a href="#" class="o-mega-menu__link">Aenean sodales vestibulum</a></dd>
                </dl>
            </div>
        </div>
    </nav>
</div>
<div class="wrapper-fluid o-mega-menu{{#if modifier}} {{modifier}}{{/if}}" aria-hidden="{{hidden}}" id="{{id}}">
	{{#if domain_search}}
		{{> @domain-search hidden="true" id="domain-search-2" input_id="search-domain-2" label="sök en .se- eller .nu-domän" addidional_classes="o-domain-search--is-in-mega-menu"}}
	{{/if}}
	<nav class="wrapper o-mega-menu__wrapper" aria-label="Megameny">
		<div class="row align-items-start">
			{{#each columns}}
				<div class="grid-18 grid-lg">
					<a href="#" class="o-mega-menu__link o-mega-menu__link--large">{{headline}}</a>
					<dl class="o-mega-menu__list">
						{{#each topics}}
							{{#if topic}}<dt class="o-mega-menu__list__topic"><a href="#" class="o-mega-menu__link">{{topic}}</a></dt>{{/if}}
							{{#each items}}
								<dd class="o-mega-menu__list__item"><a href="#" class="o-mega-menu__link">{{item}}{{#if external}}{{> @icon id="external-link" additional_classes="o-mega-menu__link__icon"}}{{/if}}</a></dd>
							{{/each}}
						{{/each}}
					</dl>
				</div>
			{{/each}}
		</div>
	</nav>
	{{#if search}}
	<div class="row o-mega-menu__search__wrapper background-jade">
		<div class="wrapper">
			<div class="row align-items-center">
				<div class="grid-auto u-p-r-0">
					<span class="o-search__icon">
						<svg class="icon">
							<use xlink:href="#icon-search"></use>
						</svg>
					</span>
				</div>
				<form role="search" method="get" action="/" class="grid u-p-l-0 display-flex">
					<label for="" class="u-visuallyhidden">sök internetstiftelsen.se</label>
					<input type="search" name="s" class="o-search__input" value="" placeholder="sök internetstiftelsen.se" aria-describedby="number-of-hits" id="">
					<button id="o-search-result-submit" type="submit" class="a-button a-button a-button--large-responsive o-search__submit">
						<span class="a-button__text">Sök</span>
					</button>
				</form>
			</div>
		</div>
	</div>
	{{/if}}
</div>
{
  "hidden": "false",
  "id": "mega-menu",
  "modifier": "",
  "columns": [
    {
      "headline": "Domäner",
      "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",
      "topics": [
        {
          "topic": "För skolan",
          "items": [
            {
              "item": "Digitala lektioner"
            },
            {
              "item": "Lärarfortbildning"
            },
            {
              "item": "Fördjupning"
            }
          ]
        },
        {
          "topic": "För samhället",
          "items": [
            {
              "item": "Svenskarna och internet"
            },
            {
              "item": "Projekt internetaccess"
            },
            {
              "item": "Federationers"
            }
          ]
        }
      ]
    },
    {
      "headline": "Mötesplatser",
      "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",
      "topics": [
        {
          "topic": "Presentation",
          "items": [
            {
              "item": "Jobba hos oss",
              "external": true
            },
            {
              "item": "Press"
            },
            {
              "item": "Pressbilder och fotografier"
            },
            {
              "item": "Kontakt"
            }
          ]
        }
      ]
    },
    {
      "headline": "English",
      "topics": [
        {
          "topic": "",
          "items": [
            {
              "item": "Lorem ipsum"
            },
            {
              "item": "Dolor sit amet"
            },
            {
              "item": "Aenean sodales vestibulum"
            }
          ]
        }
      ]
    }
  ]
}
  • 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: baseline;
    		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;
    			flex-shrink: 0;
    			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 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);
    }
    
  • URL: /components/raw/mega-menu/mega-menu.js
  • Filesystem Path: src/organisms/mega-menu/mega-menu.js
  • Size: 5.5 KB

Mega menu

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