Internetstiftelsen Styleguide

Mega Menu: With Both Searches 

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

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

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

                    <dd class="o-mega-menu__list__item"><a href="#" class="o-mega-menu__link">Lorem ipsum</a></dd>
                    <dd class="o-mega-menu__list__item"><a href="#" class="o-mega-menu__link">Dolor sit amet</a></dd>
                    <dd class="o-mega-menu__list__item"><a href="#" class="o-mega-menu__link">Aenean sodales vestibulum</a></dd>
                </dl>
            </div>
        </div>
    </nav>
    <div class="row o-mega-menu__search__wrapper background-jade">
        <div class="wrapper">
            <div class="row align-items-center">
                <div class="grid-auto u-p-r-0">
                    <span class="o-search__icon">
                        <svg class="icon">
                            <use xlink:href="#icon-search"></use>
                        </svg>
                    </span>
                </div>
                <form role="search" method="get" action="/" class="grid u-p-l-0 display-flex">
                    <label for="" class="u-visuallyhidden">sök internetstiftelsen.se</label>
                    <input type="search" name="s" class="o-search__input" value="" placeholder="sök internetstiftelsen.se" aria-describedby="number-of-hits" id="">
                    <button id="o-search-result-submit" type="submit" class="a-button a-button a-button--large-responsive o-search__submit">
                        <span class="a-button__text">Sök</span>
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>
 
<div class="wrapper-fluid o-mega-menu{{#if modifier}} {{modifier}}{{/if}}" aria-hidden="{{hidden}}" id="{{id}}">
	{{#if domain_search}}
		{{> @domain-search hidden="true" id="domain-search-2" input_id="search-domain-2" label="sök en .se- eller .nu-domän" addidional_classes="o-domain-search--is-in-mega-menu"}}
	{{/if}}
	<nav class="wrapper o-mega-menu__wrapper" aria-label="Megameny">
		<div class="row align-items-start">
			{{#each columns}}
				<div class="grid-18 grid-lg">
					<a href="#" class="o-mega-menu__link o-mega-menu__link--large">{{headline}}</a>
					<dl class="o-mega-menu__list">
						{{#each topics}}
							{{#if topic}}<dt class="o-mega-menu__list__topic"><a href="#" class="o-mega-menu__link">{{topic}}</a></dt>{{/if}}
							{{#each items}}
								<dd class="o-mega-menu__list__item"><a href="#" class="o-mega-menu__link">{{item}}{{#if external}}{{> @icon id="external-link" additional_classes="o-mega-menu__link__icon"}}{{/if}}</a></dd>
							{{/each}}
						{{/each}}
					</dl>
				</div>
			{{/each}}
		</div>
	</nav>
	{{#if search}}
		<div class="row o-mega-menu__search__wrapper background-jade">
			<div class="wrapper">
				<div class="row align-items-center">
					<div class="grid-auto u-p-r-0">
					<span class="o-search__icon">
						<svg class="icon">
							<use xlink:href="#icon-search"></use>
						</svg>
					</span>
					</div>
					<form role="search" method="get" action="/" class="grid u-p-l-0 display-flex">
						<label for="" class="u-visuallyhidden">sök internetstiftelsen.se</label>
						<input type="search" name="s" class="o-search__input" value="" placeholder="sök internetstiftelsen.se" aria-describedby="number-of-hits" id="">
						<button id="o-search-result-submit" type="submit" class="a-button a-button a-button--large-responsive o-search__submit">
							<span class="a-button__text">Sök</span>
						</button>
					</form>
				</div>
			</div>
		</div>
	{{/if}}
</div>
 
{
  "hidden": true,
  "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,
  "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(middlegroundImportant);
	padding-right: 0;
	padding-left: 0;
	transition: transform 0.25s ease-out;
	background-color: colors.$color-jade-light;

	&[aria-hidden='true'] {
		display: none;
		transform: translateY(-115%);
	}

	&[aria-hidden='false'] {
		transform: translateY(0);

		+ {
			@include mixin.organism(domain-search) {
				display: none;
			}
		}
	}

	&[tabindex='-1'] {
		a,
		button,
		input {
			visibility: hidden;
		}
	}

	@include bem.e(wrapper) {
		padding-top: func.rhythm(3);

		@include breakpoint.bp-down(md) {
			padding-right: func.rhythm(1);
			padding-left: func.rhythm(1);
		}
	}

	@include bem.e(list) {
		margin-top: func.rhythm(1);

		@include bem.e(topic) {
			margin-top: func.rhythm(2);
			margin-bottom: func.rhythm(0.5);
			padding: func.rhythm(1) func.rhythm(1);
			border-bottom: 1px solid $border-color;
			font-family: var.$font-family-headings;

			&:first-child {
				margin-top: 0;
			}
		}

		@include bem.e(item) {
			margin: 0 0 func.rhythm(0.5) 0;
			padding: func.rhythm(1) func.rhythm(1);

			& + & {
				border-top: 1px solid $border-color;
			}
		}

		@include breakpoint.bp-up(lg) {

			@include bem.e(topic) {
				padding: 0;
				border-bottom: 0;
			}

			@include bem.e(item) {
				margin-bottom: func.rhythm(1);
				padding: 0;
				line-height: 1.3;

				& + & {
					border-top: 0;
				}
			}
		}
	}

	@include bem.e(link) {
		display: inline-flex;
		align-items: baseline;
		color: colors.$color-cyberspace;
		text-decoration: none;

		&:hover {
			&:not(span) {
				text-decoration: underline;
			}
		}

		@include bem.m(large) {
			display: block;
			padding: 0 func.rhythm(1);
			font-family: var.$font-family-headings;
			font-size: func.to_rem(23px);
			white-space: nowrap;

			@include breakpoint.bp-up(lg) {
				padding: 0;
			}
		}

		@include bem.e(icon) {
			width: var.$icon-size-smallest;
			height: var.$icon-size-smallest;
			flex-shrink: 0;
			margin-left: func.rhythm(0.5);
		}
	}

	@include breakpoint.bp-up(lg) {
		padding-bottom: 0;

		@include bem.e(link) {
			@include bem.m(large) {
				padding: 0;
			}
		}
	}

	@include bem.e(search) {
		@include bem.e(wrapper) {
			padding: func.rhythm(2) func.rhythm(1);

			@include breakpoint.bp-up(md) {
				padding: func.rhythm(3) func.rhythm(2);
			}
		}
	}
}
  • URL: /components/raw/mega-menu/_mega-menu.scss
  • Filesystem Path: src/organisms/mega-menu/_mega-menu.scss
  • Size: 2.9 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.