onny/web-wordpress-kit
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

working on custom main menu

Browse source
This commit is contained in:
Jonas Heinrich 2020-04-05 12:17:31 +02:00
parent 4fd6d03942
commit f887eedb1b
3 changed files with 98 additions and 1376 deletions
Download patch file Download diff file Expand all files Collapse all files

95
kit/functions.php
View file

@ -1,10 +1,99 @@
<?php
function kit_setup() {
register_nav_menus( array(
'primary' => esc_html__( 'Footer Menu', 'kit' ),
) );
add_theme_support('menus');
add_theme_support( 'post-thumbnails' );
register_nav_menus( array(
'primary' => 'Main Menu',
'secondary' => 'Footer Menu',
) );
};
add_action( 'after_setup_theme', 'kit_setup' );
class kit_custom_main_menu extends Walker_Nav_Menu {
public function start_lvl( &$output, $depth = 0, $args = array() ) {
$indent = str_repeat( "\t", $depth );
$output .= "\n$indent<ul role=\"menu\" class=\" dropdown-menu\">\n";
}
public function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
$indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';
$class_names = $value = '';
$classes = empty( $item->classes ) ? array() : (array) $item->classes;
$classes[] = 'menu-item-' . $item->ID;
/*grab the default wp nav classes*/
$class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item, $args ) );
/*if the current item has children, append the dropdown class*/
if ( $args->has_children )
$class_names .= ' dropdown';
/*if there aren't any class names, don't show class attribute*/
$class_names = $class_names ? ' class="' . esc_attr( $class_names ) . '"' : '';
$id = apply_filters( 'nav_menu_item_id', 'menu-item-'. $item->ID, $item, $args );
$id = $id ? ' id="' . esc_attr( $id ) . '"' : '';
$output .= $indent . '<li' . $id . $value . $class_names .'>';
$atts = array();
$atts['title'] = ! empty( $item->title ) ? $item->title : '';
$atts['target'] = ! empty( $item->target ) ? $item->target : '';
$atts['rel'] = ! empty( $item->xfn ) ? $item->xfn : '';
/*if the current menu item has children and it's the parent, set the dropdown attributes*/
if ( $args->has_children && $depth === 0 ) {
$atts['href'] = '#';
$atts['data-toggle'] = 'dropdown';
$atts['class'] = 'dropdown-toggle';
} else {
$atts['href'] = ! empty( $item->url ) ? $item->url : '';
}
$atts = apply_filters( 'nav_menu_link_attributes', $atts, $item, $args );
$attributes = '';
foreach ( $atts as $attr => $value ) {
if ( ! empty( $value ) ) {
$value = ( 'href' === $attr ) ? esc_url( $value ) : esc_attr( $value );
$attributes .= ' ' . $attr . '="' . $value . '"';
}
}
$item_output = $args->before;
$item_output .= '<a'. $attributes .'>';
$item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after;
/* if the current menu item has children and it's the parent item, append the fa-angle-down icon*/
$item_output .= ( $args->has_children && $depth === 0 ) ? ' <i class="fa fa-angle-down"></i></a>' : '</a>';
$item_output .= $args->after;
$output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
}
public function display_element( $element, &$children_elements, $max_depth, $depth, $args, &$output ) {
if ( ! $element )
return;
$id_field = $this->db_fields['id'];
if ( is_object( $args[0] ) )
$args[0]->has_children = ! empty( $children_elements[ $element->$id_field ] );
parent::display_element( $element, $children_elements, $max_depth, $depth, $args, $output );
}
}

926
kit/header.php
View file

@ -15,6 +15,7 @@
<link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_directory');?>/css/cookieconsent.css" media="all">
<link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_directory');?>/css/magnific-popup.css" media="all">
<link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_directory');?>/css/swiper.css" media="all">
<link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_directory');?>/css/menu.css" media="all">
<script src="<?php bloginfo('stylesheet_directory');?>/js/jquery-3.js" type="text/javascript"></script>
<script src="<?php bloginfo('stylesheet_directory');?>/js/js.js" type="text/javascript" async="async"></script>
@ -114,928 +115,11 @@
<input class="header-burger-button" id="header-burger-button" type="checkbox">
<label for="header-burger-button"><span>Navigation öffnen / schließen</span></label>
<nav>
<ul>
<li class="">
<div class="nav-first-level-opener">
<span>Untermenu öffnen / schließen</span>
</div>
<a href="https://www.kit-ausbildung.de/de/ueber-das-kit">
Über das KIT
</a>
<section class="nav-second-level mega-flyout" style="">
<div class="content-wrap">
<div class="container container-3-cols">
<div class="column">
<div class="nav-second-level-group">
<a class="nav-second-level-group-headline" href="https://www.kit-ausbildung.de/de/ueber-das-kit/success-stories">
<img class="icon" src="<?php bloginfo('stylesheet_directory');?>/img/nav-second-level-star-primary.svg" alt="" width="24" height="24">
<span>Success Stories</span>
</a>
<div class="nav-second-level-opener">
<span>Untermenu öffnen / schließen</span>
</div>
<ul style="">
<li class="">
<a href="https://www.kit-ausbildung.de/de/ueber-das-kit/success-stories/von-quito-nach-karsruhe-und-zurueck-1">Unser Auslandspraktikum in Dublin</a>
</li>
<li class="">
<a href="https://www.kit-ausbildung.de/de/ueber-das-kit/success-stories/azubis-fuer-azubis-1">Glückwunsch und ein Grund zu feiern!</a>
</li>
<li class="">
<a href="https://www.kit-ausbildung.de/de/ueber-das-kit/success-stories/azubis-fuer-azubis">Azubis für AZUBIS</a>
</li>
<li class="">
<a href="https://www.kit-ausbildung.de/de/ueber-das-kit/success-stories/von-quito-nach-karsruhe-und-zurueck">Von Quito nach Karlsruhe und zurück</a>
</li>
<li class="">
<a href="https://www.kit-ausbildung.de/de/ueber-das-kit/success-stories/skylar-mensch-und-maschine-in-interaktion">SKYLAR – Mensch und Maschine in Interaktion</a>
</li>
<li class="">
<a href="https://www.kit-ausbildung.de/de/ueber-das-kit/success-stories/die-armar-familie-hat-zuwachs-bekommen">Die ARMAR Familie hat Zuwachs bekommen!</a>
</li>
<li class="">
<a href="https://www.kit-ausbildung.de/de/ueber-das-kit/success-stories/was-haben-neutrinos-mit-katrin-zu-tun">Was haben Neutrinos mit KATRIN zu tun?</a>
</li>
</ul>
</div>
</div>
<div class="column">
<div class="nav-second-level-group">
<a class="nav-second-level-group-headline" href="https://www.kit-ausbildung.de/de/ueber-das-kit/zahlen-und-fakten">
<img class="icon" src="<?php bloginfo('stylesheet_directory');?>/img/nav-second-level-barchart-primary.svg" alt="" width="24" height="24">
<span>Zahlen und Fakten</span>
</a>
</div>
</div>
<div class="column">
<div class="nav-second-level-group">
<a class="nav-second-level-group-headline" href="https://www.kit-ausbildung.de/de/ueber-das-kit/ansprechpartner-kontakt">
<img class="icon" src="<?php bloginfo('stylesheet_directory');?>/img/nav-second-level-person-primary.svg" alt="" width="24" height="24">
<span>Ansprechpartner &amp; Kontakt</span>
</a>
</div>
<div class="nav-second-level-group">
<a class="nav-second-level-group-headline" href="https://www.kit-ausbildung.de/de/ueber-das-kit/newsletter-archiv">
<img class="icon" src="<?php bloginfo('stylesheet_directory');?>/img/nav-second-level-star-primary.svg" alt="" width="24" height="24">
<span>Newsletter Archiv</span>
</a>
</div>
</div>
</div>
</div>
</section>
</li>
<li class="">
<div class="nav-first-level-opener">
<span>Untermenu öffnen / schließen</span>
</div>
<a href="https://www.kit-ausbildung.de/de/berufsausbildung">
Berufsausbildung
</a>
<section class="nav-second-level mega-flyout" style="">
<div class="content-wrap">
<div class="container container-3-cols">
<div class="column">
<div class="nav-second-level-group">
<a class="nav-second-level-group-headline" href="https://www.kit-ausbildung.de/de/berufsausbildung/gewerblich-technische-berufe">
<img class="icon" src="index_files/nav-second-level-wrench-primary.svg" alt="" width="24" height="24">
<span>Gewerblich-technische Berufe</span>
</a>
<div class="nav-second-level-opener">
<span>Untermenu öffnen / schließen</span>
</div>
<ul style="">
<li class="">
<a href="https://www.kit-ausbildung.de/de/berufsausbildung/gewerblich-technische-berufe/elektroniker/-in-fuer-geraete-und-systeme">Elektroniker/-in für Geräte und Systeme</a>
</li>
<li class="">
<a href="https://www.kit-ausbildung.de/de/berufsausbildung/gewerblich-technische-berufe/fachangestellte/-r-fuer-medien-und-informationsdienste">Fachangestellte/-r für Medien- und Informationsdienste</a>
</li>
<li class="">
<a href="https://www.kit-ausbildung.de/de/berufsausbildung/gewerblich-technische-berufe/fachinformatiker/-in-fr-systemintegration">Fachinformatiker/-in, FR Systemintegration</a>
</li>
<li class="">
<a href="https://www.kit-ausbildung.de/de/berufsausbildung/gewerblich-technische-berufe/fachinformatiker/-in-fr-anwendungsentwicklung">Fachinformatiker/-in, FR Anwendungsentwicklung</a>
</li>
<li class="">
<a href="https://www.kit-ausbildung.de/de/berufsausbildung/gewerblich-technische-berufe/fachkraft-fuer-abwassertechnik">Fachkraft für Abwassertechnik</a>
</li>
<li class="">
<a href="https://www.kit-ausbildung.de/de/berufsausbildung/gewerblich-technische-berufe/fotograf/-in">Fotograf/-in</a>
</li>
<li class="">
<a href="https://www.kit-ausbildung.de/de/berufsausbildung/gewerblich-technische-berufe/gaertner/-in">Gärtner/-in</a>
</li>
<li class="">
<a href="https://www.kit-ausbildung.de/de/berufsausbildung/gewerblich-technische-berufe/holzmechaniker/-in">Holzmechaniker/-in</a>
</li>
<li class="">
<a href="https://www.kit-ausbildung.de/de/berufsausbildung/gewerblich-technische-berufe/industriemechaniker/-in">Industriemechaniker/-in</a>
</li>
<li class="">
<a href="https://www.kit-ausbildung.de/de/berufsausbildung/gewerblich-technische-berufe/koch/koechin">Koch/Köchin</a>
</li>
<li class="">
<a href="https://www.kit-ausbildung.de/de/berufsausbildung/gewerblich-technische-berufe/technischer/-e-produktdesigner/-in-fuer-maschinen-und-anlagenkonstruktion">Technischer/-e Produktdesigner/-in für Maschinen- und Anlagenkonstruktion</a>
</li>
<li class="">
<a href="https://www.kit-ausbildung.de/de/berufsausbildung/gewerblich-technische-berufe/tischler/-in">Tischler/-in</a>
</li>
<li class="">
<a href="https://www.kit-ausbildung.de/de/berufsausbildung/gewerblich-technische-berufe/zerspanungsmechaniker/-in">Zerspanungsmechaniker/-in</a>
</li>
<li class="">
<a href="https://www.kit-ausbildung.de/de/berufsausbildung/gewerblich-technische-berufe/mathematisch-technischer/-e-softwareentwickler/-in">Mathematisch-technischer/-e Softwareentwickler/-in</a>
</li>
<li class="">
<a href="https://www.kit-ausbildung.de/de/berufsausbildung/gewerblich-technische-berufe/elektroniker/-in-fuer-geraete-und-systeme-1">Werkfeuerwehrmann/-frau</a>
</li>
</ul>
</div>
</div>
<div class="column">
<div class="nav-second-level-group">
<a class="nav-second-level-group-headline" href="https://www.kit-ausbildung.de/de/berufsausbildung/naturwissenschaftliche-berufe">
<img class="icon" src="index_files/nav-second-level-flask-primary.svg" alt="" width="24" height="24">
<span>Naturwissenschaftliche Berufe</span>
</a>
<div class="nav-second-level-opener">
<span>Untermenu öffnen / schließen</span>
</div>
<ul style="">
<li class="">
<a href="https://www.kit-ausbildung.de/de/berufsausbildung/naturwissenschaftliche-berufe/biologielaborant/-in">Biologielaborant/-in</a>
</li>
<li class="">
<a href="https://www.kit-ausbildung.de/de/berufsausbildung/naturwissenschaftliche-berufe/chemielaborant/-in">Chemielaborant/-in</a>
</li>
<li class="">
<a href="https://www.kit-ausbildung.de/de/berufsausbildung/naturwissenschaftliche-berufe/physiklaborant/-in">Physiklaborant/-in</a>
</li>
<li class="">
<a href="https://www.kit-ausbildung.de/de/berufsausbildung/gewerblich-technische-berufe/tierpfleger/-in">Tierpfleger/-in</a>
</li>
</ul>
</div>
</div>
<div class="column">
<div class="nav-second-level-group">
<a class="nav-second-level-group-headline" href="https://www.kit-ausbildung.de/de/berufsausbildung/kaufmaennische-berufe">
<img class="icon" src="index_files/nav-second-level-barchart-primary.svg" alt="" width="24" height="24">
<span>Kaufmännische Berufe</span>
</a>
<div class="nav-second-level-opener">
<span>Untermenu öffnen / schließen</span>
</div>
<ul style="">
<li class="">
<a href="https://www.kit-ausbildung.de/de/berufsausbildung/kaufmaennische-berufe/industriekauffrau/-mann">Industriekaufmann/-frau</a>
</li>
<li class="">
<a href="https://www.kit-ausbildung.de/de/berufsausbildung/kaufmaennische-berufe/industriekauffrau/-mann-internationales-marketing">Industriekaufmann/-frau, Internationales Marketing</a>
</li>
<li class="">
<a href="https://www.kit-ausbildung.de/de/berufsausbildung/kaufmaennische-berufe/informatikkauffrau/-mann">Informatikkaufmann/-frau</a>
</li>
<li class="">
<a href="https://www.kit-ausbildung.de/de/berufsausbildung/kaufmaennische-berufe/kauffrau/-mann-fuer-bueromanagement">Kaufmann/-frau für Büromanagement</a>
</li>
<li class="">
<a href="https://www.kit-ausbildung.de/de/berufsausbildung/kaufmaennische-berufe/veranstaltungskauffrau/-mann">Veranstaltungskaufmann/-frau</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</section>
</li>
<li class="">
<div class="nav-first-level-opener">
<span>Untermenu öffnen / schließen</span>
</div>
<a href="https://www.kit-ausbildung.de/de/duales-studium">
Duales Studium
</a>
<section class="nav-second-level mega-flyout" style="">
<div class="content-wrap">
<div class="container container-3-cols">
<div class="column">
<div class="nav-second-level-group">
<a class="nav-second-level-group-headline" href="https://www.kit-ausbildung.de/de/duales-studium/bachelor-of-arts">
<span>Bachelor of Arts</span>
</a>
<div class="nav-second-level-opener">
<span>Untermenu öffnen / schließen</span>
</div>
<ul style="">
<li class="">
<a href="https://www.kit-ausbildung.de/de/duales-studium/bachelor-of-arts/bwl-industrial-management">BWL - Industrial Management</a>
</li>
<li class="">
<a href="https://www.kit-ausbildung.de/de/duales-studium/bachelor-of-arts/bwl-international-business">BWL - International Business</a>
</li>
<li class="">
<a href="https://www.kit-ausbildung.de/de/duales-studium/bachelor-of-arts/bwl-messe-kongress-und-eventmanagement">BWL - Messe-, Kongress- und Eventmanagement</a>
</li>
</ul>
</div>
</div>
<div class="column">
<div class="nav-second-level-group">
<a class="nav-second-level-group-headline" href="https://www.kit-ausbildung.de/de/duales-studium/bachelor-of-science">
<span>Bachelor of Science</span>
</a>
<div class="nav-second-level-opener">
<span>Untermenu öffnen / schließen</span>
</div>
<ul style="">
<li class="">
<a href="https://www.kit-ausbildung.de/de/duales-studium/bachelor-of-science/chemie-und-bioingenieurwesen">Chemie- und Bioingenieurwesen</a>
</li>
<li class="">
<a href="https://www.kit-ausbildung.de/de/duales-studium/bachelor-of-science/informatik">Informatik</a>
</li>
<li class="">
<a href="https://www.kit-ausbildung.de/de/duales-studium/bachelor-of-science/informationstechnik">Informationstechnik</a>
</li>
<li class="">
<a href="https://www.kit-ausbildung.de/de/duales-studium/bachelor-of-science/sicherheitswesen-arbeitssicher">Sicherheitswesen - Arbeitssicherheit</a>
</li>
<li class="">
<a href="https://www.kit-ausbildung.de/de/duales-studium/bachelor-of-science/sicherheitswesen-strahlenschut">Sicherheitswesen - Strahlenschutz</a>
</li>
<li class="">
<a href="https://www.kit-ausbildung.de/de/duales-studium/bachelor-of-science/sicherheitswesen-umwelttechnik">Sicherheitswesen - Umwelttechnik</a>
</li>
<li class="">
<a href="https://www.kit-ausbildung.de/de/duales-studium/bachelor-of-science/wirtschaftsinformatik">Wirtschaftsinformatik</a>
</li>
</ul>
</div>
</div>
<div class="column">
<div class="nav-second-level-group">
<a class="nav-second-level-group-headline" href="https://www.kit-ausbildung.de/de/duales-studium/bachelor-of-engineering">
<span>Bachelor of Engineering</span>
</a>
<div class="nav-second-level-opener">
<span>Untermenu öffnen / schließen</span>
</div>
<ul style="">
<li class="">
<a href="https://www.kit-ausbildung.de/de/duales-studium/bachelor-of-engineering/elektrotechnik-elektrische-energietechnik">Elektrotechnik</a>
</li>
<li class="">
<a href="https://www.kit-ausbildung.de/de/duales-studium/bachelor-of-engineering/maschinenbau-konstruktion-und-entwicklung">Maschinenbau - Konstruktion und Entwicklung</a>
</li>
<li class="">
<a href="https://www.kit-ausbildung.de/de/duales-studium/bachelor-of-engineering/maschinenbau-verfahrenst">Maschinenbau - Verfahrenstechnik</a>
</li>
<li class="">
<a href="https://www.kit-ausbildung.de/de/duales-studium/bachelor-of-engineering/allgemeine-mechatronik">Allgemeine Mechatronik</a>
</li>
<li class="">
<a href="https://www.kit-ausbildung.de/de/duales-studium/bachelor-of-engineering/wirtschaftsingenieurwesen">Wirtschaftsingenieurwesen</a>
</li>
<li class="">
<a href="https://www.kit-ausbildung.de/de/duales-studium/bachelor-of-engineering/integrated-engineering/schwerpunkt-projektmanagement">Integrated Engineering/Schwerpunkt Projektmanagement</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</section>
</li>
<li class="">
<div class="nav-first-level-opener">
<span>Untermenu öffnen / schließen</span>
</div>
<a href="https://www.kit-ausbildung.de/de/praktikum">
Praktikum
</a>
<section class="nav-second-level mega-flyout" style="">
<div class="content-wrap">
<div class="container container-3-cols">
<div class="column">
<div class="nav-second-level-group">
<a class="nav-second-level-group-headline" href="https://www.kit-ausbildung.de/de/praktikum/schuelerpraktika">
<span>Schülerpraktika</span>
</a>
</div>
</div>
<div class="column">
<div class="nav-second-level-group">
<a class="nav-second-level-group-headline" href="https://www.kit-ausbildung.de/de/praktikum/praktikum-fuer-studierende">
<span>Praktikum für Studierende</span>
</a>
</div>
</div>
<div class="column">
</div>
</div>
</div>
</section>
</li>
</ul>
</nav>
<div class="header-button-container">
<a href="https://www.kit-ausbildung.de/de/offene-stellen" class="header-button"><span>Offene Stellen</span></a>
</div>
<?php get_template_part('template-parts/site-nav'); ?>
<div class="header-button-container">
<a href="https://www.kit-ausbildung.de/de/offene-stellen" class="header-button"><span>Offene Stellen</span></a>
</div>
</div>
</header>

453
kit/style.css
View file

@ -1653,458 +1653,7 @@ header:not(.sticky-header) .header-button-container {
}
}
nav .container-3-cols {
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
nav .container-3-cols .column {
margin-top: 1.66667rem;
}
nav .container-3-cols .column:nth-of-type(1), nav .container-3-cols .column:nth-of-type(2), nav .container-3-cols .column:nth-of-type(3) {
margin-top: 0;
}
nav .container-3-cols .column:nth-of-type(3n+1) {
margin-left: 0;
}
nav > ul {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
}
nav > ul > li {
margin-left: 2.5rem;
}
nav > ul > li > a {
position: relative;
display: block;
font-weight: 500;
line-height: 1;
}
nav > ul > li:hover > a,
nav > ul > li:active > a {
color: #009982;
}
nav > ul > li:hover > a::after,
nav > ul > li:active > a::after {
content: '';
position: absolute;
bottom: -1.61111rem;
left: 0;
width: 100%;
height: 1.55556rem;
border-bottom: 4px solid #009982;
}
nav > ul > li.opened .nav-first-level-opener::after {
-webkit-transform: rotateX(90deg);
transform: rotateX(90deg);
}
nav > ul > li .nav-first-level-opener {
position: absolute;
top: 12px;
right: 12px;
z-index: 1;
display: none;
width: 30px;
height: 30px;
cursor: pointer;
}
nav > ul > li .nav-first-level-opener span {
display: none;
}
nav > ul > li .nav-first-level-opener::before, nav > ul > li .nav-first-level-opener::after {
content: '';
position: absolute;
background-color: #009982;
-webkit-transition: -webkit-transform .3s;
transition: -webkit-transform .3s;
-o-transition: transform .3s;
transition: transform .3s;
transition: transform .3s, -webkit-transform .3s;
}
nav > ul > li .nav-first-level-opener::before {
top: 45%;
right: 25%;
left: 25%;
width: 50%;
height: 10%;
}
nav > ul > li .nav-first-level-opener::after {
top: 25%;
bottom: 25%;
left: 45%;
width: 10%;
height: 50%;
}
@media (max-width: 1280px) {
nav > ul > li:hover a::after,
nav > ul > li:active a::after {
border-bottom-width: 3px;
}
}
@media (max-width: 1024px) {
nav > ul > li:hover a::after,
nav > ul > li:active a::after {
border-bottom-width: 2px;
}
}
@media (max-width: 960px) {
nav {
position: fixed;
top: 4.44444rem;
right: -360px;
z-index: 20;
width: 360px;
max-width: 100%;
height: calc(100vh - 80px + 20px);
padding: 0;
overflow: hidden;
overflow-y: scroll;
background-color: #f2f2f2;
-webkit-transition: right .3s;
-o-transition: right .3s;
transition: right .3s;
}
nav > ul {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
}
nav > ul > li {
position: relative;
z-index: 2;
width: 100%;
margin-left: 0;
border-bottom: 1px solid #cccccc;
}
nav > ul > li > a {
padding: 20px;
line-height: 1;
background-color: #ffffff;
}
nav > ul > li:nth-of-type(1) {
border-top: 1px solid #cccccc;
}
nav > ul > li:hover > a::after,
nav > ul > li:active > a::after {
display: none;
}
nav > ul > li .nav-first-level-opener {
display: block;
}
.header-burger-button:checked + label + nav {
right: 0;
}
}
.nav-second-level {
position: absolute;
top: 100%;
z-index: 10;
width: 17.77778rem;
padding-top: 2.5rem;
padding-bottom: 3.33333rem;
overflow: hidden;
-webkit-transform: translateZ(0);
transform: translateZ(0);
background-color: #f2f2f2;
opacity: 0;
visibility: hidden;
-webkit-transition: opacity .3s, visibility .3s;
-o-transition: opacity .3s, visibility .3s;
transition: opacity .3s, visibility .3s;
}
.nav-second-level::before {
content: '';
position: absolute;
top: -10px;
display: block;
width: 100%;
padding-top: 10px;
}
.nav-second-level.mega-flyout {
right: 0;
left: 0;
width: 100%;
min-width: 100%;
max-width: none;
padding-top: 4.44444rem;
padding-bottom: 8.88889rem;
}
.nav-second-level.mega-flyout::after {
content: '';
position: absolute;
top: 100%;
right: 0;
left: 0;
display: block;
height: 0.83333rem;
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(51, 51, 51, 0.5)), to(rgba(51, 51, 51, 0)));
background-image: -webkit-linear-gradient(top, rgba(51, 51, 51, 0.5), rgba(51, 51, 51, 0));
background-image: -o-linear-gradient(top, rgba(51, 51, 51, 0.5), rgba(51, 51, 51, 0));
background-image: linear-gradient(to bottom, rgba(51, 51, 51, 0.5), rgba(51, 51, 51, 0));
}
.nav-second-level .content-wrap {
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
}
.nav-second-level .container {
width: 100%;
}
.nav-second-level .container .column {
overflow: hidden;
overflow-wrap: break-word;
overflow-wrap: anywhere;
}
.nav-second-level-group {
position: relative;
}
.nav-second-level-group + .nav-second-level-group {
margin-top: 2.66667rem;
}
.nav-second-level-group-headline {
position: relative;
display: inline-block;
margin-bottom: 1rem;
margin-left: 2rem;
color: #009982;
font-weight: 700;
}
.nav-second-level-group-headline .icon {
position: absolute;
top: 1px;
left: -2rem;
width: 1.33333rem;
height: 1.33333rem;
background-repeat: no-repeat;
background-position: left center;
background-size: contain;
}
.nav-second-level-group-headline span {
margin-left: -2rem;
}
.nav-second-level-group-headline .icon + span {
margin-left: 0;
}
.nav-second-level-group-headline:hover {
text-decoration: underline;
}
.nav-second-level-group.opened .nav-second-level-opener::after {
-webkit-transform: rotateX(90deg);
transform: rotateX(90deg);
}
.nav-second-level ul li a {
position: relative;
display: block;
margin-left: 1.33333rem;
font-size: 0.88889rem;
font-weight: 300;
}
.nav-second-level ul li a::before {
content: '';
position: absolute;
top: 0.33333rem;
left: -1.33333rem;
width: 0.88889rem;
height: 0.88889rem;
font-size: 1.44444rem;
background-image: url(img/arrow-right-grey.svg);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
.nav-second-level ul li a:hover {
text-decoration: underline;
}
.nav-second-level .nav-second-level-opener {
position: absolute;
top: 0.88889rem;
right: 14px;
z-index: 1;
display: none;
width: 24px;
height: 24px;
cursor: pointer;
}
.nav-second-level .nav-second-level-opener span {
display: none;
}
.nav-second-level .nav-second-level-opener::before, .nav-second-level .nav-second-level-opener::after {
content: '';
position: absolute;
background-color: #009982;
-webkit-transition: -webkit-transform .3s;
transition: -webkit-transform .3s;
-o-transition: transform .3s;
transition: transform .3s;
transition: transform .3s, -webkit-transform .3s;
}
.nav-second-level .nav-second-level-opener::before {
top: 45%;
right: 25%;
left: 25%;
width: 12px;
height: 2px;
}
.nav-second-level .nav-second-level-opener::after {
top: 25%;
bottom: 25%;
left: 45%;
width: 2px;
height: 12px;
}
nav ul li:hover .nav-second-level {
overflow: visible;
opacity: 1;
visibility: visible;
}
@media (max-width: 960px) {
.nav-second-level,
nav ul li:hover .nav-second-level {
position: static;
width: 100%;
height: auto;
padding-top: 0;
padding-bottom: 0.83333rem;
border-top: 1px solid #cccccc;
overflow: hidden;
opacity: 1;
visibility: visible;
}
.nav-second-level.mega-flyout,
nav ul li:hover .nav-second-level.mega-flyout {
padding-top: 0;
padding-bottom: 0.83333rem;
}
.nav-second-level .container,
nav ul li:hover .nav-second-level .container {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.nav-second-level .container-3-cols,
nav ul li:hover .nav-second-level .container-3-cols {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.nav-second-level .container-3-cols .column,
.nav-second-level .container-3-cols .column + .column,
nav ul li:hover .nav-second-level .container-3-cols .column,
nav ul li:hover .nav-second-level .container-3-cols .column + .column {
width: 100%;
margin-left: 0;
}
.nav-second-level .container-3-cols .column:nth-of-type(n+3),
nav ul li:hover .nav-second-level .container-3-cols .column:nth-of-type(n+3) {
margin-top: 0;
}
.nav-second-level .content-wrap,
nav ul li:hover .nav-second-level .content-wrap {
padding: 0;
}
.nav-second-level::after,
nav ul li:hover .nav-second-level::after {
display: none;
}
.nav-second-level .nav-second-level-opener,
nav ul li:hover .nav-second-level .nav-second-level-opener {
display: block;
}
.nav-second-level-group + .nav-second-level-group {
margin-top: 0;
}
.nav-second-level-group-headline {
margin-top: 0.83333rem;
margin-bottom: 0;
margin-left: 2.77778rem;
}
.nav-second-level-group-headline .icon {
top: 0;
left: -1.55556rem;
}
.nav-second-level-group-headline span {
margin-left: -1.55556rem;
}
.nav-second-level-group-headline .icon + span {
margin-left: 0;
}
.nav-second-level-group ul {
padding: 0.83333rem 1.44444rem;
margin-top: 0;
overflow: hidden;
}
.opened > a {
color: #009982;
}
}
/* header menu in seperate css file */
aside {
position: fixed;