<nav role="navigation" class="c-primary-nav">
<div class="c-primary-nav__menu-toggle js-toggle" data-toggled="body" data-prefix="primary-nav" aria-label="Menu" role="button">
<span></span>
<span></span>
<span></span>
</div>
<div class="c-primary-nav__container">
<ul class="c-primary-nav__parent-list">
<li class="c-primary-nav__parent-list-item js-this">
<div class="c-primary-nav__link-wrap"> <a class="o-link c-primary-nav__parent-list-link" href="/" target="_self">
<span class="o-link__label">
About
</span>
</a>
<button class="o-button o-button--icon c-primary-nav__link-toggle js-toggle" data-prefix="this" data-toggled="this" aria-label="Expand">
<span class="o-icon o-icon--md">
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentcolor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.29289 9.29289C7.68342 8.90237 8.31658 8.90237 8.70711 9.29289L12 12.5858L15.2929 9.29289C15.6834 8.90237 16.3166 8.90237 16.7071 9.29289C17.0976 9.68342 17.0976 10.3166 16.7071 10.7071L12.7071 14.7071C12.3166 15.0976 11.6834 15.0976 11.2929 14.7071L7.29289 10.7071C6.90237 10.3166 6.90237 9.68342 7.29289 9.29289Z" />
</svg>
</span>
</button>
</div>
<ul class="c-primary-nav__child-list">
<li class="c-primary-nav__child-list-item js-this">
<a class="o-link c-primary-nav__child-list-link" href="/" target="_self">
<span class="o-link__label">
Child Link 1
</span>
</a>
</li>
<li class="c-primary-nav__child-list-item js-this">
<div class="c-primary-nav__child-link-wrap"> <a class="o-link c-primary-nav__child-list-link" href="/" target="_self">
<span class="o-link__label">
Child Link 2
</span>
</a>
<button class="o-button o-button--icon c-primary-nav__child-link-toggle js-toggle" data-prefix="this" data-toggled="this" aria-label="Expand">
<span class="o-icon o-icon--md">
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentcolor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.29289 9.29289C7.68342 8.90237 8.31658 8.90237 8.70711 9.29289L12 12.5858L15.2929 9.29289C15.6834 8.90237 16.3166 8.90237 16.7071 9.29289C17.0976 9.68342 17.0976 10.3166 16.7071 10.7071L12.7071 14.7071C12.3166 15.0976 11.6834 15.0976 11.2929 14.7071L7.29289 10.7071C6.90237 10.3166 6.90237 9.68342 7.29289 9.29289Z" />
</svg>
</span>
</button>
</div>
<ul class="c-primary-nav__grandchild-list">
<li class="c-primary-nav__grandchild-list-item">
<a class="o-link c-primary-nav__grandchild-list-link" href="/" target="_self">
<span class="o-link__label">
Grandchild Link 1
</span>
</a>
</li>
<li class="c-primary-nav__grandchild-list-item">
<a class="o-link c-primary-nav__grandchild-list-link" href="/" target="_self">
<span class="o-link__label">
Grandchild Link 2
</span>
</a>
</li>
</ul>
</li>
<li class="c-primary-nav__child-list-item js-this">
<a class="o-link c-primary-nav__child-list-link" href="/" target="_self">
<span class="o-link__label">
Child Link 3
</span>
</a>
</li>
<li class="c-primary-nav__child-list-item js-this">
<a class="o-link c-primary-nav__child-list-link" href="/" target="_self">
<span class="o-link__label">
Child Link 4
</span>
</a>
</li>
</ul>
</li>
<li class="c-primary-nav__parent-list-item js-this">
<div class="c-primary-nav__link-wrap"> <a class="o-link c-primary-nav__parent-list-link" href="/" target="_self">
<span class="o-link__label">
Traffic & Travel
</span>
</a>
<button class="o-button o-button--icon c-primary-nav__link-toggle js-toggle" data-prefix="this" data-toggled="this" aria-label="Expand">
<span class="o-icon o-icon--md">
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentcolor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.29289 9.29289C7.68342 8.90237 8.31658 8.90237 8.70711 9.29289L12 12.5858L15.2929 9.29289C15.6834 8.90237 16.3166 8.90237 16.7071 9.29289C17.0976 9.68342 17.0976 10.3166 16.7071 10.7071L12.7071 14.7071C12.3166 15.0976 11.6834 15.0976 11.2929 14.7071L7.29289 10.7071C6.90237 10.3166 6.90237 9.68342 7.29289 9.29289Z" />
</svg>
</span>
</button>
</div>
<ul class="c-primary-nav__child-list">
<li class="c-primary-nav__child-list-item js-this">
<a class="o-link c-primary-nav__child-list-link" href="/" target="_self">
<span class="o-link__label">
Child Link 1
</span>
</a>
</li>
<li class="c-primary-nav__child-list-item js-this">
<a class="o-link c-primary-nav__child-list-link" href="/" target="_self">
<span class="o-link__label">
Child Link 2
</span>
</a>
</li>
<li class="c-primary-nav__child-list-item js-this">
<a class="o-link c-primary-nav__child-list-link" href="/" target="_self">
<span class="o-link__label">
Child Link 3
</span>
</a>
</li>
<li class="c-primary-nav__child-list-item js-this">
<a class="o-link c-primary-nav__child-list-link" href="/" target="_self">
<span class="o-link__label">
Child Link 4
</span>
</a>
</li>
</ul>
</li>
<li class="c-primary-nav__parent-list-item js-this">
<div class="c-primary-nav__link-wrap"> <a class="o-link c-primary-nav__parent-list-link" href="/" target="_self">
<span class="o-link__label">
Doing Buisness
</span>
</a>
<button class="o-button o-button--icon c-primary-nav__link-toggle js-toggle" data-prefix="this" data-toggled="this" aria-label="Expand">
<span class="o-icon o-icon--md">
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentcolor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.29289 9.29289C7.68342 8.90237 8.31658 8.90237 8.70711 9.29289L12 12.5858L15.2929 9.29289C15.6834 8.90237 16.3166 8.90237 16.7071 9.29289C17.0976 9.68342 17.0976 10.3166 16.7071 10.7071L12.7071 14.7071C12.3166 15.0976 11.6834 15.0976 11.2929 14.7071L7.29289 10.7071C6.90237 10.3166 6.90237 9.68342 7.29289 9.29289Z" />
</svg>
</span>
</button>
</div>
<ul class="c-primary-nav__child-list">
<li class="c-primary-nav__child-list-item js-this">
<a class="o-link c-primary-nav__child-list-link" href="/" target="_self">
<span class="o-link__label">
Child Link 1
</span>
</a>
</li>
<li class="c-primary-nav__child-list-item js-this">
<a class="o-link c-primary-nav__child-list-link" href="/" target="_self">
<span class="o-link__label">
Child Link 2
</span>
</a>
</li>
<li class="c-primary-nav__child-list-item js-this">
<a class="o-link c-primary-nav__child-list-link" href="/" target="_self">
<span class="o-link__label">
Child Link 3
</span>
</a>
</li>
<li class="c-primary-nav__child-list-item js-this">
<a class="o-link c-primary-nav__child-list-link" href="/" target="_self">
<span class="o-link__label">
Child Link 4
</span>
</a>
</li>
</ul>
</li>
<li class="c-primary-nav__parent-list-item js-this">
<div class="c-primary-nav__link-wrap"> <a class="o-link c-primary-nav__parent-list-link" href="/" target="_self">
<span class="o-link__label">
Projects
</span>
</a>
<button class="o-button o-button--icon c-primary-nav__link-toggle js-toggle" data-prefix="this" data-toggled="this" aria-label="Expand">
<span class="o-icon o-icon--md">
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentcolor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.29289 9.29289C7.68342 8.90237 8.31658 8.90237 8.70711 9.29289L12 12.5858L15.2929 9.29289C15.6834 8.90237 16.3166 8.90237 16.7071 9.29289C17.0976 9.68342 17.0976 10.3166 16.7071 10.7071L12.7071 14.7071C12.3166 15.0976 11.6834 15.0976 11.2929 14.7071L7.29289 10.7071C6.90237 10.3166 6.90237 9.68342 7.29289 9.29289Z" />
</svg>
</span>
</button>
</div>
<ul class="c-primary-nav__child-list">
<li class="c-primary-nav__child-list-item js-this">
<a class="o-link c-primary-nav__child-list-link" href="/" target="_self">
<span class="o-link__label">
Child Link 1
</span>
</a>
</li>
<li class="c-primary-nav__child-list-item js-this">
<a class="o-link c-primary-nav__child-list-link" href="/" target="_self">
<span class="o-link__label">
Child Link 2
</span>
</a>
</li>
<li class="c-primary-nav__child-list-item js-this">
<a class="o-link c-primary-nav__child-list-link" href="/" target="_self">
<span class="o-link__label">
Child Link 3
</span>
</a>
</li>
<li class="c-primary-nav__child-list-item js-this">
<a class="o-link c-primary-nav__child-list-link" href="/" target="_self">
<span class="o-link__label">
Child Link 4
</span>
</a>
</li>
</ul>
</li>
<li class="c-primary-nav__parent-list-item c-primary-nav__parent-list-item--button u-hide-after--lg">
<a class="o-button c-primary-nav__button" href="#">
<span class="o-button__label">
MyDOTD
</span>
</a>
</li>
</ul>
</div>
</nav>
{% set base_class = primary_nav.base_class|default('c-primary-nav') %}
{% if primary_nav.items %}
<nav role="navigation" class="{{ bem(base_class, primary_nav.element, primary_nav.modifiers, primary_nav.extra) }}">
<div class="{{ bem(base_class, 'menu-toggle') }} js-toggle" data-toggled="body" data-prefix="primary-nav" aria-label="Menu" role="button">
<span></span>
<span></span>
<span></span>
</div>
<div class="{{ bem(base_class, 'container') }}">
<ul class="{{ bem(base_class, 'parent-list') }}">
{% for item in primary_nav.items %}
<li class="{{ bem(base_class, 'parent-list-item') }} js-this">
{% if item.children %}<div class="{{ bem(base_class, 'link-wrap') }}">{% endif %}
{% include "@link" with {
"link": {
"text": item.text,
"url": item.url,
"target": item.target,
"extra": bem(base_class, 'parent-list-link')
}
} %}
{% if item.children %}
{% include "@button" with {
"button": {
"icon": {
"name": "chevron-down",
"modifiers": "md"
},
"attributes": {
"aria-label": "Expand",
"data-toggled": "this",
"data-prefix": "this"
},
"modifiers": "icon",
"extra": [bem(base_class, 'link-toggle'), 'js-toggle']
}
} %}
</div>
<ul class="{{ bem(base_class, 'child-list') }}">
{% for item in item.children %}
<li class="{{ bem(base_class, 'child-list-item') }} js-this">
{% if item.children %}<div class="{{ bem(base_class, 'child-link-wrap') }}">{% endif %}
{% include "@link" with {
"link": {
"text": item.text,
"url": item.url,
"target": item.target,
"extra": bem(base_class, 'child-list-link')
}
} %}
{% if item.children %}
{% include "@button" with {
"button": {
"icon": {
"name": "chevron-down",
"modifiers": "md"
},
"attributes": {
"aria-label": "Expand",
"data-toggled": "this",
"data-prefix": "this"
},
"modifiers": "icon",
"extra": [bem(base_class, 'child-link-toggle'), 'js-toggle']
}
} %}
</div>
<ul class="{{ bem(base_class, 'grandchild-list') }}">
{% for item in item.children %}
<li class="{{ bem(base_class, 'grandchild-list-item') }}">
{% include "@link" with {
"link": {
"text": item.text,
"url": item.url,
"target": item.target,
"extra": bem(base_class, 'grandchild-list-link')
}
} %}
</li>
{% endfor %}
</ul>
{% endif %}
</li>
{% endfor %}
</ul>
{% endif %}
</li>
{% endfor %}
<li class="{{ bem(base_class, 'parent-list-item', 'button') }} u-hide-after--lg">
{% include "@button" with {
"button": {
"text": "MyDOTD",
"url": "#",
"extra": bem(base_class, 'button')
}
} %}
</li>
</ul>
</div>
</nav>
{% endif %}
{
"primary_nav": {
"items": [
{
"text": "About",
"url": "/",
"children": [
{
"text": "Child Link 1",
"url": "/"
},
{
"text": "Child Link 2",
"url": "/",
"children": [
{
"text": "Grandchild Link 1",
"url": "/"
},
{
"text": "Grandchild Link 2",
"url": "/"
}
]
},
{
"text": "Child Link 3",
"url": "/"
},
{
"text": "Child Link 4",
"url": "/"
}
]
},
{
"text": "Traffic & Travel",
"url": "/",
"children": [
{
"text": "Child Link 1",
"url": "/"
},
{
"text": "Child Link 2",
"url": "/"
},
{
"text": "Child Link 3",
"url": "/"
},
{
"text": "Child Link 4",
"url": "/"
}
]
},
{
"text": "Doing Buisness",
"url": "/",
"children": [
{
"text": "Child Link 1",
"url": "/"
},
{
"text": "Child Link 2",
"url": "/"
},
{
"text": "Child Link 3",
"url": "/"
},
{
"text": "Child Link 4",
"url": "/"
}
]
},
{
"text": "Projects",
"url": "/",
"children": [
{
"text": "Child Link 1",
"url": "/"
},
{
"text": "Child Link 2",
"url": "/"
},
{
"text": "Child Link 3",
"url": "/"
},
{
"text": "Child Link 4",
"url": "/"
}
]
}
]
}
}
/* ------------------------------------ *\
$PRIMARY NAV
\* ------------------------------------ */
.c-primary-nav {
flex: 1;
display: flex;
align-items: center;
justify-content: flex-end;
height: 100%;
ul {
list-style-type: none;
}
&__menu-toggle {
position: relative;
width: 40px;
height: 40px;
overflow: hidden;
cursor: pointer;
z-index: 9999;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
@include media(">large") {
display: none;
}
span {
background-color: var(--dotd-color-content-default);
height: 2px;
width: 18px;
transition: all var(--dotd-animation-duration) var(--dotd-animation-timing);
opacity: 1;
visibility: visible;
}
}
&__container {
flex: 1;
display: flex;
flex-direction: column;
gap: var(--dotd-space-xl);
align-items: center;
justify-content: space-between;
opacity: 0;
visibility: hidden;
width: 100vw;
height: calc(100vh - (var(--dotd-layout-height-header) + var(--dotd-layout-height-alert)));
max-height: 0;
position: absolute;
top: var(--dotd-layout-height-header);
left: calc(var(--dotd-space-lg) * -1);
z-index: var(--dotd-z-index-top);
background-color: var(--dotd-color-background-default);
padding: var(--dotd-space) var(--dotd-space-lg);
overflow: auto;
text-align: center;
transition: all var(--dotd-animation-duration) var(--dotd-animation-timing);
@include media(">large") {
justify-content: flex-end;
opacity: 1;
visibility: visible;
width: auto;
height: 100%;
min-height: fit-content;
position: relative;
top: 0;
left: 0;
background-color: transparent;
flex-direction: row;
padding: 0;
overflow: visible;
text-align: left;
}
}
&__parent-list {
flex: 1;
display: flex;
flex-direction: column;
gap: 0;
align-items: center;
justify-content: flex-start;
width: 100%;
height: auto;
@include media(">large") {
gap: var(--dotd-space);
flex-direction: row;
align-items: center;
justify-content: center;
width: auto;
height: 100%;
overflow: visible;
}
&-item {
display: flex;
flex-direction: column;
position: relative;
align-items: center;
justify-content: center;
width: 100%;
border-bottom: var(--dotd-border-width) solid var(--dotd-color-border-default);
&:last-child {
border-bottom: none;
}
&.this-is-active {
> .c-primary-nav__child-list {
opacity: 1;
visibility: visible;
max-height: 100vh;
}
.c-primary-nav__parent-list-link {
color: var(--dotd-color-content-secondary-default);
}
}
&--button {
height: 100%;
justify-content: flex-end;
margin-top: var(--dotd-space);
}
@include media(">large") {
min-height: auto;
height: 100%;
width: auto;
padding: 0;
border: none;
&.this-is-active,
&:hover,
&:focus {
> .c-primary-nav__child-list {
opacity: 1;
visibility: visible;
max-height: fit-content;
}
.c-primary-nav__parent-list-link {
color: var(--dotd-color-content-secondary-default);
span::after {
width: 100%;
}
}
.c-primary-nav__link-toggle svg {
transform: rotate(180deg);
}
}
}
}
&-link.o-link {
@include o-link;
@include o-typography-body--sm;
& {
text-align: center;
height: 100%;
min-height: 40px;
text-decoration: none !important;
}
span {
position: relative;
}
span::after {
content: "";
display: block;
background: var(--dotd-color-background-secondary-default);
width: 0;
height: 2px;
position: absolute;
bottom: -2px;
transition: all var(--dotd-animation-duration) var(--dotd-animation-timing);
}
&.current-menu-item,
&.current-menu-parent {
color: var(--dotd-color-content-secondary-default);
span::after {
width: 100%;
}
}
}
}
&__child-list {
display: block;
width: 100%;
opacity: 0;
visibility: hidden;
transition: all var(--dotd-animation-duration) var(--dotd-animation-timing);
max-height: 0;
position: relative;
@include media(">large") {
width: max-content;
position: absolute;
left: calc(#{var(--dotd-space-xs)} * -1);
top: 100%;
background-color: var(--dotd-color-background-default-strong);
z-index: 9999;
max-height: 100vh;
overflow: visible;
box-shadow: var(--dotd-box-shadow);
padding: var(--dotd-space-xs);
}
&-item {
border-bottom: var(--dotd-border-width) solid var(--dotd-color-border-default);
&:last-child {
border-bottom: none;
}
&.this-is-active {
> .c-primary-nav__grandchild-list {
opacity: 1;
visibility: visible;
max-height: 100vh;
}
.c-primary-nav__child-list-link {
color: var(--dotd-color-content-secondary-default);
}
}
@include media(">large") {
border-bottom: none;
&.this-is-active,
&:hover,
&:focus {
> .c-primary-nav__grandchild-list {
opacity: 1;
visibility: visible;
max-height: 100vh;
background: var(--dotd-color-background-default-strong);
}
.c-primary-nav__child-list-link {
color: var(--dotd-color-content-secondary-default);
}
.c-primary-nav__child-link-toggle svg {
transform: rotate(90deg);
}
}
}
}
&-link.o-link {
@include o-link;
@include o-typography-body--sm;
& {
width: 100%;
padding: 0 var(--dotd-space);
justify-content: flex-start;
position: relative;
min-height: 40px;
text-decoration: none !important;
}
@include media(">large") {
border-top: none;
padding: var(--dotd-space-xs) var(--dotd-space-xs);
}
&:hover,
&:focus {
background-color: var(--dotd-color-background-default-weak);
}
&.current-menu-item {
color: var(--dotd-color-content-secondary-default);
}
}
}
&__grandchild-list {
display: flex;
flex-flow: column nowrap;
align-items: flex-start;
width: 100%;
max-height: 0;
position: relative;
opacity: 0;
visibility: hidden;
transform: translate(0, 0);
transition: all var(--dotd-animation-duration) var(--dotd-animation-timing);
@include media(">large") {
width: max-content;
box-shadow: var(--dotd-box-shadow);
position: absolute;
right: 0;
z-index: inherit;
transform: translate(100%, -40px);
}
&-item {
width: 100%;
border-bottom: var(--dotd-border-width) solid var(--dotd-color-border-default);
&:last-child {
border-bottom: none;
}
@include media(">large") {
border-bottom: none;
}
}
&-link.o-link {
@include o-link;
@include o-typography-body--sm;
& {
width: 100%;
padding: 0 var(--dotd-space-lg);
justify-content: flex-start;
position: relative;
min-height: 40px;
text-decoration: none !important;
}
}
}
&__link-wrap,
&__child-link-wrap {
width: 100%;
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
@include media(">large") {
width: auto;
height: 100%;
justify-content: center;
}
}
&__link-toggle,
&__child-link-toggle {
width: 40px;
height: 40px;
padding: var(--dotd-space-xs);
svg {
transition: all var(--dotd-animation-duration) var(--dotd-animation-timing);
transform: rotate(0);
}
&:focus,
&:hover:not(:disabled) {
background-color: var(--dotd-color-background-default-strong);
}
&.this-is-active svg {
transform: rotate(180deg);
}
}
&__child-link-toggle {
@include media(">large") {
svg {
transform: rotate(-90deg);
}
&.this-is-active svg {
transform: rotate(90deg);
}
}
}
&__button.o-button {
width: 100%;
@include o-button;
@include media(">large") {
width: auto;
padding-top: var(--dotd-space-xs);
padding-bottom: var(--dotd-space-xs);
}
}
}
body.primary-nav-is-active {
overflow: hidden;
.c-primary-nav__menu-toggle {
span {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
&:nth-child(1) {
transform: rotate(45deg);
}
&:nth-child(2) {
opacity: 0;
visibility: hidden;
}
&:nth-child(3) {
transform: rotate(-45deg);
}
}
}
.c-primary-nav__container {
opacity: 1;
visibility: visible;
max-height: calc(100vh - (var(--dotd-layout-height-header) + var(--dotd-layout-alert-header)));
}
}
No notes defined.