<div class="mega-menu">
<div id="products-and-services" aria-hidden="false" class="mega-menu__item">
<div class="mega-menu__item-inner">
<div class="mega-menu__header">
<a href="" class="link link--icon link--dark link--big link--bold">
<span class="link__label">Product and services</span>
<svg class="icon link__icon" focusable="false">
<use xlink:href="#icon-chevron-right"></use>
</svg>
</a>
</div>
<div class="mega-menu__content">
<div class="row">
<div class="col col--span-12 col--span-xs-6 col--span-s-4 col--span-l-3">
<ul class="mega-menu__list">
<li class="mega-menu__list-item">
<a href="" class="link link--icon link--dark link--bold">
<span class="link__label">Air Handling</span>
<svg class="icon link__icon" focusable="false">
<use xlink:href="#icon-chevron-right"></use>
</svg>
</a>
</li>
<li class="mega-menu__list-item">
<a href="" class="link link--dark link--small">
<span class="link__label">Compact</span>
</a>
</li>
<li class="mega-menu__list-item">
<a href="" class="link link--dark link--small">
<span class="link__label">Gold</span>
</a>
</li>
<li class="mega-menu__list-item">
<a href="" class="link link--dark link--small">
<span class="link__label">Global</span>
</a>
</li>
<li class="mega-menu__list-item">
<a href="" class="link link--dark link--small">
<span class="link__label">Silver M</span>
</a>
</li>
<li class="mega-menu__list-item">
<a href="" class="link link--dark link--small">
<span class="link__label">Global FW</span>
</a>
</li>
</ul>
</div>
<div class="col col--span-12 col--span-xs-6 col--span-s-4 col--span-l-3">
<ul class="mega-menu__list">
<li class="mega-menu__list-item">
<a href="" class="link link--icon link--dark link--bold">
<span class="link__label">Room Units</span>
<svg class="icon link__icon" focusable="false">
<use xlink:href="#icon-chevron-right"></use>
</svg>
</a>
</li>
<li class="mega-menu__list-item">
<a href="" class="link link--dark link--small">
<span class="link__label">Waterbourne Climate</span>
</a>
</li>
<li class="mega-menu__list-item">
<a href="" class="link link--dark link--small">
<span class="link__label">Air Diffusers and Grilles</span>
</a>
</li>
</ul>
</div>
<div class="col col--span-12 col--span-xs-6 col--span-s-4 col--span-l-3">
<ul class="mega-menu__list">
<li class="mega-menu__list-item">
<a href="" class="link link--icon link--dark link--bold">
<span class="link__label">Cooling & Heating</span>
<svg class="icon link__icon" focusable="false">
<use xlink:href="#icon-chevron-right"></use>
</svg>
</a>
</li>
<li class="mega-menu__list-item">
<a href="" class="link link--dark link--small">
<span class="link__label">Air-Cooled Chillers and Heat Pumps</span>
</a>
</li>
<li class="mega-menu__list-item">
<a href="" class="link link--dark link--small">
<span class="link__label">Water-cooled Chillers and Heat Pumps</span>
</a>
</li>
<li class="mega-menu__list-item">
<a href="" class="link link--dark link--small">
<span class="link__label">Air source multifunction</span>
</a>
</li>
<li class="mega-menu__list-item">
<a href="" class="link link--dark link--small">
<span class="link__label">IT Cooling</span>
</a>
</li>
<li class="mega-menu__list-item">
<a href="" class="link link--dark link--small">
<span class="link__label">Remote Source</span>
</a>
</li>
<li class="mega-menu__list-item">
<a href="" class="link link--dark link--small">
<span class="link__label">Water source multifunction</span>
</a>
</li>
</ul>
</div>
<div class="col col--span-12 col--span-xs-6 col--span-s-4 col--span-l-3">
<ul class="mega-menu__list">
<li class="mega-menu__list-item">
<a href="" class="link link--icon link--dark link--bold">
<span class="link__label">Air distribution</span>
<svg class="icon link__icon" focusable="false">
<use xlink:href="#icon-chevron-right"></use>
</svg>
</a>
</li>
<li class="mega-menu__list-item">
<a href="" class="link link--dark link--small">
<span class="link__label">Sound Attenuators</span>
</a>
</li>
<li class="mega-menu__list-item">
<a href="" class="link link--dark link--small">
<span class="link__label">Roof fans</span>
</a>
</li>
<li class="mega-menu__list-item">
<a href="" class="link link--dark link--small">
<span class="link__label">Volume Control and Dampers</span>
</a>
</li>
<li class="mega-menu__list-item">
<a href="" class="link link--dark link--small">
<span class="link__label">Airborne Room</span>
</a>
</li>
<li class="mega-menu__list-item">
<a href="" class="link link--dark link--small">
<span class="link__label">Remote Source</span>
</a>
</li>
<li class="mega-menu__list-item">
<a href="" class="link link--dark link--small">
<span class="link__label">Water source multifunction</span>
</a>
</li>
</ul>
</div>
<div class="col col--span-12 col--span-xs-6 col--span-s-4 col--span-l-3">
<ul class="mega-menu__list">
<li class="mega-menu__list-item">
<a href="" class="link link--icon link--dark link--bold">
<span class="link__label">Smoke and Fire</span>
<svg class="icon link__icon" focusable="false">
<use xlink:href="#icon-chevron-right"></use>
</svg>
</a>
</li>
<li class="mega-menu__list-item">
<a href="" class="link link--dark link--small">
<span class="link__label">Actionair Dampers</span>
</a>
</li>
<li class="mega-menu__list-item">
<a href="" class="link link--dark link--small">
<span class="link__label">Actionpac Control Systems</span>
</a>
</li>
</ul>
</div>
<div class="col col--span-12 col--span-xs-6 col--span-s-4 col--span-l-3">
<ul class="mega-menu__list">
<li class="mega-menu__list-item">
<a href="" class="link link--icon link--dark link--bold">
<span class="link__label">Louvres</span>
<svg class="icon link__icon" focusable="false">
<use xlink:href="#icon-chevron-right"></use>
</svg>
</a>
</li>
<li class="mega-menu__list-item">
<a href="" class="link link--dark link--small">
<span class="link__label">World class glass and metal Naco Louvres</span>
</a>
</li>
</ul>
</div>
<div class="col col--span-12 col--span-xs-6 col--span-s-4 col--span-l-3">
<ul class="mega-menu__list">
<li class="mega-menu__list-item">
<a href="" class="link link--icon link--dark link--bold">
<span class="link__label">Air Filtration</span>
<svg class="icon link__icon" focusable="false">
<use xlink:href="#icon-chevron-right"></use>
</svg>
</a>
</li>
<li class="mega-menu__list-item">
<a href="" class="link link--dark link--small">
<span class="link__label">Envirco® Fan Filter Units</span>
</a>
</li>
<li class="mega-menu__list-item">
<a href="" class="link link--dark link--small">
<span class="link__label">Trion® Electrostatic Precipitators</span>
</a>
</li>
</ul>
</div>
<div class="col col--span-12 col--span-xs-6 col--span-s-4 col--span-l-3">
<ul class="mega-menu__list">
<li class="mega-menu__list-item">
<a href="" class="link link--icon link--dark link--bold">
<span class="link__label">Optimisation systems</span>
<svg class="icon link__icon" focusable="false">
<use xlink:href="#icon-chevron-right"></use>
</svg>
</a>
</li>
<li class="mega-menu__list-item">
<a href="" class="link link--dark link--small">
<span class="link__label">System Products</span>
</a>
</li>
<li class="mega-menu__list-item">
<a href="" class="link link--dark link--small">
<span class="link__label">Demand Controlled Indoor Climate</span>
</a>
</li>
<li class="mega-menu__list-item">
<a href="" class="link link--dark link--small">
<span class="link__label">VAV Products</span>
</a>
</li>
<li class="mega-menu__list-item">
<a href="" class="link link--dark link--small">
<span class="link__label">Cooling & heating system optimisation</span>
</a>
</li>
</ul>
</div>
<div class="col col--span-12 col--span-xs-6 col--span-s-4 col--span-l-3">
<ul class="mega-menu__list">
<li class="mega-menu__list-item">
<a href="" class="link link--icon link--dark link--bold">
<span class="link__label">Connected services</span>
<svg class="icon link__icon" focusable="false">
<use xlink:href="#icon-chevron-right"></use>
</svg>
</a>
</li>
<li class="mega-menu__list-item">
<a href="" class="link link--dark link--small">
<span class="link__label">Swegon Connect</span>
</a>
</li>
<li class="mega-menu__list-item">
<a href="" class="link link--dark link--small">
<span class="link__label">Blueye</span>
</a>
</li>
</ul>
</div>
</div>
</div>
<a href="#" class="mega-menu__close" aria-label="Close menu">Close menu</a>
</div>
</div>
</div>
<div class="mega-menu">
{{#each menus}}
<div id="{{ id }}" aria-hidden="{{hidden}}" class="mega-menu__item">
<div class="mega-menu__item-inner">
<div class="mega-menu__header">
{{>@link title }}
</div>
<div class="mega-menu__content">
<div class="row">
{{#each menu}}
<div class="col col--span-12 col--span-xs-6 col--span-s-4 col--span-l-3">
<ul class="mega-menu__list">
{{#each items}}
<li class="mega-menu__list-item">
{{#if this.icon}}
{{> @link this }}
{{else}}
{{> @link this }}
{{/if}}
</li>
{{/each}}
</ul>
</div>
{{/each}}
</div>
</div>
<a href="#" class="mega-menu__close" aria-label="Close menu">Close menu</a>
</div>
</div>
{{/each}}
</div>
{
"menus": [
{
"id": "products-and-services",
"hidden": false,
"title": {
"icon": "chevron-right",
"label": "Product and services",
"modifiers": [
"dark",
"big",
"bold"
]
},
"menu": [
{
"items": [
{
"label": "Air Handling",
"icon": "chevron-right",
"modifiers": [
"dark",
"bold"
]
},
{
"label": "Compact",
"modifiers": [
"dark",
"small"
]
},
{
"label": "Gold",
"modifiers": [
"dark",
"small"
]
},
{
"label": "Global",
"modifiers": [
"dark",
"small"
]
},
{
"label": "Silver M",
"modifiers": [
"dark",
"small"
]
},
{
"label": "Global FW",
"modifiers": [
"dark",
"small"
]
}
]
},
{
"items": [
{
"label": "Room Units",
"icon": "chevron-right",
"modifiers": [
"dark",
"bold"
]
},
{
"label": "Waterbourne Climate",
"modifiers": [
"dark",
"small"
]
},
{
"label": "Air Diffusers and Grilles",
"modifiers": [
"dark",
"small"
]
}
]
},
{
"items": [
{
"label": "Cooling & Heating",
"icon": "chevron-right",
"modifiers": [
"dark",
"bold"
]
},
{
"label": "Air-Cooled Chillers and Heat Pumps",
"modifiers": [
"dark",
"small"
]
},
{
"label": "Water-cooled Chillers and Heat Pumps",
"modifiers": [
"dark",
"small"
]
},
{
"label": "Air source multifunction",
"modifiers": [
"dark",
"small"
]
},
{
"label": "IT Cooling",
"modifiers": [
"dark",
"small"
]
},
{
"label": "Remote Source",
"modifiers": [
"dark",
"small"
]
},
{
"label": "Water source multifunction",
"modifiers": [
"dark",
"small"
]
}
]
},
{
"items": [
{
"label": "Air distribution",
"icon": "chevron-right",
"modifiers": [
"dark",
"bold"
]
},
{
"label": "Sound Attenuators",
"modifiers": [
"dark",
"small"
]
},
{
"label": "Roof fans",
"modifiers": [
"dark",
"small"
]
},
{
"label": "Volume Control and Dampers",
"modifiers": [
"dark",
"small"
]
},
{
"label": "Airborne Room",
"modifiers": [
"dark",
"small"
]
},
{
"label": "Remote Source",
"modifiers": [
"dark",
"small"
]
},
{
"label": "Water source multifunction",
"modifiers": [
"dark",
"small"
]
}
]
},
{
"items": [
{
"label": "Smoke and Fire",
"icon": "chevron-right",
"modifiers": [
"dark",
"bold"
]
},
{
"label": "Actionair Dampers",
"modifiers": [
"dark",
"small"
]
},
{
"label": "Actionpac Control Systems",
"modifiers": [
"dark",
"small"
]
}
]
},
{
"items": [
{
"label": "Louvres",
"icon": "chevron-right",
"modifiers": [
"dark",
"bold"
]
},
{
"label": "World class glass and metal Naco Louvres",
"modifiers": [
"dark",
"small"
]
}
]
},
{
"items": [
{
"label": "Air Filtration",
"icon": "chevron-right",
"modifiers": [
"dark",
"bold"
]
},
{
"label": "Envirco® Fan Filter Units",
"modifiers": [
"dark",
"small"
]
},
{
"label": "Trion® Electrostatic Precipitators",
"modifiers": [
"dark",
"small"
]
}
]
},
{
"items": [
{
"label": "Optimisation systems",
"icon": "chevron-right",
"modifiers": [
"dark",
"bold"
]
},
{
"label": "System Products",
"modifiers": [
"dark",
"small"
]
},
{
"label": "Demand Controlled Indoor Climate",
"modifiers": [
"dark",
"small"
]
},
{
"label": "VAV Products",
"modifiers": [
"dark",
"small"
]
},
{
"label": "Cooling & heating system optimisation",
"modifiers": [
"dark",
"small"
]
}
]
},
{
"items": [
{
"label": "Connected services",
"icon": "chevron-right",
"modifiers": [
"dark",
"bold"
]
},
{
"label": "Swegon Connect",
"modifiers": [
"dark",
"small"
]
},
{
"label": "Blueye",
"modifiers": [
"dark",
"small"
]
}
]
}
]
}
]
}
const MegaMenu = el => {
const menus = el.querySelectorAll('[aria-hidden]');
const triggers = document.querySelectorAll('.primary-nav__link[aria-controls]');
const MegaMenuListener = (e) => onKeyDown(e);
const MegaMenuCloseBtnListener = () => onClose();
const triggerActiveClass = 'primary-nav__menu-item--active';
let isOpen = false;
let activeTrigger = null;
let activeMenu = null;
let closeBtn = null;
let firstFocusableElement = null;
let lastFocusableElement = null;
const onClick = e => {
e.preventDefault();
const { trigger, current } = e.data;
activeTrigger = trigger;
activeMenu = current;
if (!isOpen) {
open();
} else {
if (activeMenu.getAttribute('aria-hidden') === 'false') {
close();
} else {
toggle();
}
}
};
const onKeyDown = e => {
if (e.keyCode === 27) {
window.removeEventListener('keydown', MegaMenuListener);
close(activeMenu);
}
if (e.shiftKey && e.keyCode === 9) {
if (document.activeElement === firstFocusableElement) {
lastFocusableElement.focus();
e.preventDefault();
}
} else {
if (e.keyCode === 9) {
if (document.activeElement === lastFocusableElement) {
firstFocusableElement.focus();
e.preventDefault();
}
}
}
};
const open = () => {
isOpen = true;
activeMenu.setAttribute('aria-hidden', false);
activeTrigger.parentNode.classList.add(triggerActiveClass);
tabTrap(activeMenu);
window.addEventListener('keydown', MegaMenuListener);
closeBtn = activeMenu.querySelector('.mega-menu__close');
closeBtn.addEventListener('click', MegaMenuCloseBtnListener);
};
const close = () => {
isOpen = false;
activeMenu.setAttribute('aria-hidden', true);
activeTrigger.focus();
activeTrigger.parentNode.classList.remove(triggerActiveClass);
closeBtn.removeEventListener('click', MegaMenuCloseBtnListener);
};
const toggle = () => {
for (let menu of menus) {
menu.setAttribute('aria-hidden', true);
}
for (let trigger of triggers) {
trigger.parentNode.classList.remove(triggerActiveClass);
}
activeTrigger.parentNode.classList.add(triggerActiveClass);
activeMenu.setAttribute('aria-hidden', false);
tabTrap(activeMenu);
};
const tabTrap = () => {
const focusableElements = activeMenu.querySelectorAll('a', 'button');
firstFocusableElement = focusableElements[0];
lastFocusableElement = focusableElements[focusableElements.length - 1];
firstFocusableElement.focus();
};
const onClose = () => {
close(activeMenu);
};
const init = () => {
el.addEventListener('triggerMegaMenu', onClick);
};
init();
};
export default MegaMenu;
import MegaMenu from './MegaMenu';
const el = document.querySelector('.mega-menu');
if (el) {
MegaMenu(el);
}
.mega-menu {
position: relative;
max-width: $row-max-width;
margin: 0 auto;
.header--small & {
display: none;
}
.header--search-open & {
z-index: $z-header__main-nav;
}
}
.mega-menu__item {
box-shadow: 0 size(0.5) size(2) size(-2) rgba($color-black, 0.4);
background-color: $color-white;
padding: size(6) size(3) size(4);
position: absolute;
top: 0;
left: -9999px;
visibility: hidden;
&[aria-hidden="false"] {
left: 0;
right: 0;
z-index: 100;
visibility: visible;
}
}
.mega-menu__item-inner {
opacity: 0;
transform: translateY(size(-2));
transition: opacity .2s ease-out, transform .2s ease-out;
.mega-menu__item[aria-hidden="false"] & {
opacity: 1;
transform: translateY(0);
}
}
.mega-menu__content {
margin-left: size(-1);
margin-right: size(-1);
}
.mega-menu__list {
list-style: none;
margin: size(4) 0 0 0;
padding: 0;
}
.mega-menu__list-item {
margin: size(1.25) 0;
}
.mega-menu__close {
opacity: 0;
position: absolute;
top: size(3);
right: size(3);
z-index: $z-below;
&:focus {
opacity: 1;
}
}
No notes defined.