Internetstiftelsen Styleguide

Context Menu: Default 

<nav class="m-context-menu js-context-menu">
    <button type="button" class="a-button a-button--icon a-button--transparent a-button--icon js-context-menu-btn" aria-expanded="false" data-a11y-toggle="contextMenu" aria-controls="contextMenu">
        <span class="a-button__text">Exportera</span>
        <svg class="icon a-button__icon">
            <use xlink:href="#icon-download"></use>
        </svg>
    </button>
    <ul class="m-context-menu__list u-list-clean" id="contextMenu">
        <li class="m-context-menu__item"><a href="#">PDF</a></li>
        <li class="m-context-menu__item"><a href="#">JSON</a></li>
        <li class="m-context-menu__item"><a href="#">PNG</a></li>
        <li class="m-context-menu__item"><a href="#">Excel</a></li>
    </ul>
</nav>
 
<nav class="m-context-menu js-context-menu">
	<button type="button" class="a-button a-button--icon a-button--transparent a-button--icon js-context-menu-btn" aria-expanded="false" data-a11y-toggle="{{controls}}" aria-controls="{{controls}}" {{#if outsideClick}}data-close-on-outside-click="true"{{/if}}>
		<span class="a-button__text">Exportera</span>
		<svg class="icon a-button__icon">
			<use xlink:href="#icon-download"></use>
		</svg>
	</button>
	<ul class="m-context-menu__list u-list-clean" id="{{controls}}" {{#unless focusTrap}}data-focus-trap="false"{{/unless}}>
		<li class="m-context-menu__item"><a href="#">PDF</a></li>
		<li class="m-context-menu__item"><a href="#">JSON</a></li>
		<li class="m-context-menu__item"><a href="#">PNG</a></li>
		<li class="m-context-menu__item"><a href="#">Excel</a></li>
	</ul>
</nav>
 
{
  "name": "Context menu",
  "controls": "contextMenu",
  "focusTrap": true,
  "outsideClick": false
}
  • Content: 
    @charset 'UTF-8';

@include molecule(context-menu) {
	display: inline-flex;
	position: relative;
	flex-direction: column;

	button {
		span {
			pointer-events: none;
		}
	}

	@include e(list) {

		@extend %box-shadow;

		position: absolute;
		top: 100%;
		left: rhythm(1);
		width: auto;
		min-width: calc(100% - #{rhythm(1)});
		border: 1px solid $color-concrete;
		background-color: $color-snow;
		white-space: nowrap;

		&[aria-hidden='true'],
		&:not([aria-hidden]) {
			display: none;
		}
	}

	@include e(item) {
		padding: 0;

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

		a {
			display: block;
			padding: rhythm(1) rhythm(2);
			color: $color-cyberspace;
			text-decoration: none;

			&:hover,
			&:focus {
				background-color: $color-ash;
			}
		}
	}
}

.no-js {
	@include molecule(context-menu) {
		@include e(list) {
			display: initial;
		}
	}
}
  • URL: /components/raw/context-menu/_context-menu.scss
  • Filesystem Path: src/molecules/context-menu/_context-menu.scss
  • Size: 874 Bytes
  • Content: 
    const elements = document.querySelectorAll('[data-close-on-outside-click]');

function closeElement(element) {
	document.addEventListener('mouseup', (e) => {
		const childElement = element.nextElementSibling;

		/* Close menu on all clicks except the trigger button,
		 the menu and it's child elements and if the menu is actually open. */
		if (!element.contains(e.target) && !childElement.contains(e.target) && element.getAttribute('aria-expanded') === 'true') {
			element.click();
		}
	});
}

if (elements) {
	[].forEach.call(elements, closeElement);
}
  • URL: /components/raw/context-menu/context-menu.js
  • Filesystem Path: src/molecules/context-menu/context-menu.js
  • Size: 557 Bytes

No notes defined.