<div class="mega-menu ">
<ul class="mega-menu__list container ">
<li class="mega-menu__item mega-menu__item--parent mega-menu__item--secondary">
<a href="/new-in" class="mega-menu__link">
New In
</a>
<ul class="list mega-menu__inner-list mega-menu__inner-list--level1">
<li class="list__item mega-menu__inner-item">
<a href="" class="
link
mega-menu__inner-link
">
View all
</a>
</li>
<li class="list__item mega-menu__inner-item">
<a href="" class="
link
mega-menu__inner-link
">
Clothing
</a>
</li>
<li class="list__item mega-menu__inner-item">
<a href="" class="
link
mega-menu__inner-link
">
Shoes
</a>
</li>
<li class="list__item mega-menu__inner-item">
<a href="" class="
link
mega-menu__inner-link
">
Accessories
</a>
</li>
<li class="list__item mega-menu__inner-item">
<a href="" class="
link
mega-menu__inner-link
">
Face + Body
</a>
</li>
<li class="list__item mega-menu__inner-item">
<a href="" class="
link
mega-menu__inner-link
">
Living + Gifts
</a>
</li>
<li class="list__item mega-menu__inner-item">
<a href="" class="
link
mega-menu__inner-link
">
Back in stock
</a>
</li>
<li class="list__item mega-menu__inner-item">
<a href="" class="
link
mega-menu__inner-link
">
Trending now
</a>
</li>
</ul>
</li>
<li class="mega-menu__item mega-menu__item--parent mega-menu__item--rows">
<a href="/clothing" class="mega-menu__link">
Clothing
</a>
<ul class="list mega-menu__inner-list mega-menu__inner-list--level1">
<li class="list__item mega-menu__inner-item mega-menu__inner-item--inline mega-menu__column-hidden">
<a href="" class="
link
mega-menu__inner-link
">
Row one
</a>
<ul class="list mega-menu__inner-list">
<li class="list__item mega-menu__inner-item">
<a href="" class="
link
mega-menu__inner-link
">
columns one item
</a>
</li>
<li class="list__item mega-menu__inner-item">
<a href="" class="
link
mega-menu__inner-link
">
columns one item 2
</a>
</li>
</ul>
</li>
<li class="list__item mega-menu__inner-item mega-menu__column-hidden mega-menu__inner-item--images">
<a href="" class="
link
mega-menu__inner-link
">
Row two
</a>
<ul class="list mega-menu__inner-list">
<li class="list__item mega-menu__inner-item">
<a href="" class="
link
mega-menu__inner-link
">
<div class="lazyload-wrapper ">
<img class="
image
lazyload
" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="/images/product/cart-product-160_160.jpg" alt="brand name alt text">
</div>
Summer
</a>
</li>
<li class="list__item mega-menu__inner-item">
<a href="" class="
link
mega-menu__inner-link
">
<div class="lazyload-wrapper ">
<img class="
image
lazyload
" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="/images/product/cart-product-160_160.jpg" alt="brand name alt text">
</div>
Spring
</a>
</li>
<li class="list__item mega-menu__inner-item">
<a href="" class="
link
mega-menu__inner-link
">
<div class="lazyload-wrapper ">
<img class="
image
lazyload
" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="/images/product/cart-product-160_160.jpg" alt="brand name alt text">
</div>
Autumn
</a>
</li>
<li class="list__item mega-menu__inner-item">
<a href="" class="
link
mega-menu__inner-link
">
<div class="lazyload-wrapper ">
<img class="
image
lazyload
" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="/images/product/cart-product-160_160.jpg" alt="brand name alt text">
</div>
Winter
</a>
</li>
<li class="list__item mega-menu__inner-item">
<a href="" class="
link
mega-menu__inner-link
">
<div class="lazyload-wrapper ">
<img class="
image
lazyload
" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="/images/product/cart-product-160_160.jpg" alt="brand name alt text">
</div>
View all
</a>
</li>
<li class="list__item mega-menu__inner-item">
<a href="" class="
link
mega-menu__inner-link
">
<div class="lazyload-wrapper ">
<img class="
image
lazyload
" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="/images/product/cart-product-160_160.jpg" alt="brand name alt text">
</div>
lorem ipsum
</a>
</li>
</ul>
</li>
<li class="list__item mega-menu__inner-item mega-menu__column-hidden mega-menu__inner-item--columns">
<a href="" class="
link
mega-menu__inner-link
">
Row three
</a>
<ul class="list mega-menu__inner-list">
<li class="list__item mega-menu__inner-item mega-menu__column-hidden">
<a href="" class="
link
mega-menu__inner-link
">
row 3 c 1
</a>
<ul class="list mega-menu__inner-list">
<li class="list__item mega-menu__inner-item mega-menu__inner-item--children">
<a href="" class="
link
mega-menu__inner-link
">
Men
</a>
<ul class="list mega-menu__inner-list">
<li class="list__item mega-menu__inner-item">
<a href="" class="
link
mega-menu__inner-link
">
Elegant
</a>
</li>
<li class="list__item mega-menu__inner-item">
<a href="" class="
link
mega-menu__inner-link
">
Casual
</a>
</li>
<li class="list__item mega-menu__inner-item">
<a href="" class="
link
mega-menu__inner-link
">
Active
</a>
</li>
</ul>
</li>
<li class="list__item mega-menu__inner-item">
<a href="" class="
link
mega-menu__inner-link
">
Wallets
</a>
</li>
</ul>
</li>
<li class="list__item mega-menu__inner-item mega-menu__column-hidden">
<a href="" class="
link
mega-menu__inner-link
">
row 3 column 2
</a>
<ul class="list mega-menu__inner-list">
<li class="list__item mega-menu__inner-item mega-menu__inner-item--children">
<a href="" class="
link
mega-menu__inner-link
">
Women
</a>
<ul class="list mega-menu__inner-list">
<li class="list__item mega-menu__inner-item">
<a href="" class="
link
mega-menu__inner-link
">
Elegant
</a>
</li>
<li class="list__item mega-menu__inner-item">
<a href="" class="
link
mega-menu__inner-link
">
Casual
</a>
</li>
<li class="list__item mega-menu__inner-item">
<a href="" class="
link
mega-menu__inner-link
">
Active
</a>
</li>
</ul>
</li>
<li class="list__item mega-menu__inner-item">
<a href="" class="
link
mega-menu__inner-link
">
Bags
</a>
</li>
</ul>
</li>
<li class="list__item mega-menu__inner-item mega-menu__column-hidden">
<a href="" class="
link
mega-menu__inner-link
">
row 3 column 3
</a>
<ul class="list mega-menu__inner-list">
<li class="list__item mega-menu__inner-item mega-menu__inner-item--children">
<a href="" class="
link
mega-menu__inner-link
">
Kids
</a>
<ul class="list mega-menu__inner-list">
<li class="list__item mega-menu__inner-item">
<a href="" class="
link
mega-menu__inner-link
">
Pijamas
</a>
</li>
<li class="list__item mega-menu__inner-item">
<a href="" class="
link
mega-menu__inner-link
">
School Days
</a>
</li>
<li class="list__item mega-menu__inner-item mega-menu__inner-item--children">
<a href="" class="
link
mega-menu__inner-link
">
Kids Fance Dress
</a>
<ul class="list mega-menu__inner-list">
<li class="list__item mega-menu__inner-item">
<a href="" class="
link
mega-menu__inner-link
">
Hats
</a>
</li>
<li class="list__item mega-menu__inner-item">
<a href="" class="
link
mega-menu__inner-link
">
Special Ocassions
</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="list__item mega-menu__inner-item mega-menu__column-hidden">
<a href="" class="
link
mega-menu__inner-link
">
row 3 column 4
</a>
<ul class="list mega-menu__inner-list">
<li class="list__item mega-menu__inner-item">
<a href="" class="
link
mega-menu__inner-link
">
Jackets
</a>
</li>
<li class="list__item mega-menu__inner-item">
<a href="" class="
link
mega-menu__inner-link
">
Shirts
</a>
</li>
<li class="list__item mega-menu__inner-item">
<a href="" class="
link
mega-menu__inner-link
">
Dresses
</a>
</li>
<li class="list__item mega-menu__inner-item">
<a href="" class="
link
mega-menu__inner-link
">
Trousers
</a>
</li>
<li class="list__item mega-menu__inner-item">
<a href="" class="
link
mega-menu__inner-link
">
Hats
</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="mega-menu__item ">
<a href="/shoes" class="mega-menu__link">
Shoes
</a>
</li>
<li class="mega-menu__item ">
<a href="/furniture" class="mega-menu__link">
Furniture
</a>
</li>
<li class="mega-menu__item ">
<a href="/accessories" class="mega-menu__link">
Accessories
</a>
</li>
<li class="mega-menu__item mega-menu__item--parent mega-menu__item--rows">
<a href="/activewear" class="mega-menu__link">
Activewear
</a>
<ul class="list mega-menu__inner-list mega-menu__inner-list--level1">
<li class="list__item mega-menu__inner-item mega-menu__inner-item--columns mega-menu__column-hidden">
<a href="" class="
link
mega-menu__inner-link
">
Row one
</a>
<ul class="list mega-menu__inner-list">
<li class="list__item mega-menu__inner-item mega-menu__column-hidden">
<a href="" class="
link
mega-menu__inner-link
">
row 3 c 1
</a>
<ul class="list mega-menu__inner-list">
<li class="list__item mega-menu__inner-item mega-menu__inner-item--children">
<a href="" class="
link
mega-menu__inner-link
">
Men
</a>
<ul class="list mega-menu__inner-list">
<li class="list__item mega-menu__inner-item">
<a href="" class="
link
mega-menu__inner-link
">
Elegant
</a>
</li>
<li class="list__item mega-menu__inner-item">
<a href="" class="
link
mega-menu__inner-link
">
Casual
</a>
</li>
<li class="list__item mega-menu__inner-item">
<a href="" class="
link
mega-menu__inner-link
">
Active
</a>
</li>
</ul>
</li>
<li class="list__item mega-menu__inner-item">
<a href="" class="
link
mega-menu__inner-link
">
Wallets
</a>
</li>
</ul>
</li>
<li class="list__item mega-menu__inner-item mega-menu__column-hidden">
<a href="" class="
link
mega-menu__inner-link
">
row 3 column 2
</a>
<ul class="list mega-menu__inner-list">
<li class="list__item mega-menu__inner-item mega-menu__inner-item--children">
<a href="" class="
link
mega-menu__inner-link
">
Women
</a>
<ul class="list mega-menu__inner-list">
<li class="list__item mega-menu__inner-item">
<a href="" class="
link
mega-menu__inner-link
">
Elegant
</a>
</li>
<li class="list__item mega-menu__inner-item">
<a href="" class="
link
mega-menu__inner-link
">
Casual
</a>
</li>
<li class="list__item mega-menu__inner-item">
<a href="" class="
link
mega-menu__inner-link
">
Active
</a>
</li>
</ul>
</li>
<li class="list__item mega-menu__inner-item">
<a href="" class="
link
mega-menu__inner-link
">
Bags
</a>
</li>
</ul>
</li>
<li class="list__item mega-menu__inner-item mega-menu__column-hidden">
<a href="" class="
link
mega-menu__inner-link
">
row 3 column 3
</a>
<ul class="list mega-menu__inner-list">
<li class="list__item mega-menu__inner-item mega-menu__inner-item--children">
<a href="" class="
link
mega-menu__inner-link
">
Kids
</a>
<ul class="list mega-menu__inner-list">
<li class="list__item mega-menu__inner-item">
<a href="" class="
link
mega-menu__inner-link
">
Pijamas
</a>
</li>
<li class="list__item mega-menu__inner-item">
<a href="" class="
link
mega-menu__inner-link
">
School Days
</a>
</li>
<li class="list__item mega-menu__inner-item">
<a href="" class="
link
mega-menu__inner-link
">
Fance Dress
</a>
</li>
<li class="list__item mega-menu__inner-item">
<a href="" class="
link
mega-menu__inner-link
">
Special Occasion
</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="list__item mega-menu__inner-item mega-menu__column-hidden">
<a href="" class="
link
mega-menu__inner-link
">
row 3 column 4
</a>
<ul class="list mega-menu__inner-list">
<li class="list__item mega-menu__inner-item">
<a href="" class="
link
mega-menu__inner-link
">
Jackets
</a>
</li>
<li class="list__item mega-menu__inner-item">
<a href="" class="
link
mega-menu__inner-link
">
Shirts
</a>
</li>
<li class="list__item mega-menu__inner-item">
<a href="" class="
link
mega-menu__inner-link
">
Dresses
</a>
</li>
<li class="list__item mega-menu__inner-item">
<a href="" class="
link
mega-menu__inner-link
">
Trousers
</a>
</li>
<li class="list__item mega-menu__inner-item">
<a href="" class="
link
mega-menu__inner-link
">
Hats
</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="mega-menu__item mega-menu__item--parent mega-menu__item--secondary">
<a href="/brands" class="mega-menu__link">
Brands Brands
</a>
<ul class="list mega-menu__inner-list mega-menu__inner-list--level1">
<li class="list__item mega-menu__inner-item">
<a href="" class="
link
mega-menu__inner-link
">
View all
</a>
</li>
<li class="list__item mega-menu__inner-item">
<a href="" class="
link
mega-menu__inner-link
">
Clothing
</a>
</li>
<li class="list__item mega-menu__inner-item">
<a href="" class="
link
mega-menu__inner-link
">
Shoes
</a>
</li>
<li class="list__item mega-menu__inner-item">
<a href="" class="
link
mega-menu__inner-link
">
Accessories
</a>
</li>
<li class="list__item mega-menu__inner-item">
<a href="" class="
link
mega-menu__inner-link
">
Face + Body
</a>
</li>
<li class="list__item mega-menu__inner-item">
<a href="" class="
link
mega-menu__inner-link
">
Living + Gifts
</a>
</li>
<li class="list__item mega-menu__inner-item">
<a href="" class="
link
mega-menu__inner-link
">
Back in stock
</a>
</li>
<li class="list__item mega-menu__inner-item">
<a href="" class="
link
mega-menu__inner-link
">
Trending now
</a>
</li>
</ul>
</li>
</ul>
</div>
<script src="/components/raw/mega-menu/mega-menu.js"></script>
<div class="mega-menu {{ class }}" {{{ attributes }}}>
<ul class="mega-menu__list container {{ listClass }}">
{{#each menulist as |menuitem| }}
<li class="mega-menu__item {{ class }}">
<a
href="{{ link }}"
class="mega-menu__link"
>
{{ text }}
</a>
{{#if menuitem.list}}
{{ render '@list--link' menuitem.list merge=true }}
{{/if}}
{{#if nestedList}}
<ul class="mega-menu__inner-list mega-menu__inner-list--level1">
{{#each nestedList as |item| }}
<li class="{{ item.class }}">
<a
href="{{ item.link }}"
class="{{ item.linkClass }}"
>
{{ item.heading }}
</a>
{{#if item.list}}
{{ render '@list--link' item.list merge=true }}
{{/if}}
</li>
{{/each}}
</ul>
{{/if}}
</li>
{{/each}}
</ul>
</div>
{{#if script }}
<script src="{{static 'mega-menu.js' }}"></script>
{{/if}}
{
"script": true,
"class": "",
"attributes": "",
"listClass": "",
"menulist": [
{
"class": "mega-menu__item--parent mega-menu__item--secondary",
"text": "New In",
"link": "/new-in",
"list": {
"class": "mega-menu__inner-list mega-menu__inner-list--level1",
"elements": [
{
"class": "mega-menu__inner-item",
"text": "View all",
"linkClass": "mega-menu__inner-link"
},
{
"class": "mega-menu__inner-item",
"text": "Clothing",
"linkClass": "mega-menu__inner-link"
},
{
"class": "mega-menu__inner-item",
"text": "Shoes",
"linkClass": "mega-menu__inner-link"
},
{
"class": "mega-menu__inner-item",
"text": "Accessories",
"linkClass": "mega-menu__inner-link"
},
{
"class": "mega-menu__inner-item",
"text": "Face + Body",
"linkClass": "mega-menu__inner-link"
},
{
"class": "mega-menu__inner-item",
"text": "Living + Gifts",
"linkClass": "mega-menu__inner-link"
},
{
"class": "mega-menu__inner-item",
"text": "Back in stock",
"linkClass": "mega-menu__inner-link"
},
{
"class": "mega-menu__inner-item",
"text": "Trending now",
"linkClass": "mega-menu__inner-link"
}
]
}
},
{
"class": "mega-menu__item--parent mega-menu__item--rows",
"text": "Clothing",
"link": "/clothing",
"list": {
"class": "mega-menu__inner-list mega-menu__inner-list--level1",
"elements": [
{
"class": "mega-menu__inner-item mega-menu__inner-item--inline mega-menu__column-hidden",
"text": "Row one",
"linkClass": "mega-menu__inner-link",
"isNested": true,
"content": "list--link",
"contentContext": {
"listTag": "ul",
"elementTag": "li",
"class": "mega-menu__inner-list",
"elements": [
{
"class": "mega-menu__inner-item",
"text": "columns one item",
"linkClass": "mega-menu__inner-link"
},
{
"class": "mega-menu__inner-item",
"text": "columns one item 2",
"linkClass": "mega-menu__inner-link"
}
]
}
},
{
"class": "mega-menu__inner-item mega-menu__column-hidden mega-menu__inner-item--images",
"text": "Row two",
"linkClass": "mega-menu__inner-link",
"isNested": true,
"content": "list--link-content",
"contentContext": {
"listTag": "ul",
"elementTag": "li",
"class": "mega-menu__inner-list",
"elements": [
{
"class": "mega-menu__inner-item",
"text": "Summer",
"linkClass": "mega-menu__inner-link",
"content": "image",
"contentContext": {
"src": "data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==",
"dataSrc": "/images/product/cart-product-160_160.jpg",
"alt": "brand name alt text"
}
},
{
"class": "mega-menu__inner-item",
"text": "Spring",
"linkClass": "mega-menu__inner-link",
"content": "image",
"contentContext": {
"src": "data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==",
"dataSrc": "/images/product/cart-product-160_160.jpg",
"alt": "brand name alt text"
}
},
{
"class": "mega-menu__inner-item",
"text": "Autumn",
"linkClass": "mega-menu__inner-link",
"content": "image",
"contentContext": {
"src": "data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==",
"dataSrc": "/images/product/cart-product-160_160.jpg",
"alt": "brand name alt text"
}
},
{
"class": "mega-menu__inner-item",
"text": "Winter",
"linkClass": "mega-menu__inner-link",
"content": "image",
"contentContext": {
"src": "data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==",
"dataSrc": "/images/product/cart-product-160_160.jpg",
"alt": "brand name alt text"
}
},
{
"class": "mega-menu__inner-item",
"text": "View all",
"linkClass": "mega-menu__inner-link",
"content": "image",
"contentContext": {
"src": "data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==",
"dataSrc": "/images/product/cart-product-160_160.jpg",
"alt": "brand name alt text"
}
},
{
"class": "mega-menu__inner-item",
"text": "lorem ipsum",
"linkClass": "mega-menu__inner-link",
"content": "image",
"contentContext": {
"src": "data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==",
"dataSrc": "/images/product/cart-product-160_160.jpg",
"alt": "brand name alt text"
}
}
]
}
},
{
"class": "mega-menu__inner-item mega-menu__column-hidden mega-menu__inner-item--columns",
"text": "Row three",
"linkClass": "mega-menu__inner-link",
"isNested": true,
"content": "list--link",
"contentContext": {
"listTag": "ul",
"elementTag": "li",
"class": "mega-menu__inner-list",
"elements": [
{
"class": "mega-menu__inner-item mega-menu__column-hidden",
"text": "row 3 c 1",
"linkClass": "mega-menu__inner-link",
"isNested": true,
"content": "list--link",
"contentContext": {
"listTag": "ul",
"elementTag": "li",
"class": "mega-menu__inner-list",
"elements": [
{
"class": "mega-menu__inner-item mega-menu__inner-item--children",
"text": "Men",
"linkClass": "mega-menu__inner-link",
"isNested": true,
"content": "list--link",
"contentContext": {
"listTag": "ul",
"elementTag": "li",
"class": "mega-menu__inner-list",
"elements": [
{
"class": "mega-menu__inner-item",
"text": "Elegant",
"linkClass": "mega-menu__inner-link"
},
{
"class": "mega-menu__inner-item",
"text": "Casual",
"linkClass": "mega-menu__inner-link"
},
{
"class": "mega-menu__inner-item",
"text": "Active",
"linkClass": "mega-menu__inner-link"
}
]
}
},
{
"class": "mega-menu__inner-item",
"text": "Wallets",
"linkClass": "mega-menu__inner-link"
}
]
}
},
{
"class": "mega-menu__inner-item mega-menu__column-hidden",
"text": "row 3 column 2",
"linkClass": "mega-menu__inner-link",
"isNested": true,
"content": "list--link",
"contentContext": {
"listTag": "ul",
"elementTag": "li",
"class": "mega-menu__inner-list",
"elements": [
{
"class": "mega-menu__inner-item mega-menu__inner-item--children",
"text": "Women",
"linkClass": "mega-menu__inner-link",
"isNested": true,
"content": "list--link",
"contentContext": {
"listTag": "ul",
"elementTag": "li",
"class": "mega-menu__inner-list",
"elements": [
{
"class": "mega-menu__inner-item",
"text": "Elegant",
"linkClass": "mega-menu__inner-link"
},
{
"class": "mega-menu__inner-item",
"text": "Casual",
"linkClass": "mega-menu__inner-link"
},
{
"class": "mega-menu__inner-item",
"text": "Active",
"linkClass": "mega-menu__inner-link"
}
]
}
},
{
"class": "mega-menu__inner-item",
"text": "Bags",
"linkClass": "mega-menu__inner-link"
}
]
}
},
{
"class": "mega-menu__inner-item mega-menu__column-hidden",
"text": "row 3 column 3",
"linkClass": "mega-menu__inner-link",
"isNested": true,
"content": "list--link",
"contentContext": {
"listTag": "ul",
"elementTag": "li",
"class": "mega-menu__inner-list",
"elements": [
{
"class": "mega-menu__inner-item mega-menu__inner-item--children",
"text": "Kids",
"linkClass": "mega-menu__inner-link",
"isNested": true,
"content": "list--link",
"contentContext": {
"listTag": "ul",
"elementTag": "li",
"class": "mega-menu__inner-list",
"elements": [
{
"class": "mega-menu__inner-item",
"text": "Pijamas",
"linkClass": "mega-menu__inner-link"
},
{
"class": "mega-menu__inner-item",
"text": "School Days",
"linkClass": "mega-menu__inner-link"
},
{
"class": "mega-menu__inner-item mega-menu__inner-item--children",
"text": "Kids Fance Dress",
"linkClass": "mega-menu__inner-link",
"isNested": true,
"content": "list--link",
"contentContext": {
"listTag": "ul",
"elementTag": "li",
"class": "mega-menu__inner-list",
"elements": [
{
"class": "mega-menu__inner-item",
"text": "Hats",
"linkClass": "mega-menu__inner-link"
},
{
"class": "mega-menu__inner-item",
"text": "Special Ocassions",
"linkClass": "mega-menu__inner-link"
}
]
}
}
]
}
}
]
}
},
{
"class": "mega-menu__inner-item mega-menu__column-hidden",
"text": "row 3 column 4",
"linkClass": "mega-menu__inner-link",
"isNested": true,
"content": "list--link",
"contentContext": {
"listTag": "ul",
"elementTag": "li",
"class": "mega-menu__inner-list",
"elements": [
{
"class": "mega-menu__inner-item",
"text": "Jackets",
"linkClass": "mega-menu__inner-link"
},
{
"class": "mega-menu__inner-item",
"text": "Shirts",
"linkClass": "mega-menu__inner-link"
},
{
"class": "mega-menu__inner-item",
"text": "Dresses",
"linkClass": "mega-menu__inner-link"
},
{
"class": "mega-menu__inner-item",
"text": "Trousers",
"linkClass": "mega-menu__inner-link"
},
{
"class": "mega-menu__inner-item",
"text": "Hats",
"linkClass": "mega-menu__inner-link"
}
]
}
}
]
}
}
]
}
},
{
"class": "",
"text": "Shoes",
"link": "/shoes"
},
{
"class": "",
"text": "Furniture",
"link": "/furniture"
},
{
"class": "",
"text": "Accessories",
"link": "/accessories"
},
{
"class": "mega-menu__item--parent mega-menu__item--rows",
"text": "Activewear",
"link": "/activewear",
"list": {
"class": "mega-menu__inner-list mega-menu__inner-list--level1",
"elements": [
{
"class": "mega-menu__inner-item mega-menu__inner-item--columns mega-menu__column-hidden",
"text": "Row one",
"linkClass": "mega-menu__inner-link",
"isNested": true,
"content": "list--link",
"contentContext": {
"listTag": "ul",
"elementTag": "li",
"class": "mega-menu__inner-list",
"elements": [
{
"class": "mega-menu__inner-item mega-menu__column-hidden",
"text": "row 3 c 1",
"linkClass": "mega-menu__inner-link",
"isNested": true,
"content": "list--link",
"contentContext": {
"listTag": "ul",
"elementTag": "li",
"class": "mega-menu__inner-list",
"elements": [
{
"class": "mega-menu__inner-item mega-menu__inner-item--children",
"text": "Men",
"linkClass": "mega-menu__inner-link",
"isNested": true,
"content": "list--link",
"contentContext": {
"listTag": "ul",
"elementTag": "li",
"class": "mega-menu__inner-list",
"elements": [
{
"class": "mega-menu__inner-item",
"text": "Elegant",
"linkClass": "mega-menu__inner-link"
},
{
"class": "mega-menu__inner-item",
"text": "Casual",
"linkClass": "mega-menu__inner-link"
},
{
"class": "mega-menu__inner-item",
"text": "Active",
"linkClass": "mega-menu__inner-link"
}
]
}
},
{
"class": "mega-menu__inner-item",
"text": "Wallets",
"linkClass": "mega-menu__inner-link"
}
]
}
},
{
"class": "mega-menu__inner-item mega-menu__column-hidden",
"text": "row 3 column 2",
"linkClass": "mega-menu__inner-link",
"isNested": true,
"content": "list--link",
"contentContext": {
"listTag": "ul",
"elementTag": "li",
"class": "mega-menu__inner-list",
"elements": [
{
"class": "mega-menu__inner-item mega-menu__inner-item--children",
"text": "Women",
"linkClass": "mega-menu__inner-link",
"isNested": true,
"content": "list--link",
"contentContext": {
"listTag": "ul",
"elementTag": "li",
"class": "mega-menu__inner-list",
"elements": [
{
"class": "mega-menu__inner-item",
"text": "Elegant",
"linkClass": "mega-menu__inner-link"
},
{
"class": "mega-menu__inner-item",
"text": "Casual",
"linkClass": "mega-menu__inner-link"
},
{
"class": "mega-menu__inner-item",
"text": "Active",
"linkClass": "mega-menu__inner-link"
}
]
}
},
{
"class": "mega-menu__inner-item",
"text": "Bags",
"linkClass": "mega-menu__inner-link"
}
]
}
},
{
"class": "mega-menu__inner-item mega-menu__column-hidden",
"text": "row 3 column 3",
"linkClass": "mega-menu__inner-link",
"isNested": true,
"content": "list--link",
"contentContext": {
"listTag": "ul",
"elementTag": "li",
"class": "mega-menu__inner-list",
"elements": [
{
"class": "mega-menu__inner-item mega-menu__inner-item--children",
"text": "Kids",
"linkClass": "mega-menu__inner-link",
"isNested": true,
"content": "list--link",
"contentContext": {
"listTag": "ul",
"elementTag": "li",
"class": "mega-menu__inner-list",
"elements": [
{
"class": "mega-menu__inner-item",
"text": "Pijamas",
"linkClass": "mega-menu__inner-link"
},
{
"class": "mega-menu__inner-item",
"text": "School Days",
"linkClass": "mega-menu__inner-link"
},
{
"class": "mega-menu__inner-item",
"text": "Fance Dress",
"linkClass": "mega-menu__inner-link"
},
{
"class": "mega-menu__inner-item",
"text": "Special Occasion",
"linkClass": "mega-menu__inner-link"
}
]
}
}
]
}
},
{
"class": "mega-menu__inner-item mega-menu__column-hidden",
"text": "row 3 column 4",
"linkClass": "mega-menu__inner-link",
"isNested": true,
"content": "list--link",
"contentContext": {
"listTag": "ul",
"elementTag": "li",
"class": "mega-menu__inner-list",
"elements": [
{
"class": "mega-menu__inner-item",
"text": "Jackets",
"linkClass": "mega-menu__inner-link"
},
{
"class": "mega-menu__inner-item",
"text": "Shirts",
"linkClass": "mega-menu__inner-link"
},
{
"class": "mega-menu__inner-item",
"text": "Dresses",
"linkClass": "mega-menu__inner-link"
},
{
"class": "mega-menu__inner-item",
"text": "Trousers",
"linkClass": "mega-menu__inner-link"
},
{
"class": "mega-menu__inner-item",
"text": "Hats",
"linkClass": "mega-menu__inner-link"
}
]
}
}
]
}
},
{
"text": false
}
]
}
},
{
"class": "mega-menu__item--parent mega-menu__item--secondary",
"text": "Brands Brands",
"link": "/brands",
"list": {
"class": "mega-menu__inner-list mega-menu__inner-list--level1",
"elements": [
{
"class": "mega-menu__inner-item",
"text": "View all",
"linkClass": "mega-menu__inner-link"
},
{
"class": "mega-menu__inner-item",
"text": "Clothing",
"linkClass": "mega-menu__inner-link"
},
{
"class": "mega-menu__inner-item",
"text": "Shoes",
"linkClass": "mega-menu__inner-link"
},
{
"class": "mega-menu__inner-item",
"text": "Accessories",
"linkClass": "mega-menu__inner-link"
},
{
"class": "mega-menu__inner-item",
"text": "Face + Body",
"linkClass": "mega-menu__inner-link"
},
{
"class": "mega-menu__inner-item",
"text": "Living + Gifts",
"linkClass": "mega-menu__inner-link"
},
{
"class": "mega-menu__inner-item",
"text": "Back in stock",
"linkClass": "mega-menu__inner-link"
},
{
"class": "mega-menu__inner-item",
"text": "Trending now",
"linkClass": "mega-menu__inner-link"
}
]
}
}
]
}
$mega-menu__position : relative !default;
$mega-menu__breakpoint : $screen-l !default;
$mega-menu__z-index : $z-index-high !default;
$mega-menu__background-color : $color-primary !default;
$mega-menu__margin : 0 !default;
$mega-menu__border : 0 !default;
$mega-menu__border-width : 0 !default;
$mega-menu__before-display : block !default;
//link
$mega-menu__link-height : 56px !default;
$mega-menu__link-padding : 0 $spacer--semi-medium !default;
$mega-menu__link-color : $gray-light !default;
$mega-menu__link-text-decoration : none !default;
$mega-menu__link-font-family : $font-family-base !default;
$mega-menu__link-font-size : $font-size-base !default;
$mega-menu__link-font-weight : $font-weight-base !default;
$mega-menu__link-text-transform : uppercase !default;
$mega-menu__link-color--hover : $color-primary !default;
$mega-menu__link-text-decoration--hover : none !default;
$mega-menu__link-background-color : transparent !default;
$mega-menu__link-background-color--hover : $white !default;
$mega-menu__link-background-color--focus-within : $white !default;
//inner link
$mega-menu__inner-link-min-height : 48px !default;
$mega-menu__inner-link-padding : 0 $spacer--medium !default;
$mega-menu__inner-link-margin : 0 !default;
$mega-menu__inner-link-font-size : $font-size-base !default;
$mega-menu__inner-link-font-weight : $font-weight-medium !default;
$mega-menu__inner-link-color : $color-primary !default;
$mega-menu__inner-link-text-decoration : none !default;
$mega-menu__inner-link-text-transform : capitalize !default;
$mega-menu__inner-link-text-decoration--hover : none !default;
$mega-menu__inner-link-color--hover : $color-primary !default;
$mega-menu__inner-link-font-weight--hover : $font-weight-bold !default;
$mega-menu__inner-link-before-transform--hover : scaleX(1) !default;
$mega-menu__inner-link-before-display : block !default;
$mega-menu__inner-link-before-content : '' !default;
$mega-menu__inner-link-before-width : 100% !default;
$mega-menu__inner-link-before-position-left : 0 !default;
$mega-menu__inner-link-before-position-top : 0 !default;
$mega-menu__inner-link-before-position-bottom : 0 !default;
$mega-menu__inner-link-before-bg : $gray !default;
$mega-menu__inner-link-before-transform : scaleX(0) !default;
$mega-menu__inner-link-before-transform-origin : 0 50% !default;
$mega-menu__inner-link-before-transition : all 0.5s ease-in-out !default;
//inner item
$mega-menu__inner-item-padding : 0 !default;
$mega-menu__inner-item-margin : 0 !default;
//inner item nested
$mega-menu__inner-item-padding--children : 0 0 0 $spacer--medium !default;
//list
$mega-menu__list-position : relative !default;
$mega-menu__list-padding : 0 !default;
$mega-menu__list-justify-content : space-between !default;
$mega-menu__list-background-color : $white !default;
//inner list
$mega-menu__inner-list-padding : 0 !default;
$mega-menu__inner-list-margin : 0 !default;
$mega-menu__inner-list-background-color : $white !default;
//inner list--level1
$mega-menu__inner-list-top--level1 : 100% !default;
$mega-menu__inner-list-width--level1 : 100% !default;
$mega-menu__inner-list-padding--level1 : $spacer--medium 0 !default;
$mega-menu__inner-list-margin--level1 : 0 !default;
$mega-menu__inner-list-box-shadow--level1 : $shadow !default;
//inner list--secondary (level1)
$mega-menu__inner-list-width--secondary : 320px !default;
$mega-menu__inner-list-padding--secondary : $spacer--semi-medium $spacer--medium !default;
//inner list--rows (level1)
$mega-menu__inner-list-padding--rows : $spacer--medium 0 $spacer--semi-medium 0 !default;
$mega-menu__inner-item-padding--rows : $spacer--medium $spacer--medium !default;
$mega-menu__inner-item-border--rows : $border-base !default;
//inner list--inline
$mega-menu__inner-link-font-weight--inline : $font-weight-bold !default;
$mega-menu__inner-link-before-bg-color--inline : $color-primary !default;
$mega-menu__inner-link-color-hover-inline : $white !default;
//inner list--images
$mega-menu__inner-link-font-weight--images : $font-weight-medium !default;
$mega-menu__inner-link-align-items--images : flex-start !default;
//inner list--children
$mega-menu__inner-link-padding--children : 0 $spacer--large !default;
$mega-menu__inner-link-font-weight--children : $font-weight-base !default;
$mega-menu__inner-link-font-size--children : $font-size-base !default;
$mega-menu__inner-link-color--children : $color-secondary !default;
$mega-menu__inner-link-color-hover--children : $color-primary !default;
$mega-menu__inner-link-text-decoration-hover--children: underline !default;
$mega-menu__inner-link-before-display-hover--children : none !default;
$mega-menu__inner-link-text-transform--children : $mega-menu__inner-link-text-transform !default;
@import 'mega-menu-variables';
.mega-menu {
display: none;
position: $mega-menu__position;
margin: $mega-menu__margin;
z-index: $mega-menu__z-index;
border: $mega-menu__border;
border-width: $mega-menu__border-width;
@include mq($mega-menu__breakpoint) {
display: block;
}
&:before {
display: $mega-menu__before-display;
position: absolute;
content: '';
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: $mega-menu__background-color;
z-index: $mega-menu__z-index + 1;
}
&__list {
position: $mega-menu__list-position;
display: flex;
flex-wrap: nowrap;
justify-content: $mega-menu__list-justify-content;
padding: $mega-menu__list-padding;
list-style: none;
background-color: $mega-menu__list-background-color;
}
&__inner-list {
display: flex;
flex-direction: column;
padding: $mega-menu__inner-list-padding;
margin: $mega-menu__inner-list-margin;
background-color: $mega-menu__inner-list-background-color;
list-style: none;
&--level1 {
display: none;
position: absolute;
top: $mega-menu__inner-list-top--level1;
left: 0;
z-index: $mega-menu__z-index;
width: $mega-menu__inner-list-width--level1;
padding: $mega-menu__inner-list-padding--level1;
margin: $mega-menu__inner-list-margin--level1;
box-shadow: $mega-menu__inner-list-box-shadow--level1;
}
}
&__item {
display: flex;
&:hover,
&:active,
.focus-visible {
.mega-menu__inner-list--level1 {
display: flex;
}
.mega-menu__link {
color: $mega-menu__link-color--hover;
text-decoration: $mega-menu__link-text-decoration--hover;
background-color: $mega-menu__link-background-color--hover;
}
}
// 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 {
background-color: $mega-menu__link-background-color--focus-within;
color: $mega-menu__link-color--hover;
text-decoration: $mega-menu__link-text-decoration--hover;
background-color: $mega-menu__link-background-color--hover;
}
}
& > .mega-menu__link:focus + .mega-menu__inner-list--level1 {
display: flex;
}
&--secondary {
position: relative;
> .mega-menu__inner-list {
width: $mega-menu__inner-list-width--secondary;
padding: $mega-menu__inner-list-padding--secondary;
}
&:last-child {
> .mega-menu__inner-list {
left: auto;
right: 0;
}
}
}
&--rows {
> .mega-menu__inner-list {
padding: $mega-menu__inner-list-padding--rows;
> .mega-menu__inner-item {
padding: $mega-menu__inner-item-padding--rows;
border-bottom: $mega-menu__inner-item-border--rows;
&:first-child {
padding-top: 0;
}
&:last-child {
border-bottom: 0;
padding-bottom: 0;
}
}
}
}
}
&__inner-item {
padding: $mega-menu__inner-item-padding;
margin: $mega-menu__inner-item-margin;
&--inline {
> .mega-menu__inner-list {
flex-direction: row;
justify-content: flex-start;
> .mega-menu__inner-item {
> .mega-menu__inner-link {
font-weight: $mega-menu__inner-link-font-weight--inline;
&:before {
background-color: $mega-menu__inner-link-before-bg-color--inline;
}
&:hover {
color: $mega-menu__inner-link-color-hover-inline;
}
}
}
}
}
&--images {
> .mega-menu__inner-list {
flex-direction: row;
justify-content: space-between;
> .mega-menu__inner-item {
> .mega-menu__inner-link {
display: flex;
flex-direction: column;
align-items: $mega-menu__inner-link-align-items--images;
font-weight: $mega-menu__inner-link-font-weight--images;
&:before {
display: none;
}
}
}
}
}
&--columns {
> .mega-menu__inner-list {
flex-direction: row;
> .mega-menu__inner-item {
flex-grow: 1;
flex-basis: 0;
}
}
}
&--children {
> .mega-menu__inner-list {
> .mega-menu__inner-item {
> .mega-menu__inner-link {
padding: $mega-menu__inner-link-padding--children;
font-weight: $mega-menu__inner-link-font-weight--children;
font-size: $mega-menu__inner-link-font-size--children;
color: $mega-menu__inner-link-color--children;
text-transform: $mega-menu__inner-link-text-transform--children;
&:hover,
.focus-visible {
color: $mega-menu__inner-link-color-hover--children;
text-decoration: $mega-menu__inner-link-text-decoration-hover--children;
&:before {
display: $mega-menu__inner-link-before-display-hover--children;
}
}
}
}
}
.mega-menu__inner-item--children {
padding: $mega-menu__inner-item-padding--children;
}
}
}
&__link {
display: flex;
padding: $mega-menu__link-padding;
position: relative;
align-items: center;
height: $mega-menu__link-height;
z-index: $mega-menu__z-index + 1;
color: $mega-menu__link-color;
text-decoration: $mega-menu__link-text-decoration;
text-transform: $mega-menu__link-text-transform;
background-color: $mega-menu__link-background-color;
font-weight: $mega-menu__link-font-weight;
font-size: $mega-menu__link-font-size;
font-family: $mega-menu__link-font-family;
}
&__inner-link {
position: relative;
display: flex;
align-items: center;
min-height: $mega-menu__inner-link-min-height;
padding: $mega-menu__inner-link-padding;
margin: $mega-menu__inner-link-margin;
font-size: $mega-menu__inner-link-font-size;
font-weight: $mega-menu__inner-link-font-weight;
color: $mega-menu__inner-link-color;
text-decoration: $mega-menu__inner-link-text-decoration;
text-transform: $mega-menu__inner-link-text-transform;
&:before {
content: $mega-menu__inner-link-before-content;
display: $mega-menu__inner-link-before-display;
position: absolute;
width: $mega-menu__inner-link-before-width;
left: $mega-menu__inner-link-before-position-left;
top: $mega-menu__inner-link-before-position-top;
bottom: $mega-menu__inner-link-before-position-bottom;
background-color: $mega-menu__inner-link-before-bg;
transform: $mega-menu__inner-link-before-transform;
transform-origin: $mega-menu__inner-link-before-transform-origin;
transition: $mega-menu__inner-link-before-transition;
pointer-events: none;
z-index: -1;
}
&:hover,
.focus-visible {
text-decoration: $mega-menu__inner-link-text-decoration--hover;
color: $mega-menu__inner-link-color--hover;
font-weight: $mega-menu__inner-link-font-weight--hover;
z-index: 100;
&:before {
transform: $mega-menu__inner-link-before-transform--hover;
}
}
}
&__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--parent > .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)];
let indexInInners = focusableInners.indexOf(e.target);
let 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'));
No notes defined.