<nav-bar class="navbar">
<div class="navbar__inner"><a href="#main" class="navbtn navbtn--skip">Zum Inhalt springen</a>
<div class="navbar__brand"><a href="#" class="navbar__brand-link"><img alt="inno Q" class="logo navbar__logo" src="../../assets/innoq-logo--whitered.svg"></a>
</div>
<input tabindex="-1" type="checkbox" id="navbar-toggle--menu" class="sr-only navbar__toggle-state navbar__toggle-state--menu-toggler">
<input tabindex="-1" type="checkbox" id="navbar-toggle--search" class="sr-only navbar__toggle-state navbar__toggle-state--search-toggler">
<div class="navbar__meta"><a href="#" class="navbtn navbtn--meta">Kontakt</a><a href="#" class="navbtn navbtn--meta navbtn--locale navbtn--active" title="Deutsch">de</a> |<a href="#" class="navbtn navbtn--meta navbtn--locale" title="English">en</a>
</div>
<div class="navbar__togglers">
<label for="navbar-toggle--menu" aria-label="Navigation ein- oder ausblenden"><span class="navbtn navbtn--menu">Menü</span>
</label><a href="#" class="navbtn navbtn--search" aria-label="Suche ein- oder ausblenden"><i class="icon icon-search"></i></a>
</div>
<nav class="navbar__primary-nav primary-nav">
<ul class="primary-nav__list">
<li class="primary-nav__item"><a href="#" class="navbtn navbtn--primary navbtn--active">Leistungen</a>
</li>
<li class="primary-nav__item">
<div class="dropdown"><a href="#" class="navbtn navbtn--primary" data-for="dropdown__toggle--projekte">Projekte</a>
<input type="checkbox" role="button" aria-haspopup="true" id="dropdown__toggle--projekte" class="sr-only dropdown__checkbox">
<label class="dropdown__toggle dropdown__toggle--navbar" for="dropdown__toggle--projekte"><i class="icon icon-chevron-2-down dropdown__icon dropdown__icon--navbar"></i>
<span class="sr-only dropdown__toggle--expanded-text">ausgeklappt</span><span class="sr-only dropdown__toggle--collapsed-text">eingeklappt</span>
</label>
<div class="dropdown__list-wrapper dropdown__list-wrapper--navbar" role="menu" title="Projekte">
<ul class="dropdown__list">
<li class="dropdown__item dropdown__item--navbar"><a href="#" class="dropdown__link dropdown__link--navbar navbtn">Softwarearchitektur und -entwicklung</a>
</li>
<li class="dropdown__item dropdown__item--navbar"><a href="#" class="dropdown__link dropdown__link--navbar navbtn">Strategie- und Technologieberatung</a>
</li>
<li class="dropdown__item dropdown__item--navbar"><a href="#" class="dropdown__link dropdown__link--navbar navbtn">Entwicklung digitaler Geschäftsmodelle</a>
</li>
</ul>
</div>
</div>
</li>
<li class="primary-nav__item"><a href="#" class="navbtn navbtn--primary">Magazin</a>
</li>
<li class="primary-nav__item"><a href="#" class="navbtn navbtn--primary">Termine</a>
</li>
<li class="primary-nav__item">
<div class="dropdown"><a href="#" class="navbtn navbtn--primary" data-for="dropdown__toggle--kultur">Kultur</a>
<input type="checkbox" role="button" aria-haspopup="true" id="dropdown__toggle--kultur" class="sr-only dropdown__checkbox">
<label class="dropdown__toggle dropdown__toggle--navbar" for="dropdown__toggle--kultur"><i class="icon icon-chevron-2-down dropdown__icon dropdown__icon--navbar"></i>
<span class="sr-only dropdown__toggle--expanded-text">ausgeklappt</span><span class="sr-only dropdown__toggle--collapsed-text">eingeklappt</span>
</label>
<div class="dropdown__list-wrapper dropdown__list-wrapper--navbar" role="menu" title="Kultur">
<ul class="dropdown__list">
<li class="dropdown__item dropdown__item--navbar"><a href="#" class="dropdown__link dropdown__link--navbar navbtn">Strategie- und Technologieberatung</a>
</li>
<li class="dropdown__item dropdown__item--navbar"><a href="#" class="dropdown__link dropdown__link--navbar navbtn">Entwicklung digitaler Geschäftsmodelle</a>
</li>
<li class="dropdown__item dropdown__item--navbar"><a href="#" class="dropdown__link dropdown__link--navbar navbtn">Softwarearchitektur und -entwicklung</a>
</li>
<li class="dropdown__item dropdown__item--navbar"><a href="#" class="dropdown__link dropdown__link--navbar navbtn">Digitale Plattformen und Infrastrukturen</a>
</li>
<li class="dropdown__item dropdown__item--navbar"><a href="#" class="dropdown__link dropdown__link--navbar navbtn">Wissenstransfer, Coaching und Trainings</a>
</li>
</ul>
</div>
</div>
</li>
</ul>
<button class="navbtn navbtn--drill-up">
<img class="navbtn__left-icon" src="../../assets/arrow-medium-left-red.svg">Hauptmenü</button>
</nav>
</div>
</nav-bar>
<nav-bar class="navbar">
<div class="navbar__inner">
<a href="#main" class="navbtn navbtn--skip">Zum Inhalt springen</a>
<div class="navbar__brand">
<a href="#" class="navbar__brand-link">
<img alt="inno Q" class="logo navbar__logo" src={context.app.uri('assets/innoq-logo--whitered.svg')} />
</a>
</div>
<input tabindex="-1" type="checkbox" id="navbar-toggle--menu" class="sr-only navbar__toggle-state navbar__toggle-state--menu-toggler" />
<input tabindex="-1" type="checkbox" id="navbar-toggle--search" class="sr-only navbar__toggle-state navbar__toggle-state--search-toggler" />
<div class="navbar__meta">
<a href="#" class="navbtn navbtn--meta">Kontakt</a>
<a href="#" class="navbtn navbtn--meta navbtn--locale navbtn--active" title="Deutsch">de</a> |
<a href="#" class="navbtn navbtn--meta navbtn--locale" title="English">en</a>
</div>
<div class="navbar__togglers">
<label for="navbar-toggle--menu" aria-label="Navigation ein- oder ausblenden">
<span class="navbtn navbtn--menu">Menü</span>
</label>
<a href="#" class="navbtn navbtn--search" aria-label="Suche ein- oder ausblenden">
<i class="icon icon-search"></i>
</a>
</div>
<nav class="navbar__primary-nav primary-nav">
<ul class="primary-nav__list">
<li class="primary-nav__item">
<a href="#" class="navbtn navbtn--primary navbtn--active">Leistungen</a>
</li>
<li class="primary-nav__item">
<div class="dropdown">
<a href="#" class="navbtn navbtn--primary" data-for="dropdown__toggle--projekte">Projekte</a>
<input type="checkbox" role="button" aria-haspopup="true" id="dropdown__toggle--projekte" class="sr-only dropdown__checkbox" />
<label class="dropdown__toggle dropdown__toggle--navbar" for="dropdown__toggle--projekte">
<i class="icon icon-chevron-2-down dropdown__icon dropdown__icon--navbar"></i>
<span class="sr-only dropdown__toggle--expanded-text">ausgeklappt</span>
<span class="sr-only dropdown__toggle--collapsed-text">eingeklappt</span>
</label>
<div class="dropdown__list-wrapper dropdown__list-wrapper--navbar" role="menu" title="Projekte">
<ul class="dropdown__list">
<li class="dropdown__item dropdown__item--navbar">
<a href="#" class="dropdown__link dropdown__link--navbar navbtn">Softwarearchitektur und -entwicklung</a>
</li>
<li class="dropdown__item dropdown__item--navbar">
<a href="#" class="dropdown__link dropdown__link--navbar navbtn">Strategie- und Technologieberatung</a>
</li>
<li class="dropdown__item dropdown__item--navbar">
<a href="#" class="dropdown__link dropdown__link--navbar navbtn">Entwicklung digitaler Geschäftsmodelle</a>
</li>
</ul>
</div>
</div>
</li>
<li class="primary-nav__item">
<a href="#" class="navbtn navbtn--primary">Magazin</a>
</li>
<li class="primary-nav__item">
<a href="#" class="navbtn navbtn--primary">Termine</a>
</li>
<li class="primary-nav__item">
<div class="dropdown">
<a href="#" class="navbtn navbtn--primary" data-for="dropdown__toggle--kultur">Kultur</a>
<input type="checkbox" role="button" aria-haspopup="true" id="dropdown__toggle--kultur" class="sr-only dropdown__checkbox" />
<label class="dropdown__toggle dropdown__toggle--navbar" for="dropdown__toggle--kultur">
<i class="icon icon-chevron-2-down dropdown__icon dropdown__icon--navbar"></i>
<span class="sr-only dropdown__toggle--expanded-text">ausgeklappt</span>
<span class="sr-only dropdown__toggle--collapsed-text">eingeklappt</span>
</label>
<div class="dropdown__list-wrapper dropdown__list-wrapper--navbar" role="menu" title="Kultur">
<ul class="dropdown__list">
<li class="dropdown__item dropdown__item--navbar">
<a href="#" class="dropdown__link dropdown__link--navbar navbtn">Strategie- und Technologieberatung</a>
</li>
<li class="dropdown__item dropdown__item--navbar">
<a href="#" class="dropdown__link dropdown__link--navbar navbtn">Entwicklung digitaler Geschäftsmodelle</a>
</li>
<li class="dropdown__item dropdown__item--navbar">
<a href="#" class="dropdown__link dropdown__link--navbar navbtn">Softwarearchitektur und -entwicklung</a>
</li>
<li class="dropdown__item dropdown__item--navbar">
<a href="#" class="dropdown__link dropdown__link--navbar navbtn">Digitale Plattformen und Infrastrukturen</a>
</li>
<li class="dropdown__item dropdown__item--navbar">
<a href="#" class="dropdown__link dropdown__link--navbar navbtn">Wissenstransfer, Coaching und Trainings</a>
</li>
</ul>
</div>
</div>
</li>
</ul>
<button class="navbtn navbtn--drill-up">
<img class="navbtn__left-icon" src={context.app.uri('assets/arrow-medium-left-red.svg')} /> Hauptmenü
</button>
</nav>
</div>
</nav-bar>
/* No context defined for this component. */
// sass-lint:disable force-pseudo-nesting
$navbar-navbtn-transition: color .175s ease;
$navbar-drill-transition: left .5s ease;
//
// navbar
//
.navbar {
@extend %heading-font-regular;
position: relative;
z-index: 1;
background-color: $navbar-body-bg;
color: $navbar-link-color;
&--transparent {
background-color: transparent;
}
}
.navbar__inner {
display: flex;
flex-direction: row;
flex-grow: 1;
flex-wrap: wrap;
align-content: flex-start;
justify-content: flex-end;
margin: 0 auto;
background-color: $navbar-body-bg;
width: 100%;
max-width: $grid-page-layout-width;
}
//
// navbtn // buttons and links in navigation context
//
.navbtn {
@extend %heading-font-regular;
display: inline-block;
position: relative;
transition: $navbar-navbtn-transition;
border: 0;
background-color: transparent;
cursor: pointer;
text-decoration: none;
white-space: nowrap;
color: $navbar-link-color;
}
.navbtn--skip {
position: absolute;
top: -4rem;
left: 10px;
text-transform: uppercase;
}
.navbtn--skip:focus {
top: 2px;
left: 10px;
}
.navbtn--primary {
@extend %heading-font-bold;
}
.navbtn--drill-up {
display: none;
position: absolute;
top: 0;
right: 0;
background-color: $navbar-lightened-bg;
padding: $spacer-xs $navbar-padding;
width: 100%;
text-align: right;
}
.navbtn--search,
.navbtn--menu {
top: -.1em;
font-size: ms(3);
}
.navbtn--search {
padding: 0 0 0 $spacer-md;
}
.navbtn--menu {
@extend %heading-font-bold;
padding: 0 $spacer-md 0 0;
}
.navbtn__left-icon {
position: relative;
top: .1em;
margin-right: .5em;
}
.navbtn--active::after {
display: block;
position: absolute;
top: 1.3em;
background-color: $navbar-link-active-color;
width: 100%;
height: 3px;
content: '';
}
.navbtn--meta {
margin-right: $spacer-base;
&.navbtn--locale {
margin-right: 2px;
margin-left: 2px;
}
&.navbtn--active::after {
height: 2px;
}
}
.navbtn:hover,
.navbtn:focus {
transition: $navbar-navbtn-transition;
color: $navbar-link-hover-color;
}
//
// navbar__brand // and related things
//
.navbar__brand {
flex-grow: 1;
padding: $navbar-padding 0 $navbar-padding $navbar-padding;
height: $navbar-brandbar-height-small;
}
.navbar__brand-link {
@extend %link-unstyled;
}
.navbar__logo {
width: $navbar-logo-height-small * 3.94;
height: $navbar-logo-height-small;
}
//
// navbar__meta // container
//
.navbar__meta {
display: none;
align-items: center;
justify-content: center;
order: 4;
background-color: $navbar-lightened-bg;
padding: $spacer-sm;
width: 100%;
height: $navbar-bottombar-height-small;
text-transform: uppercase;
font-size: $navbar-secondary-font-size;
}
//
// navbar__togglers // container
//
.navbar__togglers {
display: flex;
align-items: center;
order: 2;
padding: $navbar-padding;
height: $navbar-brandbar-height-small;
}
//
// main toggles
//
.navbar__toggle-state--menu-toggler:checked ~ .primary-nav {
display: block;
}
.navbar__toggle-state--menu-toggler:checked ~ .navbar__meta {
display: flex;
}
//
// primary-nav // main navigation row
//
.primary-nav {
display: none;
position: relative;
order: 3;
margin-bottom: 0;
background-color: $navbar-lightened-bg;
width: 100%;
}
.primary-nav__list {
@extend %heading-font-bold;
@extend %list-unstyled;
position: relative;
margin: 0;
padding: $navbar-padding * 2 $navbar-padding $spacer-sm;
width: 100%;
height: calc(90vh - #{$navbar-bottombar-height-small} - #{$navbar-brandbar-height});
font-size: $navbar-primary-font-size;
}
.primary-nav__item {
position: relative;
padding-top: $navbar-padding;
}
//
// dropdown // in navbar context
//
.dropdown__checkbox:checked ~ .dropdown__toggle--navbar {
.dropdown__icon--navbar {
color: $navbar-link-hover-color;
}
}
.dropdown__checkbox:focus ~ .dropdown__toggle--navbar {
.dropdown__icon--navbar {
outline: auto 5px $outline-color;
color: $navbar-link-hover-color;
}
}
.dropdown__icon--navbar {
transition: standard-transition(color);
color: $navbar-link-color;
&:hover,
&:focus {
color: $navbar-link-hover-color;
}
}
.dropdown__list-wrapper--navbar {
@extend %heading-font-regular;
position: relative;
top: 0;
left: 0;
background-color: $navbar-lightened-bg;
padding: 0 $spacer-md $spacer-md;
width: 100%;
font-size: $navbar-primary-font-size;
&:hover {
display: block;
}
// &:focus {
// display: block;
// }
}
.dropdown__item--navbar {
padding-top: $navbar-padding;
}
.dropdown__link--navbar {
white-space: normal;
}
//
// --transparent
//
.navbar__inner--transparent,
.navbar--transparent {
background-color: transparent;
}
// sass-lint:disable force-pseudo-nesting
@media screen and (min-width: $nav-breakpoint-px) {
.navbar {
display: block;
height: auto;
}
// .navbar__inner {
// flex: 1;
// }
.navbtn--menu {
display: none;
}
.navbtn--primary {
padding-bottom: $navbar-padding;
&:hover ~ .dropdown__list-wrapper--navbar {
display: block;
}
// let user toggle dropdown via checkbox-toggle
// &:focus ~ .dropdown__list-wrapper--navbar {
// display: block;
// }
}
.navbar__brand {
padding: 0;
width: 100%;
height: 0;
text-align: center;
}
.navbar__logo {
margin-top: $navbar-padding;
width: $navbar-logo-height * 3.94;
height: $navbar-logo-height;
}
.navbar__meta {
display: flex;
order: 2;
background-color: transparent;
width: auto;
height: $navbar-brandbar-height;
}
.navbar__togglers {
order: 3;
padding-left: 0;
width: auto;
height: $navbar-brandbar-height;
}
.primary-nav {
display: flex;
order: 4;
background-color: transparent;
width: 100%;
}
.primary-nav__list {
display: flex;
justify-content: space-around;
margin: 0 auto;
padding: 0 $navbar-padding;
width: 100%;
min-width: $navbar-min-width;
max-width: $navbar-max-width;
height: auto;
overflow-y: unset;
}
.primary-nav__item {
padding-top: 0;
}
.dropdown__list-wrapper--navbar {
position: absolute;
top: $spacer-md * 2;
left: -$spacer-md;
padding: 0 $spacer-md $spacer-md;
width: auto;
}
.dropdown__link--navbar {
white-space: nowrap;
}
.dropdown__item--clone {
display: none;
}
}
// adjust "dynamic dropdown alignment"
$navbar-breakpoint-step-size: 250px;
@media screen and (min-width: $nav-breakpoint-px) and (max-width: $nav-breakpoint-px + $navbar-breakpoint-step-size) {
// semi dynamic alignment of dropdown lists
.primary-nav__item:nth-last-child(1),
.primary-nav__item:nth-last-child(2),
.primary-nav__item:nth-last-child(3) {
.dropdown__list-wrapper--navbar {
right: -$spacer-md;
left: auto;
}
}
}
@media screen and (min-width: $nav-breakpoint-px + $navbar-breakpoint-step-size + 1) and (max-width: $nav-breakpoint-px + (2 * $navbar-breakpoint-step-size)) {
// semi dynamic alignment of dropdown lists
.primary-nav__item:nth-last-child(1),
.primary-nav__item:nth-last-child(2) {
.dropdown__list-wrapper--navbar {
right: -$spacer-md;
left: auto;
}
}
}
@media screen and (min-width: $nav-breakpoint-px + (2 * $navbar-breakpoint-step-size) + 1) and (max-width: $nav-breakpoint-px + (3 * $navbar-breakpoint-step-size)) {
// semi dynamic alignment of dropdown lists
.primary-nav__item:nth-last-child(1) {
.dropdown__list-wrapper--navbar {
right: -$spacer-md;
left: auto;
}
}
}
// sass-lint:disable force-pseudo-nesting
@media screen and (max-width: $nav-breakpoint-px-below) {
.navbtn--menu {
&::after {
display: block;
position: absolute;
top: -.1em;
right: 0;
background-color: $navbar-link-color;
width: 1px;
height: 1.5em;
content: '';
}
}
.navbtn--primary {
z-index: 1;
font-size: $navbar-primary-font-size-big;
}
.navbtn--active::after {
height: 5px;
}
.primary-nav__list {
overflow-y: scroll;
}
.primary-nav__list--level2 ~ .navbtn--drill-up {
display: block;
}
.primary-nav--enhanced {
overflow: hidden;
}
.primary-nav__list--enhanced {
left: 0%;
transition: $navbar-drill-transition;
width: 200%;
&.primary-nav__list--level2 {
left: -100%;
transition: $navbar-drill-transition;
}
}
.primary-nav__item--enhanced {
position: initial; // unset positioning
}
.dropdown__list-wrapper--enhanced {
position: absolute;
left: 50%;
padding-top: 3 * $navbar-padding;
width: 50%;
// &[data-origin='right'],
// &[data-origin='left'] {
// position: absolute;
// left: 50%;
// padding-top: 3 * $navbar-padding;
// width: 50%;
// }
}
.dropdown__list-wrapper--navbar {
&.dropdown__list-wrapper--enhanced::before {
position: relative;
top: -$spacer-xs;
border-bottom: 5px solid $navbar-link-hover-color;
font-family: $font-family-sans-serif-bold;
font-size: $navbar-primary-font-size-big;
content: attr(title);
}
}
.dropdown__icon--navbar {
&.dropdown__icon--enhanced::before {
content: $icon-chevron-right;
}
}
.dropdown__toggle--navbar {
padding: 0 .875em;
&.dropdown__toggle--enhanced {
position: absolute;
left: 0;
padding: .35rem $navbar-padding .4rem;
width: 50%;
text-align: right;
}
}
}
@import './navbar-common';
@import './navbar-mobile';
@import './navbar-desktop';
class DropdownToggle {
constructor (label, name) {
this.label = label
this.name = name
this.checkbox = document.querySelector('#' + name)
this.relatedLink = document.querySelector('a[data-for=' + name + ']')
}
toggle () {
this.checkbox.checked = !this.checkbox.checked
}
set checked (v) {
this.checkbox.checked = Boolean(v)
}
get checked () {
return this.checkbox.checked
}
}
export default class Navbar extends HTMLElement {
connectedCallback () {
if (!this.isInitialized) {
this.init()
}
}
init () {
this.primaryList = document.querySelector('.primary-nav__list')
this.dropdownToggles = Array.from(document.querySelectorAll('.dropdown__toggle--navbar'))
.map(el => new DropdownToggle(el, el.getAttribute('for')))
this.dropdownPrimaryLinks = document.querySelectorAll('.dropdown .navbtn--primary')
// add --enhanced modifier
this.enhance([
'.primary-nav',
'.primary-nav__list',
'.primary-nav__item',
'.dropdown__list-wrapper',
'.dropdown__icon',
'.dropdown__toggle'
])
// enhance drill down ux
// (copy dropdown heading link into dropdown list)
this.dropdownPrimaryLinks.forEach((link) => {
let targetDropdownList = link.parentNode.querySelector('.dropdown__list')
let anchorClone = document.createElement('a')
anchorClone.classList.add('dropdown__link', 'dropdown__link--navbar', 'navbtn')
anchorClone.setAttribute('href', link.getAttribute('href'))
anchorClone.textContent = link.textContent
let newListItem = document.createElement('li')
newListItem.classList.add('dropdown__item', 'dropdown__item--navbar', 'dropdown__item--clone')
newListItem.appendChild(anchorClone)
targetDropdownList.insertBefore(newListItem, targetDropdownList.firstChild)
})
// apply several event listeners
this.dropdownToggles.forEach((ddt, i, all) => {
ddt.label.addEventListener('click', e => {
this.uncheckDropdownToggles(all, ddt)
this.primaryList.classList.add('primary-nav__list--level2')
})
ddt.relatedLink.addEventListener('mouseenter', e => {
this.uncheckDropdownToggles(all, ddt)
this.primaryList.classList.remove('primary-nav__list--level2')
})
ddt.relatedLink.addEventListener('click', e => {
if (this.isMobile) {
e.preventDefault()
ddt.checked = true
this.uncheckDropdownToggles(all, ddt)
this.primaryList.classList.add('primary-nav__list--level2')
}
})
})
document.querySelector('.navbtn--drill-up')
.addEventListener('click', e => {
this.uncheckDropdownToggles(this.dropdownToggles)
this.primaryList.classList.remove('primary-nav__list--level2')
})
this.isInitialized = true
}
enhance (selectors) {
selectors.forEach(s => {
s = s.startsWith('.') ? s.slice(1) : s
Array.from(document.querySelectorAll('.' + s))
.forEach(e => e.classList.add(s + '--enhanced'))
})
}
uncheckDropdownToggles (toggles, except) {
toggles.forEach(t => {
if (except !== t) {
t.checked = false
}
})
}
get isMobile () {
if (this.primaryList.getBoundingClientRect().width > window.innerWidth) {
return true
} else {
return false
}
}
}
Notizen:
Issues: