<nav aria-label="Our Work menu" class="secondary-navigation-container">
<div data-expanded="false" class="js-secondary-nav secondary-navigation-container__menu">
<ul class="secondary-navigation ">
<li class="secondary-navigation__heading">
<a class="secondary-navigation__heading-link" href="https://google.com">Our Work
</a>
</li>
<li class="secondary-navigation__item">
<a class="
secondary-navigation__item-link
secondary-navigation__item-link--active-trail
" href="http://google.com">
Interior Page 1
<span class="secondary-navigation__item-link-icon">
<svg aria-hidden="true" class="down-toggle-icon" xmlns="http://www.w3.org/2000/svg" width="12" height="6" viewBox="0 0 12 6">
<path class="_mark down-toggle-icon__shape" fill="#FF552E" fill-rule="evenodd" d="M12 0L6 6 0 0z" />
</svg>
</span>
</a>
<ul class="secondary-navigation-children">
<li class="secondary-navigation-children__item">
<a class="
secondary-navigation-children__item-link
" href="http://google.com">Child Page 1
</a>
</li>
<li class="secondary-navigation-children__item">
<a class="
secondary-navigation-children__item-link
secondary-navigation-children__item-link--active
" href="http://google.com">Child Page 2
</a>
<ul class="secondary-navigation-children">
</ul>
</li>
<li class="secondary-navigation-children__item">
<a class="
secondary-navigation-children__item-link
" href="http://google.com">Child Page 3
</a>
</li>
</ul>
</li>
<li class="secondary-navigation__item">
<a class="
secondary-navigation__item-link
" href="http://google.com">
Interior Page 2
<span class="secondary-navigation__item-link-icon">
<svg aria-hidden="true" class="down-toggle-icon" xmlns="http://www.w3.org/2000/svg" width="12" height="6" viewBox="0 0 12 6">
<path class="_mark down-toggle-icon__shape" fill="#FF552E" fill-rule="evenodd" d="M12 0L6 6 0 0z" />
</svg>
</span>
</a>
</li>
<li class="secondary-navigation__item">
<a class="
secondary-navigation__item-link
" href="http://google.com">
Interior Page 3
</a>
</li>
</ul>
</div>
</nav>
{% for item in mainMenu.items %}
{% if item.isDescendantActive or item.isActive %}
<nav aria-label="{{ item.title }} menu" class="secondary-navigation-container">
<div data-expanded="false" class="js-secondary-nav secondary-navigation-container__menu">
<ul class="secondary-navigation {{ child ? 'secondary-navigation--child' }}">
<li class="secondary-navigation__heading">
<a
class="secondary-navigation__heading-link"
href="{{ item.url }}">{{ item.title }}
</a>
</li>
{% for item in item.children %}
<li class="secondary-navigation__item">
<a
class="
secondary-navigation__item-link
{{ item.isActive ? 'secondary-navigation__item-link--active' }}
{{ item.isDescendantActive ? 'secondary-navigation__item-link--active-trail' }}
"
href="{{ item.url }}">
{{ item.title }}
{% if item.children %}
<span class="secondary-navigation__item-link-icon">
{% include 'bits/icons/down-toggle.twig' %}
</span>
{% endif %}
</a>
{% if item.isDescendantActive or item.isActive %}
{% include 'partials/secondary-navigation-children/secondary-navigation-children.twig' with { items: item.children } %}
{% endif %}
</li>
{% endfor %}
</ul>
</div>
</nav>
{% endif %}
{% endfor %}
{
"site": {
"name": "E3 Alliance"
},
"mainMenu": {
"currentPageInMenu": true,
"items": [
{
"title": "Our Work",
"url": "https://google.com",
"isActive": true,
"isChildActive": false,
"isDescendantActive": true,
"children": [
{
"title": "Interior Page 1",
"url": "http://google.com",
"isActive": false,
"isChildActive": true,
"isDescendantActive": true,
"children": [
{
"title": "Child Page 1",
"url": "http://google.com",
"isActive": false,
"isChildActive": false,
"isDescendantActive": false,
"children": []
},
{
"title": "Child Page 2",
"url": "http://google.com",
"isActive": true,
"isChildActive": false,
"isDescendantActive": false,
"children": []
},
{
"title": "Child Page 3",
"url": "http://google.com",
"isActive": false,
"isChildActive": false,
"isDescendantActive": false,
"children": []
}
]
},
{
"title": "Interior Page 2",
"url": "http://google.com",
"isActive": false,
"isChildActive": false,
"isDescendantActive": false,
"children": [
{
"title": "Child Page 1",
"url": "http://google.com",
"isActive": false,
"isChildActive": false,
"isDescendantActive": false,
"children": []
},
{
"title": "Child Page 2",
"url": "http://google.com",
"isActive": true,
"isChildActive": false,
"isDescendantActive": false,
"children": []
},
{
"title": "Child Page 3",
"url": "http://google.com",
"isActive": false,
"isChildActive": false,
"isDescendantActive": false,
"children": []
}
]
},
{
"title": "Interior Page 3",
"url": "http://google.com",
"isActive": false,
"isChildActive": false,
"isDescendantActive": false,
"children": []
}
]
},
{
"title": "Services",
"url": "http://google.com",
"isActive": false,
"isChildActive": false,
"isDescendantActive": false,
"children": [
{
"title": "Interior Page 1",
"url": "http://google.com",
"isActive": false,
"isChildActive": false,
"isDescendantActive": false,
"children": []
},
{
"title": "Interior Page 2",
"url": "http://google.com",
"isActive": false,
"isChildActive": false,
"isDescendantActive": false,
"children": []
},
{
"title": "Interior Page 3",
"url": "http://google.com",
"isActive": false,
"isChildActive": false,
"isDescendantActive": false,
"children": []
}
]
},
{
"title": "About",
"url": "http://google.com",
"isActive": false,
"isChildActive": false,
"isDescendantActive": false,
"children": [
{
"title": "Interior Page 1 Interior Page 1 Interior Page 1 Interior Page 1",
"url": "http://google.com",
"isActive": false,
"isChildActive": false,
"isDescendantActive": false,
"children": []
},
{
"title": "Interior Page 2",
"url": "http://google.com",
"isActive": false,
"isChildActive": false,
"isDescendantActive": false,
"children": []
},
{
"title": "Interior Page 3",
"url": "http://google.com",
"isActive": false,
"isChildActive": false,
"isDescendantActive": false,
"children": []
},
{
"title": "Interior Page 4",
"url": "http://google.com",
"isActive": false,
"isChildActive": false,
"isDescendantActive": true,
"children": []
},
{
"title": "Interior Page 5",
"url": "http://google.com",
"isActive": false,
"isChildActive": false,
"isDescendantActive": false,
"children": []
},
{
"title": "Interior Page 6",
"url": "http://google.com",
"isActive": false,
"isChildActive": false,
"isDescendantActive": false,
"children": []
},
{
"title": "Interior Page 7",
"url": "http://google.com",
"isActive": false,
"isChildActive": false,
"isDescendantActive": false,
"children": []
}
]
},
{
"title": "Invest",
"url": "http://google.com",
"isActive": false,
"isChildActive": false,
"isDescendantActive": false,
"children": [
{
"title": "Interior Page 1",
"url": "http://google.com",
"isActive": false,
"isChildActive": false,
"isDescendantActive": false,
"children": []
},
{
"title": "Interior Page 2",
"url": "http://google.com",
"isActive": false,
"isChildActive": false,
"isDescendantActive": false,
"children": []
},
{
"title": "Interior Page 3",
"url": "http://google.com",
"isActive": false,
"isChildActive": false,
"isDescendantActive": false,
"children": []
}
]
}
]
}
}
breakpoint = 1000px
.secondary-navigation-container
--backgroundColor none
--backgroundColorActive none
--borderColor sapphire
--borderColorSmall sapphire
--headingBorder sapphire
--headingLinkColor e3green
--headingLinkColorActive white
--linkColorActive sapphire
--iconFillColor jet
--iconFillColorActive white
width 100%
+below(breakpoint)
position absolute
top 0
right 0
z-index 1
&__heading
+above(breakpoint)
display none
&__heading-link
@extends $linkSmall
background-color var(--backgroundColor)
border-bottom 2px solid var(--headingBorder)
color var(--headingLinkColor)
display flex
text-decoration none
padding 16px 32px
z-index 1
+below(breakpointHeaderSmall)
padding-left 16px
+between(breakpointHeaderSmall, breakpoint)
padding-left 32px
padding-right 32px
position relative
cursor pointer
width 100%
transition all 0.3s
&[aria-expanded="true"]
background-color var(--backgroundColorActive)
border-color var(--borderColor)
color var(--headingLinkColorActive)
+below(breakpoint)
border-color var(--borderColorSmall)
& ^[0]__heading-link-icon
transform rotate(180deg)
& .down-toggle-icon__shape
& ._mark
fill var(--iconFillColorActive)
&__heading-link-icon
position absolute
right 16px
& .down-toggle-icon__shape
& ._mark
fill var(--iconFillColor)
+above(breakpointHeaderSmall)
right 32px
transition all 0.3s
&__menu
+below(breakpoint)
display none
border-bottom 2px solid var(--borderColor)
&[data-collapsing]
animation slideOut 0.5s
&[data-expanding]
display block
animation slideIn 0.5s
&[data-expanded=true]
display block
@keyframes slideIn
0%
opacity 0
transform translateY(-10px)
100%
opacity 1
transform translateY(0)
@keyframes slideOut
0%
opacity 1
transform translateY(0)
100%
opacity 0
transform translateY(-10px)
breakpoint = 1000px
breakpointSmall = 700px
.secondary-navigation
--borderColor sapphire
--borderRadius 0
--linkColorActive sapphire
--iconFillColor jet
--textColor jet
margin-left 0
&__heading-link
@extends $headline4
border-bottom 1px solid var(--borderColor)
color var(--headingLinkColor)
display flex
line-height 28px
text-decoration none
padding 16px 16px 16px 0
&:focus
&:hover
&:active
color jet
&__item
border-bottom 1px solid var(--borderColor)
overflow hidden
&:not(:last-child)
margin-bottom -2px
&:last-child
+above(breakpoint)
border-bottom-left-radius var(--borderRadius)
border-bottom-right-radius var(--borderRadius)
&:first-child
+above(breakpoint)
border-top-left-radius var(--borderRadius)
border-top-right-radius var(--borderRadius)
+below(breakpoint)
border-left none
border-right none
&__item-link
@extends $linkBase
color var(--textColor)
display flex
justify-content space-between
font-weight 300
line-height 24px
text-decoration none
padding 18px 18px 16px 0
transition padding ease 0.3s
+between(breakpointHeaderSmall, breakpoint)
padding-left 32px
position relative
&:focus
&:hover
&:active
padding-left 4px
&--active
&--active-trail
color var(--linkColorActive)
font-weight 700
padding-bottom 8px
& ^[0]__item-link-icon
transform rotate(180deg)
&--active-trail
color jet
&__item-link-icon
margin-left 8px
position relative
width 24px
height 24px
+between(breakpointHeaderSmall, breakpoint)
right 32px
& .down-toggle-icon__shape
fill var(--iconFillColor)
No notes defined.