<div class="side-menu ">
<button class="button button--icon modal-trigger 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 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 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 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 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 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 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 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 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 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 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 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__wrapper">
<div class="contact-bar__container ">
<ul class="list contact-bar__list">
<li class="list-item contact-bar__item">
<a href="#" class="
contact-bar__link
">
<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="
button__text
contact-bar__text
">
Blog
</span>
</a>
</li>
<li class="list-item contact-bar__item">
<a href="#" class="
contact-bar__link
">
<span class="
button__text
contact-bar__text
">
Contact
</span>
</a>
</li>
</ul>
<ul class="list contact-bar__list contact-bar__list--icons">
<li class="list-item contact-bar__item">
<a href="tel:8002669590" class="
contact-bar__link
">
<span class="
icon
contact-bar__icon
" aria-label="">
<svg class="icon " role="img">
<title>Phone</title>
<use href="/images/icons-sprite.svg#phone"></use>
</svg>
</span>
<span class="
button__text
contact-bar__text
">
Call us for free 800 - 266 - 9590
</span>
</a>
</li>
<li class="contact-bar__item">
<a href="mailto:test@test.com" class="
contact-bar__link
">
<span class="
icon
contact-bar__icon
" aria-label="">
<svg class="icon " role="img">
<title>Email</title>
<use href="/images/icons-sprite.svg#envelope"></use>
</svg>
</span>
<span class="
button__text
contact-bar__text
">
Email Us
</span>
</a>
</li>
</ul>
</div>
</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 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 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 $spacer 0 0 !default;
$side-menu__trigger-margin\@medium : 0 !default;
$side-menu__trigger-border\@medium : 1px solid $gray !default;
$side-menu__trigger-border-width\@medium : 0 1px 0 0 !default;
$side-menu__bg-color : $white !default;
$side-menu__modal-container-top : 112px !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}) !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-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-right : unset !default;
$side-menu__modal-close-button-left : $spacer !default;
$side-menu__modal-close-button-top\@medium : -65px !default;
$side-menu__modal-close-button-left\@medium : 12px !default;
$side-menu__modal-close-button-bg : $white !default;
$side-menu__modal-close-button-text-z-index : $z-index-low !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: none;
}
&__trigger {
background-color: $side-menu__trigger-bg-color;
@include mq($screen-m) {
border: $side-menu__trigger-border\@medium;
border-width: $side-menu__trigger-border-width\@medium;
padding: $side-menu__trigger-padding\@medium;
margin: $side-menu__trigger-margin\@medium;
}
}
&__modal {
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;
@include mq($screen-m) {
max-height: $side-menu__modal-container-max-height\@medium;
margin-top: $side-menu__modal-container-top\@medium;
}
}
&__content {
max-width: $side-menu__modal-content-max-width;
margin: $side-menu__modal-content-margin;
overflow-y: auto;
@include hide-scrollbar();
}
&__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;
right: $side-menu__modal-close-button-right;
left: $side-menu__modal-close-button-left;
background: $side-menu__modal-close-button-bg;
@include mq($screen-m) {
top: $side-menu__modal-close-button-top\@medium;
left: $side-menu__modal-close-button-left\@medium;
}
}
&__close-button-text {
z-index: $side-menu__modal-close-button-text-z-index;
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;
}
}
'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();
No notes defined.