<nav class="mol-header-nav">
<ul>
<li class="active">
<input type="checkbox" id="header-nav-checkbox0" class="header-nav-checkbox">
<label for="header-nav-checkbox0" class="header-nav-label">
<span class="text">Opdrachtgevers met extra text</span>
<span class="atm-icon far fa-chevron-down fa-xs "></span>
</label>
<div class="header-nav-sub">
<ul>
<li class="active"><a class="atm-nav-link " href="#" title="" aria-label="" target="">Opdrachtgevers met extra text</a>
</li>
<li class="active"><a class="atm-nav-link " href="#" title="" aria-label="" target="">Mijn project</a>
</li>
<li class=""><a class="atm-nav-link " href="#" title="" aria-label="" target="">Bouwreizen</a>
</li>
<li class=""><a class="atm-nav-link " href="#" title="" aria-label="" target="">Partners</a>
</li>
<li class=""><a class="atm-nav-link " href="#" title="" aria-label="" target="">Blog</a>
</li>
</ul>
</div>
</li>
<li class="">
<a class="atm-nav-link " href="#" title="Nav link" aria-label="" target="">Schoonmaak</a>
</li>
<li class="">
<input type="checkbox" id="header-nav-checkbox2" class="header-nav-checkbox">
<label for="header-nav-checkbox2" class="header-nav-label">
<span class="text">Branches</span>
<span class="atm-icon far fa-chevron-down fa-xs "></span>
</label>
<div class="header-nav-sub">
<ul>
<li class=""><a class="atm-nav-link " href="#" title="" aria-label="" target="">Branches</a>
</li>
<li class="active"><a class="atm-nav-link " href="#" title="" aria-label="" target="">Mijn project</a>
</li>
<li class=""><a class="atm-nav-link " href="#" title="" aria-label="" target="">Bouwreizen</a>
</li>
<li class=""><a class="atm-nav-link " href="#" title="" aria-label="" target="">Partners</a>
</li>
<li class=""><a class="atm-nav-link " href="#" title="" aria-label="" target="">Blog</a>
</li>
</ul>
</div>
</li>
<li class="">
<a class="atm-nav-link " href="#" title="Nav link" aria-label="" target="">Over</a>
</li>
<li class="">
<a class="atm-nav-link " href="#" title="Nav link" aria-label="" target="">Nieuws uit het niets</a>
</li>
<li class="">
<a class="atm-nav-link " href="#" title="Nav link" aria-label="" target="">Vacatures</a>
</li>
</ul>
</nav>
<nav class="mol-header-nav">
<ul>
{{#each items}}
<li class="{{#if active}}active{{/if}}">
{{#if subitems}}
<input type="checkbox" id="header-nav-checkbox{{@index}}" class="header-nav-checkbox">
<label for="header-nav-checkbox{{@index}}" class="header-nav-label">
<span class="text">{{text}}</span>
{{render '@icon' @root.dropdownIcon}}
</label>
<div class="header-nav-sub">
<ul>
<li class="{{#if active}}active{{/if}}">{{render '@nav-link' this}}</li>
{{#each subitems}}
<li class="{{#if active}}active{{/if}}">{{render '@nav-link' this}}</li>
{{/each}}
</ul>
</div>
{{else}}
{{render '@nav-link' this merge=true}}
{{/if}}
</li>
{{/each}}
</ul>
</nav>
{
"dropdownIcon": {
"icon": "fa-chevron-down",
"style": "far",
"size": "fa-xs"
},
"items": [
{
"text": "Opdrachtgevers met extra text",
"active": true,
"href": "#",
"subitems": [
{
"text": "Mijn project",
"active": true,
"href": "#"
},
{
"text": "Bouwreizen",
"active": false,
"href": "#"
},
{
"text": "Partners",
"active": false,
"href": "#"
},
{
"text": "Blog",
"active": false,
"href": "#"
}
]
},
{
"text": "Schoonmaak",
"active": false,
"href": "#"
},
{
"text": "Branches",
"active": false,
"href": "#",
"subitems": [
{
"text": "Mijn project",
"active": true,
"href": "#"
},
{
"text": "Bouwreizen",
"active": false,
"href": "#"
},
{
"text": "Partners",
"active": false,
"href": "#"
},
{
"text": "Blog",
"active": false,
"href": "#"
}
]
},
{
"text": "Over",
"active": false,
"href": "#"
},
{
"text": "Nieuws uit het niets",
"active": false,
"href": "#"
},
{
"text": "Vacatures",
"active": false,
"href": "#"
}
]
}
.mol-header-nav {
/* Main nav */
> ul {
@apply flex;
@apply flex-wrap;
@apply justify-end;
@apply gap-2;
/* Main item */
> li {
@apply relative flex;
+ li {
margin-left: 18px;
@screen xl {
margin-left: 27px;
}
}
.header-nav-checkbox {
@apply hidden;
}
.header-nav-label {
@apply cursor-pointer flex items-start;
.text {
@apply font-display font-semibold cursor-pointer mr-2;
}
.atm-icon {
@apply mt-2;
}
}
.header-nav-label,
> .atm-nav-link {
@apply border-b-2 border-white;
@apply pb-2;
@apply select-none;
/* Compensate border and padding bottom,
to align with utils menu in header organism */
transform: translateY(5px);
&:hover {
@apply no-underline;
@apply border-b-2 border-cta;
}
}
&.active {
.header-nav-label,
> .atm-nav-link {
@apply text-cta;
}
}
.header-nav-sub {
@apply absolute -left-6;
@apply min-w-max;
@apply opacity-0 pointer-events-none;
@apply shadow-lg bg-white;
@apply p-6 pr-14;
@apply select-none;
@apply z-50;
@apply top-10;
/* Sub nav */
> ul {
/* Sub item */
> li {
.atm-nav-link {
@apply font-normal text-sm;
}
&:first-child {
.atm-nav-link {
@apply block text-md font-display mb-2 font-semibold;
}
}
&.active {
.atm-nav-link {
@apply text-cta;
}
}
}
}
}
.header-nav-checkbox:checked {
~ .header-nav-label {
}
~ .header-nav-sub {
@apply opacity-100 pointer-events-auto;
}
}
}
}
}
(function () {
'use strict';
// Close submenu when clicked outside
$(document).on('mouseup', function (e) {
var container = $('.org-header .header-nav-sub').parent();
// If the target of the click isn't the container
if (!container.is(e.target) && container.has(e.target).length === 0) {
// Close submenu
$('.org-header .header-nav-checkbox:checked').trigger('click');
}
});
$('.header-nav-checkbox').on('click', function (e) {
$('.org-header .header-nav-checkbox:checked')
.not(this)
.prop('checked', false);
});
// document.body.querySelectorAll('.mol-header-nav ul li a').forEach((e) => {
// const text = e.innerText.replace(/(.*?\s.*?\s)/g, '$1' + '\n');
// e.innerText = text;
// });
// document.body
// .querySelectorAll('.mol-header-nav ul li label .text')
// .forEach((e) => {
// const text = e.innerText.replace(/(.*?\s.*?\s)/g, '$1' + '\n');
// e.innerText = text;
// });
})();
No notes defined.