<div class="side-menu ">
<button type="button" class="side-menu__trigger" aria-label="Side menu open">
<svg class="icon side-menu__trigger-icon" role="img">
<title>Mobile menu</title>
<use xlink:href="/images/icons-sprite.svg#mobile-menu"></use>
</svg>
</button>
<span class="side-menu__trigger-text">
Categorieën
</span>
<div class="side-menu__content">
<div class="side-menu__trigger-wrapper">
<button type="button" class="side-menu__trigger" aria-label="Side menu close">
<svg class="icon side-menu__trigger-icon" role="img">
<title>Close</title>
<use xlink:href="/images/icons-sprite.svg#close"></use>
</svg>
<span class="header-button__text">
Menu
</span>
</button>
</div>
<div id="dropdown-side-menu" class="dropdown-list side-menu__dropdown">
<ul class="dropdown-list__list">
<li class="
dropdown-list__item
">
<a class="dropdown-list__label " href="#">
All
</a>
</li>
<li class="
dropdown-list__item
dropdown-list__item--collapse
">
<button class="dropdown-list__label " aria-expanded="false" aria-controls="dropdown-1">
dropdown title
<svg class="icon dropdown-list__icon" aria-hidden="true" role="img">
<title>Arrow Down</title>
<use xlink:href="/images/icons-sprite.svg#angle-down"></use>
</svg>
</button>
<div id="dropdown-1" class="dropdown-list__content " aria-hidden="true">
<div id="" class="dropdown-list dropdown-list--inner">
<ul class="dropdown-list__list">
<li class="
dropdown-list__item
dropdown-list__item--collapse
">
<a class="dropdown-list__label " href="#" aria-expanded="false" aria-controls="dropdown-1-1">
Item name
<svg class="icon dropdown-list__icon" aria-hidden="true" role="img">
<title>Arrow Down</title>
<use xlink:href="/images/icons-sprite.svg#angle-down"></use>
</svg>
</a>
<div id="dropdown-1-1" class="dropdown-list__content " aria-hidden="true">
<div id="" class="dropdown-list dropdown-list--inner">
<ul class="dropdown-list__list">
<li class="
dropdown-list__item
dropdown-list__item--collapse
">
<a class="dropdown-list__label " href="#" aria-expanded="false" aria-controls="dropdown-1-2">
sublist item name
<svg class="icon dropdown-list__icon" aria-hidden="true" role="img">
<title>Arrow Down</title>
<use xlink:href="/images/icons-sprite.svg#angle-down"></use>
</svg>
</a>
<div id="dropdown-1-2" class="dropdown-list__content " aria-hidden="true">
<div id="" class="dropdown-list dropdown-list--inner">
<ul class="dropdown-list__list">
<li class="
dropdown-list__item
">
<a class="dropdown-list__label " href="#">
sub sublist item name
</a>
</li>
<li class="
dropdown-list__item
">
<a class="dropdown-list__label " href="#">
sub sublist item name
</a>
</li>
</ul>
</div>
</div>
</li>
<li class="
dropdown-list__item
">
<a class="dropdown-list__label " href="#">
sublist item name
</a>
</li>
<li class="
dropdown-list__item
">
<a class="dropdown-list__label " href="#">
sublist item name
</a>
</li>
</ul>
</div>
</div>
</li>
<li class="
dropdown-list__item
dropdown-list__item--collapse
">
<a class="dropdown-list__label " href="#" aria-expanded="false" aria-controls="dropdown-2-2">
Item name
<svg class="icon dropdown-list__icon" aria-hidden="true" role="img">
<title>Arrow Down</title>
<use xlink:href="/images/icons-sprite.svg#angle-down"></use>
</svg>
</a>
<div id="dropdown-2-2" class="dropdown-list__content " aria-hidden="true">
<div id="" class="dropdown-list dropdown-list--inner">
<ul class="dropdown-list__list">
<li class="
dropdown-list__item
">
<a class="dropdown-list__label " href="#">
sublist item name
</a>
</li>
<li class="
dropdown-list__item
">
<a class="dropdown-list__label " href="#">
sublist item name
</a>
</li>
<li class="
dropdown-list__item
">
<a class="dropdown-list__label " href="#">
sublist item name
</a>
</li>
</ul>
</div>
</div>
</li>
<li class="
dropdown-list__item
">
<a class="dropdown-list__label " href="#">
Item name
</a>
</li>
<li class="
dropdown-list__item
">
<a class="dropdown-list__label " href="#">
Item name
</a>
</li>
</ul>
</div>
</div>
</li>
<li class="
dropdown-list__item
dropdown-list__item--collapse
">
<a class="dropdown-list__label " href="#" aria-expanded="false" aria-controls="dropdown-2">
dropdown title
<svg class="icon dropdown-list__icon" aria-hidden="true" role="img">
<title>Arrow Down</title>
<use xlink:href="/images/icons-sprite.svg#angle-down"></use>
</svg>
</a>
<div id="dropdown-2" class="dropdown-list__content " aria-hidden="true">
<div id="" class="dropdown-list dropdown-list--inner">
<ul class="dropdown-list__list">
<li class="
dropdown-list__item
">
<a class="dropdown-list__label " href="#">
Item name
</a>
</li>
<li class="
dropdown-list__item
">
<a class="dropdown-list__label " href="#">
Item name
</a>
</li>
</ul>
</div>
</div>
</li>
<li class="
dropdown-list__item
dropdown-list__item--collapse
">
<a class="dropdown-list__label " href="#" aria-expanded="false" aria-controls="dropdown-3">
dropdown title
<svg class="icon dropdown-list__icon" aria-hidden="true" role="img">
<title>Arrow Down</title>
<use xlink:href="/images/icons-sprite.svg#angle-down"></use>
</svg>
</a>
<div id="dropdown-3" class="dropdown-list__content " aria-hidden="true">
<div id="" class="dropdown-list dropdown-list--inner">
<ul class="dropdown-list__list">
<li class="
dropdown-list__item
dropdown-list__item--collapse
">
<a class="dropdown-list__label " href="#" aria-expanded="false" aria-controls="dropdown-3-1">
Item name
<svg class="icon dropdown-list__icon" aria-hidden="true" role="img">
<title>Arrow Down</title>
<use xlink:href="/images/icons-sprite.svg#angle-down"></use>
</svg>
</a>
<div id="dropdown-3-1" class="dropdown-list__content " aria-hidden="true">
<div id="" class="dropdown-list dropdown-list--inner">
<ul class="dropdown-list__list">
<li class="
dropdown-list__item
">
<a class="dropdown-list__label " href="#">
sublist item name
</a>
</li>
<li class="
dropdown-list__item
">
<a class="dropdown-list__label " href="#">
sublist item name
</a>
</li>
</ul>
</div>
</div>
</li>
<li class="
dropdown-list__item
">
<a class="dropdown-list__label " href="#">
Item name
</a>
</li>
<li class="
dropdown-list__item
dropdown-list__item--collapse
">
<a class="dropdown-list__label " href="#" aria-expanded="false" aria-controls="dropdown-3-2">
Item name
<svg class="icon dropdown-list__icon" aria-hidden="true" role="img">
<title>Arrow Down</title>
<use xlink:href="/images/icons-sprite.svg#angle-down"></use>
</svg>
</a>
<div id="dropdown-3-2" class="dropdown-list__content " aria-hidden="true">
<div id="" class="dropdown-list dropdown-list--inner">
<ul class="dropdown-list__list">
<li class="
dropdown-list__item
">
<a class="dropdown-list__label " href="#">
sublist item name
</a>
</li>
<li class="
dropdown-list__item
">
<a class="dropdown-list__label " href="#">
sublist item name
</a>
</li>
<li class="
dropdown-list__item
">
<a class="dropdown-list__label " href="#">
sublist item name
</a>
</li>
<li class="
dropdown-list__item
">
<a class="dropdown-list__label " href="#">
sublist item name
</a>
</li>
<li class="
dropdown-list__item
">
<a class="dropdown-list__label " href="#">
sublist item name
</a>
</li>
<li class="
dropdown-list__item
">
<a class="dropdown-list__label " href="#">
sublist item name
</a>
</li>
</ul>
</div>
</div>
</li>
<li class="
dropdown-list__item
dropdown-list__item--collapse
">
<a class="dropdown-list__label " href="#" aria-expanded="false" aria-controls="dropdown-3-3">
Item name
<svg class="icon dropdown-list__icon" aria-hidden="true" role="img">
<title>Arrow Down</title>
<use xlink:href="/images/icons-sprite.svg#angle-down"></use>
</svg>
</a>
<div id="dropdown-3-3" class="dropdown-list__content " aria-hidden="true">
<div id="" class="dropdown-list dropdown-list--inner">
<ul class="dropdown-list__list">
<li class="
dropdown-list__item
">
<a class="dropdown-list__label " href="#">
sublist item name
</a>
</li>
</ul>
</div>
</div>
</li>
<li class="
dropdown-list__item
dropdown-list__item--collapse
">
<a class="dropdown-list__label " href="#" aria-expanded="false" aria-controls="dropdown-3-4">
item name
<svg class="icon dropdown-list__icon" aria-hidden="true" role="img">
<title>Arrow Down</title>
<use xlink:href="/images/icons-sprite.svg#angle-down"></use>
</svg>
</a>
<div id="dropdown-3-4" class="dropdown-list__content " aria-hidden="true">
<div id="" class="dropdown-list dropdown-list--inner">
<ul class="dropdown-list__list">
<li class="
dropdown-list__item
">
<a class="dropdown-list__label " href="#">
sublist item name
</a>
</li>
</ul>
</div>
</div>
</li>
</ul>
</div>
</div>
</li>
</ul>
</div>
<script type="text/javascript">
new DropdownList(document.getElementById('dropdown-side-menu'));
</script>
</div>
<div class="side-menu__overlay"></div>
</div>
<script src="/components/raw/side-menu/side-menu.js" defer></script>
<div class="side-menu {{ class }}">
<button
type="button"
class="side-menu__trigger"
aria-label="Side menu open"
>
{{ render '@icon' sideMenuIconOpen }}
</button>
<span class="side-menu__trigger-text">
Categorieën
</span>
<div class="side-menu__content">
<div class="side-menu__trigger-wrapper">
<button
type="button"
class="side-menu__trigger"
aria-label="Side menu close"
>
{{ render '@icon' sideMenuIconClose }}
<span class="header-button__text">
Menu
</span>
</button>
</div>
{{ render '@dropdown-list--with-nested' dropdown merge=true }}
</div>
<div class="side-menu__overlay"></div>
</div>
<script src="{{static 'side-menu.js'}}" defer></script>
{
"sideMenuIconOpen": {
"id": "mobile-menu",
"title": "Mobile menu",
"class": "side-menu__trigger-icon"
},
"sideMenuIconClose": {
"id": "close",
"title": "Close",
"class": "side-menu__trigger-icon"
},
"dropdown": {
"id": "dropdown-side-menu",
"class": "side-menu__dropdown"
}
}
$side-menu__font-family : $font-family-saira;
$side-menu__trigger-wrapper-border : 1px solid $gray-light !default;
$side-menu__trigger-size : 48px !default;
$side-menu__trigger-margin : 0 !default;
$side-menu__trigger-padding : 0 $spacer--1 !default;
$side-menu__trigger-border : none !default;
$side-menu__trigger-background-color : transparent !default;
$side-menu__trigger-text-font-size : $font-size-base !default;
$side-menu__trigger-text-line-height : 48px !default;
$side-menu__trigger-text-alignment : left !default;
$side-menu__trigger-text-color : $white !default;
$side-menu__trigger-icon-size : 18px !default;
$side-menu__trigger-icon-margin : 5px 0 0 0 !default;
// $side-menu__trigger-icon-margin\@medium : 0 0 4px 0 !default;
$side-menu__trigger-icon-padding : 0 0 4px 0 !default;
$side-menu__trigger-icon-color : $white !default;
$side-menu__trigger-icon-color--hover : $white !default;
$side-menu__content-top : 0 !default;
$side-menu__content-bottom : 0 !default;
$side-menu__content-right : calc(100% + 2px) !default;
$side-menu__content-height : 100% !default;
$side-menu__content-max-width : 280px !default;
$side-menu__content-max-width\@medium : 400px !default;
$side-menu__content-max-height : 100vh !default;
$side-menu__content-transform : translateX(0) !default;
$side-menu__content-transform--open : translateX($side-menu__content-right) !default;
$side-menu__content-padding : 0 !default;
$side-menu__content-background-color : $white !default;
$side-menu__content-transition : $transition-base !default;
$side-menu__content-box-shadow : 0 2px 4px 0 rgba(0, 0, 0, 0.5) !default;
$side-menu__dropdown-width : 100% !default;
$side-menu__dropdown-margin : 0 !default;
$side-menu__overlay-background-color : rgba(0, 0, 0, 0.6) !default;
.side-menu {
display: flex;
@include mq($screen-l) {
display: none;
}
&--is-open {
.side-menu__content {
opacity: 1;
transform: $side-menu__content-transform--open;
visibility: visible;
}
.side-menu__overlay {
width: 100%;
opacity: 1;
}
}
&__trigger-wrapper {
display: flex;
justify-content: flex-end;
border-bottom: $side-menu__trigger-wrapper-border;
}
&__trigger {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
height: $side-menu__trigger-size;
min-width: $side-menu__trigger-size;
margin: $side-menu__trigger-margin;
padding: $side-menu__trigger-padding;
border: $side-menu__trigger-border;
background-color: $side-menu__trigger-background-color;
cursor: pointer;
&:focus,
&:hover {
.side-menu__trigger-icon {
fill: $side-menu__trigger-icon-color--hover;
}
}
}
&__trigger-text {
font-family: $side-menu__font-family;
font-size: $side-menu__trigger-text-font-size;
line-height: $side-menu__trigger-text-line-height;
text-align: $side-menu__trigger-text-alignment;
color: $side-menu__trigger-text-color;
display: block;
margin: auto 0;
height: 48px;
&:before {
padding: 0 10px;
content: "|";
color: #fa434e;
}
}
&__trigger-icon {
width: $side-menu__trigger-icon-size;
height: $side-menu__trigger-icon-size;
margin: $side-menu__trigger-icon-margin;
padding: $side-menu__trigger-icon-padding;
fill: $side-menu__trigger-icon-color;
// @include mq($screen-m) {
// margin: $side-menu__trigger-icon-margin\@medium;
// }
}
&__content {
position: fixed;
top: $side-menu__content-top;
bottom: $side-menu__content-bottom;
right: $side-menu__content-right;
width: $side-menu__content-height;
height: $side-menu__content-height;
max-width: $side-menu__content-max-width;
max-height: $side-menu__content-max-height;
padding: $side-menu__content-padding;
z-index: 100;
overflow-y: auto;
background: $side-menu__content-background-color;
box-shadow: $side-menu__content-box-shadow;
opacity: 1;
transform: $side-menu__content-transform;
transition: $side-menu__content-transition;
visibility: hidden;
@include mq($screen-m) {
max-width: $side-menu__content-max-width\@medium;
}
}
&__overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
z-index: 5;
background-color: $side-menu__overlay-background-color;
@include mq($screen-xl) {
display: none;
}
}
&__dropdown {
margin: $side-menu__dropdown-margin;
width: $side-menu__dropdown-width;
}
}
'use strict';
class SideMenu {
constructor() {
this.sideMenuContainer = document.querySelector('.side-menu');
this.sideMenuOverlay = this.sideMenuContainer.querySelector('.side-menu__overlay');
this.menuTrigger = this.sideMenuContainer.querySelectorAll('.side-menu__trigger');
this.init();
}
toggleSideMenu() {
this.sideMenuContainer.classList.toggle('side-menu--is-open');
if (this.sideMenuContainer.classList.contains('side-menu--is-open')) {
document.body.style.overflow = 'hidden';
}
else {
document.body.style.overflow = 'auto';
}
}
setListeners() {
this.menuTrigger.forEach(el => {
el.addEventListener('click', () => {
this.toggleSideMenu();
});
});
this.sideMenuOverlay.addEventListener('click', () => {
this.toggleSideMenu();
});
}
init() {
this.setListeners();
}
}
new SideMenu();
There are no notes for this item.