<div class="mega-menu">
<ul class="mega-menu__list">
<li class="mega-menu__item mega-menu__item--parent">
<a href="/furniture" class="mega-menu__link">
Furniture
</a>
<ul class="mega-menu__inner-list mega-menu__inner-list--level1">
<li class="mega-menu__inner-item mega-menu__inner-item--level1 mega-menu__inner-item--image">
<a class="mega-menu__inner-link" href="#">
<div class="lazyload-wrapper ">
<img class="image lazyload " src="" data-src="/images/megamenu/menu-image.jpg" alt="">
</div>
<button class="button button--category" type="button" aria-label="click to do something">
Bekijk categorie
<svg class="icon button__icon" role="img">
<title>angle-right</title>
<use xlink:href="/images/icons-sprite.svg#angle-right"></use>
</svg>
</button>
</a>
</li>
<li class="mega-menu__inner-item mega-menu__inner-item--level1 mega-menu__inner-item--parent">
<a href="/example" class="mega-menu__inner-link">
Example
</a>
<ul class="list mega-menu__inner-list mega-menu__inner-list--level2">
<li class="list__item mega-menu__inner-item mega-menu__inner-item--level2">
<a href="" class="link mega-menu__inner-link">
</a>
</li>
<li class="list__item mega-menu__inner-item mega-menu__inner-item--level2">
<a href="" class="link mega-menu__inner-link">
Category name
</a>
</li>
<li class="list__item mega-menu__inner-item mega-menu__inner-item--level2">
<a href="" class="link mega-menu__inner-link">
</a>
</li>
<li class="list__item mega-menu__inner-item mega-menu__inner-item--level2">
<a href="" class="link mega-menu__inner-link">
Category long name
</a>
</li>
<li class="list__item mega-menu__inner-item mega-menu__inner-item--level2">
<a href="" class="link mega-menu__inner-link">
</a>
</li>
</ul>
</li>
<li class="mega-menu__inner-item mega-menu__inner-item--level1 mega-menu__inner-item--parent">
<a href="/example" class="mega-menu__inner-link">
Example2
</a>
<ul class="list mega-menu__inner-list mega-menu__inner-list--level2">
<li class="list__item mega-menu__inner-item mega-menu__inner-item--level2">
<a href="" class="link mega-menu__inner-link">
Category name
</a>
</li>
<li class="list__item mega-menu__inner-item mega-menu__inner-item--level2">
<a href="" class="link mega-menu__inner-link">
</a>
</li>
<li class="list__item mega-menu__inner-item mega-menu__inner-item--level2">
<a href="" class="link mega-menu__inner-link">
</a>
</li>
<li class="list__item mega-menu__inner-item mega-menu__inner-item--level2">
<a href="" class="link mega-menu__inner-link">
Category long very name
</a>
</li>
<li class="list__item mega-menu__inner-item mega-menu__inner-item--level2">
<a href="" class="link mega-menu__inner-link">
</a>
</li>
<li class="list__item mega-menu__inner-item mega-menu__inner-item--level2">
<a href="" class="link mega-menu__inner-link">
Category long very name
</a>
</li>
</ul>
</li>
<li class="mega-menu__inner-item mega-menu__inner-item--level1 mega-menu__inner-item--parent">
<a href="/example" class="mega-menu__inner-link">
Example3
</a>
<ul class="list mega-menu__inner-list mega-menu__inner-list--level2">
<li class="list__item mega-menu__inner-item mega-menu__inner-item--level2">
<a href="" class="link mega-menu__inner-link">
Category name
</a>
</li>
<li class="list__item mega-menu__inner-item mega-menu__inner-item--level2">
<a href="" class="link mega-menu__inner-link">
</a>
</li>
<li class="list__item mega-menu__inner-item mega-menu__inner-item--level2">
<a href="" class="link mega-menu__inner-link">
</a>
</li>
<li class="list__item mega-menu__inner-item mega-menu__inner-item--level2">
<a href="" class="link mega-menu__inner-link">
Category long very name
</a>
</li>
<li class="list__item mega-menu__inner-item mega-menu__inner-item--level2">
<a href="" class="link mega-menu__inner-link">
</a>
</li>
<li class="list__item mega-menu__inner-item mega-menu__inner-item--level2">
<a href="" class="link mega-menu__inner-link">
Category long very name
</a>
</li>
</ul>
</li>
<li class="mega-menu__inner-item mega-menu__inner-item--level1 mega-menu__inner-item--parent">
<a href="/example" class="mega-menu__inner-link">
Example long name
</a>
<ul class="list mega-menu__inner-list mega-menu__inner-list--level2">
<li class="list__item mega-menu__inner-item mega-menu__inner-item--level2">
<a href="" class="link mega-menu__inner-link">
Category name
</a>
</li>
<li class="list__item mega-menu__inner-item mega-menu__inner-item--level2">
<a href="" class="link mega-menu__inner-link">
</a>
</li>
<li class="list__item mega-menu__inner-item mega-menu__inner-item--level2">
<a href="" class="link mega-menu__inner-link">
</a>
</li>
<li class="list__item mega-menu__inner-item mega-menu__inner-item--level2">
<a href="" class="link mega-menu__inner-link">
Category long very name
</a>
</li>
<li class="list__item mega-menu__inner-item mega-menu__inner-item--level2">
<a href="" class="link mega-menu__inner-link">
</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="mega-menu__item">
<a href="/accessories" class="mega-menu__link">
Accessories
</a>
</li>
<li class="mega-menu__item">
<a href="/world-of" class="mega-menu__link">
World of
</a>
</li>
</ul>
</div>
<script src="/components/raw/mega-menu/mega-menu.js"></script>
<div class="mega-menu">
<ul class="mega-menu__list">
{{#each list}}
<li class="{{ class }}">
<a href="{{ link }}" class="mega-menu__link">
{{ text }}
</a>
{{#if nestedList}}
<ul class="mega-menu__inner-list mega-menu__inner-list--level1">
{{#each nestedList as |item| }}
<li class="{{ item.class }}">
{{#if item.image}}
<a
class="{{ item.linkClass }}"
href="{{ item.link }}"
>
{{ render '@image' menuImage }}
{{ render '@button--category' }}
</a>
{{else}}
<a
href="{{ item.link }}"
class="{{ item.linkClass }}"
>
{{ item.heading }}
</a>
{{#if item.list}}
{{ render '@list--link' item.list merge=true }}
{{/if}}
{{/if}}
</li>
{{/each}}
</ul>
{{/if}}
</li>
{{/each}}
</ul>
</div>
<script src="{{static 'mega-menu.js' }}"></script>
{
"list": [
{
"class": "mega-menu__item mega-menu__item--parent",
"text": "Furniture",
"link": "/furniture",
"nestedList": [
{
"image": true,
"class": "mega-menu__inner-item mega-menu__inner-item--level1 mega-menu__inner-item--image",
"linkClass": "mega-menu__inner-link",
"link": "#",
"menuImage": {
"dataSrc": "/images/megamenu/menu-image.jpg"
}
},
{
"class": "mega-menu__inner-item mega-menu__inner-item--level1 mega-menu__inner-item--parent",
"linkClass": "mega-menu__inner-link",
"heading": "Example",
"link": "/example",
"list": {
"class": "mega-menu__inner-list mega-menu__inner-list--level2",
"elements": [
{
"class": "mega-menu__inner-item mega-menu__inner-item--level2",
"linkClass": "mega-menu__inner-link"
},
{
"class": "mega-menu__inner-item mega-menu__inner-item--level2",
"text": "Category name",
"linkClass": "mega-menu__inner-link"
},
{
"class": "mega-menu__inner-item mega-menu__inner-item--level2",
"linkClass": "mega-menu__inner-link"
},
{
"class": "mega-menu__inner-item mega-menu__inner-item--level2",
"text": "Category long name",
"linkClass": "mega-menu__inner-link"
},
{
"class": "mega-menu__inner-item mega-menu__inner-item--level2",
"linkClass": "mega-menu__inner-link"
}
]
}
},
{
"class": "mega-menu__inner-item mega-menu__inner-item--level1 mega-menu__inner-item--parent",
"linkClass": "mega-menu__inner-link",
"heading": "Example2",
"link": "/example",
"list": {
"class": "mega-menu__inner-list mega-menu__inner-list--level2",
"elements": [
{
"class": "mega-menu__inner-item mega-menu__inner-item--level2",
"text": "Category name",
"linkClass": "mega-menu__inner-link"
},
{
"class": "mega-menu__inner-item mega-menu__inner-item--level2",
"linkClass": "mega-menu__inner-link"
},
{
"class": "mega-menu__inner-item mega-menu__inner-item--level2",
"linkClass": "mega-menu__inner-link"
},
{
"class": "mega-menu__inner-item mega-menu__inner-item--level2",
"text": "Category long very name",
"linkClass": "mega-menu__inner-link"
},
{
"class": "mega-menu__inner-item mega-menu__inner-item--level2",
"linkClass": "mega-menu__inner-link"
},
{
"class": "mega-menu__inner-item mega-menu__inner-item--level2",
"text": "Category long very name",
"linkClass": "mega-menu__inner-link"
}
]
}
},
{
"class": "mega-menu__inner-item mega-menu__inner-item--level1 mega-menu__inner-item--parent",
"linkClass": "mega-menu__inner-link",
"heading": "Example3",
"link": "/example",
"list": {
"class": "mega-menu__inner-list mega-menu__inner-list--level2",
"elements": [
{
"class": "mega-menu__inner-item mega-menu__inner-item--level2",
"text": "Category name",
"linkClass": "mega-menu__inner-link"
},
{
"class": "mega-menu__inner-item mega-menu__inner-item--level2",
"linkClass": "mega-menu__inner-link"
},
{
"class": "mega-menu__inner-item mega-menu__inner-item--level2",
"linkClass": "mega-menu__inner-link"
},
{
"class": "mega-menu__inner-item mega-menu__inner-item--level2",
"text": "Category long very name",
"linkClass": "mega-menu__inner-link"
},
{
"class": "mega-menu__inner-item mega-menu__inner-item--level2",
"linkClass": "mega-menu__inner-link"
},
{
"class": "mega-menu__inner-item mega-menu__inner-item--level2",
"text": "Category long very name",
"linkClass": "mega-menu__inner-link"
}
]
}
},
{
"class": "mega-menu__inner-item mega-menu__inner-item--level1 mega-menu__inner-item--parent",
"linkClass": "mega-menu__inner-link",
"heading": "Example long name",
"link": "/example",
"list": {
"class": "mega-menu__inner-list mega-menu__inner-list--level2",
"elements": [
{
"class": "mega-menu__inner-item mega-menu__inner-item--level2",
"text": "Category name",
"linkClass": "mega-menu__inner-link"
},
{
"class": "mega-menu__inner-item mega-menu__inner-item--level2",
"linkClass": "mega-menu__inner-link"
},
{
"class": "mega-menu__inner-item mega-menu__inner-item--level2",
"linkClass": "mega-menu__inner-link"
},
{
"class": "mega-menu__inner-item mega-menu__inner-item--level2",
"text": "Category long very name",
"linkClass": "mega-menu__inner-link"
},
{
"class": "mega-menu__inner-item mega-menu__inner-item--level2",
"linkClass": "mega-menu__inner-link"
}
]
}
}
]
},
{
"class": "mega-menu__item",
"text": "Accessories",
"link": "/accessories"
},
{
"class": "mega-menu__item",
"text": "World of",
"link": "/world-of"
}
]
}
.mega-menu {
display: none;
position: relative;
background: transparent;
color: $gray-darker;
margin: 0;
width: 100%;
@include mq($screen-l) {
display: block;
}
&__list {
position: relative;
display: flex;
flex-wrap: nowrap;
justify-content: flex-start;
list-style: none;
background-color: transparent;
margin: 0;
padding: 0;
height: 57px;
@include mq($screen-l) {
width: 80%;
}
@include mq($screen-xl) {
width: 75%;
}
}
&__inner-list {
padding: 0;
background-color: $white;
border-radius: 0 0 $border-radius $border-radius;
list-style: none;
&--level1 {
display: none;
position: absolute;
top: 100%;
left: 0;
z-index: 4;
width: 100%;
box-shadow: 0 4px 6px 0 rgba(51, 51, 51, 0.3);
}
}
&__item {
display: flex;
height: 100%;
align-items: center;
justify-content: center;
&:after {
content: "|";
color: #fa434e;
}
&:last-child:after {
content: '';
}
&--parent {
&:hover,
&:focus {
.mega-menu__inner-list--level1 {
display: flex;
}
}
// support for keyboard focus, for different browsers
& > .mega-menu__inner-list--level1:focus {
display: flex;
}
&:focus-within {
.mega-menu__inner-list--level1 {
display: flex;
}
}
& > .mega-menu__link:focus + .mega-menu__inner-list--level1 {
display: flex;
}
}
}
&__inner-item {
&--level1 {
border-left: 1px solid $gray-light;
&:first-child {
border: 0;
}
&:nth-child(2) {
border: 0;
}
}
&--parent {
margin: $spacer--large 0;
padding: $spacer--medium ($spacer--medium * 2);
&:nth-child(1) {
border-left: 0;
}
& > .mega-menu__inner-link {
display: inline-block;
margin: 0 0 $spacer--medium;
padding: 0;
font-weight: 700;
color: $red;
}
}
&--image {
display: none;
@include mq($screen-xl) {
display: block;
}
padding: 0;
.mega-menu__inner-link {
display: block;
&:focus {
@include focus();
background-color: transparent;
color: $font-color-base;
}
& .button {
width: 100%;
}
}
img {
width: auto;
}
}
}
&__link {
display: flex;
margin: 0 $spacer--1;
font-family: $font-family-saira;
color: $white;
text-decoration: none;
&:focus,
&:hover {
text-shadow: 0 0 0.75px $white, 0 0 0.75px $white;
text-decoration: none;
color: $white;
}
}
&__inner-link {
margin: 0;
padding: 0;
white-space: nowrap;
font-weight: $font-weight-normal;
font-family: $font-family-saira-bold;
color: $gray-darker;
text-decoration: none;
&:hover {
text-decoration: none;
color: $color-primary;
}
}
&__column-hidden {
> .mega-menu__inner-link {
display: none;
}
}
}
class MegaMenu {
constructor(element) {
this.menu = element;
this.focusable = 'a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), object, embed, *[tabindex], *[contenteditable]';
this.focusableChildren = [...this.menu.querySelectorAll(this.focusable)];
this.firstLevelLinks = [...this.menu.querySelectorAll('.mega-menu__item > .mega-menu__link')];
this.content = document.getElementById('contentarea');
this.childrenLinksSelector = '.mega-menu__inner-item:not(.mega-menu__column-hidden) > .mega-menu__inner-link';
this.removeInnerFocus();
this.setKeyboardListeners();
}
removeInnerFocus() {
this.focusableChildren.forEach(item => {
if (!item.parentNode.classList.contains('mega-menu__item')) {
item.setAttribute('tabindex', -1);
}
});
}
moveFocusForward(array, focusIndex) {
if (focusIndex === array.length - 1) {
array[0].focus();
}
else {
array[focusIndex + 1].focus();
}
}
moveFocusBack(array, focusIndex) {
if (focusIndex === 0) {
array[array.length - 1].focus();
}
else {
array[focusIndex - 1].focus();
}
}
setKeyboardListeners() {
this.menu.addEventListener('keydown', (e) => {
if (e.which === 27) {
e.preventDefault();
this.content.focus();
}
});
this.firstLevelLinks.forEach(link => {
link.parentNode.addEventListener('keydown', (e) => {
let focusableInners = [...link.parentNode.querySelectorAll(this.childrenLinksSelector)],
indexInInners = focusableInners.indexOf(e.target),
indexInFirsts = this.firstLevelLinks.indexOf(e.target);
if (e.which === 40 && focusableInners.length) {
e.preventDefault();
this.moveFocusForward(focusableInners, indexInInners);
}
else if (e.which === 38 && focusableInners.length) {
e.preventDefault();
this.moveFocusBack(focusableInners, indexInInners);
}
else if (e.which === 39) {
if (indexInFirsts !== -1) {
e.preventDefault();
this.moveFocusForward(this.firstLevelLinks, indexInFirsts);
}
}
else if (e.which === 37) {
if (indexInFirsts !== -1) {
e.preventDefault();
this.moveFocusBack(this.firstLevelLinks, indexInFirsts);
}
}
});
});
}
}
new MegaMenu(document.querySelector('.mega-menu'));
There are no notes for this item.