<div class="side-menu ">
<button class="button button--icon modal-trigger button--rotate-icon side-menu__trigger" type="button" data-modal-trigger="side-menu" aria-label="Open menu">
<svg class="icon side-menu__trigger-icon" role="presentation" focusable="false">
<title>Mobile-menu</title>
<use xlink:href="/images/icons-sprite.svg#mobile-menu"></use>
</svg>
</button>
<div role="dialog" aria-hidden="true" id="side-menu" data-modal="side-menu" class="modal modal--tertiary side-menu__modal">
<div role="document" class="modal__container side-menu__container" tabindex="0">
<div class="modal__content side-menu__content">
<div class="modal__middle side-menu__content-middle">
<div id="dropdown-default" class="dropdown-list dropdown-list--with-nested">
<ul class="dropdown-list__list">
<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-default'));
</script>
</div>
<div class="modal__bottom side-menu__content-bottom">
<div class="modal__bottom-actions side-menu__bottom-actions">
<div class="
modal__bottom-action
side-menu__bottom-action
">
<div class="contact-bar contact-bar--vertical">
<div class="contact-bar__container ">
<ul class="list contact-bar__list contact-bar__list--icons">
<li class="list-item contact-bar__item">
<a href="#" class="
contact-bar__link
">
<span class="
icon
contact-bar__icon
" aria-label="">
<svg class="icon " role="img">
<use xlink:href="/images/icons-sprite.svg#undefined"></use>
</svg>
</span>
<span class="
button__text
contact-bar__text
">
Account
</span>
</a>
</li>
<li class="list-item contact-bar__item">
<a href="#" class="
contact-bar__link
">
<span class="
icon
contact-bar__icon
" aria-label="">
<svg class="icon " role="img">
<use xlink:href="/images/icons-sprite.svg#undefined"></use>
</svg>
</span>
<span class="
button__text
contact-bar__text
">
Klantenservice
</span>
</a>
</li>
<li class="list-item contact-bar__item">
<a href="#" class="
contact-bar__link
">
<span class="
icon
contact-bar__icon
" aria-label="">
<svg class="icon " role="img">
<use xlink:href="/images/icons-sprite.svg#undefined"></use>
</svg>
</span>
<span class="
button__text
contact-bar__text
">
Groothandel
</span>
</a>
</li>
</ul>
<ul class="list contact-bar__list contact-bar__list--icons">
<li class="list-item contact-bar__item">
<a href="tel:+31858772604" class="
contact-bar__link
">
<span class="
icon
contact-bar__icon
" aria-label="">
<svg class="icon " role="img">
<title>Phone</title>
<use xlink:href="/images/icons-sprite.svg#phone"></use>
</svg>
</span>
<span class="
button__text
contact-bar__text
">
T: 085 - 877 26 04
</span>
</a>
</li>
<li class="contact-bar__item">
<a href="mailto:info@solarwood.nl" class="
contact-bar__link
">
<span class="
icon
contact-bar__icon
" aria-label="">
<svg class="icon " role="img">
<title>Email</title>
<use xlink:href="/images/icons-sprite.svg#envelope"></use>
</svg>
</span>
<span class="
button__text
contact-bar__text
">
E-mail
</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<button class="button button--icon button--rotate-icon modal__close-button side-menu__close-button" type="button" aria-label="click to close the modal">
<svg class="icon button__icon modal__close-button-icon" role="presentation" focusable="false">
<title>Close</title>
<use xlink:href="/images/icons-sprite.svg#close"></use>
</svg>
</button>
</div>
</div>
<script type="text/javascript">
new Modal(document.querySelector('[data-modal-trigger="side-menu"]'));
</script>
</div>
<div class="side-menu {{ class }}">
{{ render '@button--icon' sideMenuTrigger }}
{{ render '@modal--tertiary' sideMenuModal }}
</div>
{
"sideMenuTrigger": {
"tag": "button",
"class": "modal-trigger button--rotate-icon side-menu__trigger",
"attributes": "type=\"button\" data-modal-trigger=\"side-menu\" aria-label=\"Open menu\"",
"icon": {
"id": "mobile-menu",
"title": "Mobile-menu",
"class": "side-menu__trigger-icon",
"hidden": true
}
},
"sideMenuModal": {
"trigger": false,
"modal": {
"id": "side-menu",
"class": "modal--tertiary side-menu__modal"
},
"modalContainer": {
"class": "side-menu__container"
},
"modalContent": {
"class": "side-menu__content"
},
"modalMiddle": true,
"modalMiddleClass": "side-menu__content-middle",
"modalComponent": {
"content": "dropdown-list--with-nested"
},
"modalBottom": true,
"modalBottomClass": "side-menu__content-bottom",
"modalBottomActionsClass": "side-menu__bottom-actions",
"modalBottomActions": [
{
"content": "contact-bar--vertical",
"class": "side-menu__bottom-action"
}
],
"buttonClose": {
"tag": "button",
"text": "",
"class": "button--rotate-icon modal__close-button side-menu__close-button",
"icon": {
"id": "close",
"title": "Close",
"class": "button__icon modal__close-button-icon"
},
"attributes": "type=\"button\" aria-label=\"click to close the modal\""
}
}
}
$side-menu__bq-visibility-max : $screen-l !default;
$side-menu__trigger-bg-color : $white !default;
$side-menu__trigger-padding\@medium : 0 !default;
$side-menu__trigger-margin\@medium : 0 !default;
$side-menu__trigger-border\@medium : 0 !default;
$side-menu__trigger-border-width\@medium : 0 1px 0 0 !default;
$side-menu__bg-color : $white !default;
$side-menu__modal-container-top : 60px !default;
$side-menu__modal-container-top\@medium : 82px !default;
$side-menu__modal-container-padding : 0 $spacer--semi-medium !default;
$side-menu__modal-container-max-width : 100% !default;
$side-menu__modal-container-max-height : calc(100vh - #{$side-menu__modal-container-top} * 1.5) !default;
$side-menu__modal-container-max-height\@medium : calc(100vh - #{$side-menu__modal-container-top\@medium}) !default;
$side-menu__modal-container-box-shadow : none !default;
$side-menu__modal-content-max-width : 496px !default;
$side-menu__modal-content-margin : 0 auto !default;
$side-menu__modal-content-padding : 0 !default;
$side-menu__modal-middle-padding : $spacer--medium 0 0 !default;
$side-menu__modal-bottom-border : 0 !default;
$side-menu__modal-bottom-padding : $spacer--semi-large 0 0 !default;
$side-menu__modal-bottom-actions-max-width : 100% !default;
$side-menu__modal-bottom-actions-margin : 0 !default;
$side-menu__modal-bottom-action-width : 100% !default;
$side-menu__modal-close-button-top : -56px !default;
$side-menu__modal-close-button-left : 0 !default;
$side-menu__modal-close-button-top\@medium : -56px !default;
$side-menu__modal-close-button-left\@medium : 0 !default;
$side-menu__modal-close-button-bg : $white !default;
$side-menu__modal-close-button-text-margin : 0 0 0 $spacer--medium !default;
$side-menu__modal-close-button-text-color : $color-primary !default;
$side-menu__modal-close-button-text-font-family: $font-family-secondary !default;
$side-menu__modal-close-button-text-font-size : $font-size-medium !default;
$side-menu__modal-close-button-text-font-weight: $font-weight-normal !default;
@import 'side-menu-variables';
.side-menu {
@include mq($side-menu__bq-visibility-max) {
display: flex;
}
&__trigger {
background-image: url('/images/icons/menu-bg-white.svg');
border-radius: $side-menu__trigger-border\@medium;
padding: $side-menu__trigger-padding\@medium;
margin: $side-menu__trigger-margin\@medium;
background-color: transparent !important; //sass-lint:disable-line no-important
background-size: cover;
transition: none;
@include mq($screen-m) {
border: $side-menu__trigger-border\@medium;
padding: $side-menu__trigger-padding\@medium;
margin: $side-menu__trigger-margin\@medium;
background-color: transparent;
background-size: cover;
&:hover {
background-color: transparent;
}
}
}
&__modal {
@media screen and (max-width: $screen-m){
background: rgba(1, 5, 51, 0.8);
}
@include mq($screen-m + 1) {
background: $side-menu__bg-color;
}
}
&__container {
margin-top: $side-menu__modal-container-top;
max-width: $side-menu__modal-container-max-width;
box-shadow: $side-menu__modal-container-box-shadow;
padding: $side-menu__modal-container-padding;
max-height: $side-menu__modal-container-max-height;
background: url("/images/menu/menu-background.jpg") no-repeat bottom left;
background-size: contain;
@include mq($screen-m) {
max-height: $side-menu__modal-container-max-height\@medium;
margin-top: $side-menu__modal-container-top\@medium;
}
//sass-lint:disable no-important
@media screen and (max-width: $screen-m){
background: $side-menu__bg-color;
height: 100vh;
max-height: 100%;
margin: 0;
max-width: 88% !important;
padding: 0;
right: 0;
left: 12%;
min-height: 100%;
}
//sass-lint:enable no-important
.contact-bar--vertical {
background: transparent;
}
}
&__content {
max-width: $side-menu__modal-content-max-width;
overflow-y: auto;
@media screen and (max-width: $screen-m) {
padding: 0 8px;
}
@include hide-scrollbar();
@include mq($screen-m) {
max-width: 1450px;
margin: 2rem auto;
padding: 0;
}
@include mq($screen-l) {
.side-menu__content {
margin-right: 1rem;
}
}
.menu-list {
position: inherit;
background: transparent;
.dropdown-list {
background: transparent;
display: block;
//sass-lint:disable no-important
@media screen and (max-width: $screen-m) {
justify-content: start;
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 0;
li {
border-bottom: 1px solid #ebebeb;
}
}
//sass-lint:enable no-important
}
&__list {
padding-right: 2rem;
position: inherit;
}
&__item {
display: block;
justify-content: flex-end;
width: 100%;
}
&__label {
font-size: $font-size-2x-large;
font-family: $font-family-heading;
font-weight: 400;
text-align: right;
@include mq($screen-m) {
font-size: $font-size-heading;
}
@include mq($screen-l) {
font-size: $font-size-heading-large;
}
@include mq($screen-xl) {
font-size: $font-size-heading-larger;
}
&:hover {
text-decoration: none;
transition: none;
font-weight: 500;
}
}
.menu-item {
&--small {
.menu-list__label {
font-size: $font-size-medium-large;
font-family: $font-family-base;
@include mq($screen-m) {
font-size: $font-size-large;
}
@include mq($screen-l) {
font-size: $font-size-extra-large;
}
@include mq($screen-xl) {
font-size: $font-size-2x-large;
}
}
}
&--icon:after {
content: "3";
position: absolute;
right: -34px;
top: 7px;
background: greenyellow;
border-radius: 50%;
height: 30px;
padding: 0 10px;
line-height: 30px;
vertical-align: middle;
justify-self: center;
align-self: center;
font-family: $font-family-base;
}
.button-bottom {
position: absolute;
bottom: 1rem;
ul {
list-style: none;
}
.menu-list__label {
background: transparent;
.button {
position: relative;
text-transform: none;
&:hover {
text-decoration: none;
}
}
}
}
}
}
&.modal__content {
//sass-lint:disable no-important
@media screen and (max-width: $screen-m) {
margin-top: 150px;
}
//sass-lint:enable no-important
}
}
&__content-middle {
padding: $side-menu__modal-middle-padding;
overflow: visible;
}
&__content-bottom {
padding: $side-menu__modal-bottom-padding;
border: $side-menu__modal-bottom-border;
}
&__bottom-actions {
max-width: $side-menu__modal-bottom-actions-max-width;
margin: $side-menu__modal-bottom-actions-margin;
}
&__bottom-action {
width: $side-menu__modal-bottom-action-width;
flex-basis: $side-menu__modal-bottom-action-width;
}
&__close-button {
top: $side-menu__modal-close-button-top;
left: $side-menu__modal-close-button-left;
background: $side-menu__modal-close-button-bg;
width: 100%;
justify-content: start;
border-top: $side-menu__modal-bottom-border;
border-bottom: $side-menu__modal-bottom-border;
max-width: $max-content-width;
@include mq($screen-m) {
top: $side-menu__modal-close-button-top\@medium;
left: $side-menu__modal-close-button-left\@medium;
right: 0;
margin: 0 auto;
padding: 0 2rem;
}
@include mq($screen-l) {
max-width: 1450px;
margin-left: 40px;
margin-right: 40px;
padding: 0;
left: 0;
width: calc(100% - 80px);
}
@include mq($screen-xxl) {
max-width: 1450px;
margin-left: auto;
margin-right: auto;
padding: 0;
left: 0;
width: 100%;
}
//sass-lint:disable no-important
@media screen and (max-width: $screen-m) {
background-image: url('/images/icons/menu-bg-blue-rotated.svg');
padding: 0;
margin: 0;
transform: rotate(0);
background-color: transparent !important;
height: 138px;
width: 138px;
left: auto;
top: -50px;
right: -40px;
position: absolute;
.icon {
fill: $white;
transform: rotate(180deg);
margin-top: 26px;
margin-right: 60px !important;
}
}
//sass-lint:enable no-important
.icon {
margin-left: 20px;
}
}
&__close-button-text {
margin: $side-menu__modal-close-button-text-margin;
color: $side-menu__modal-close-button-text-color;
font-family: $side-menu__modal-close-button-text-font-family;
font-size: $side-menu__modal-close-button-text-font-size;
font-weight: $side-menu__modal-close-button-text-font-weight;
@media screen and (max-width: $screen-m){
display: none;
}
}
}
.menu-list-update-button {
bottom: 2rem;
right: 0;
}
.menu-item-update-button {
.dropdown-list {
background: transparent;
}
list-style: none;
li {
list-style: none;
&.button--transparent {
&:hover {
background: $green;
}
a {
text-transform: none;
font-size: 16px;
background: transparent;
line-height: 50px;
}
}
}
}
'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.