Header

Achte darauf, dass die Navigationsmenüs einen korrekten »accessible name« mittels aria-label besitzen. Dieser leitet sich in WordPress aus dem Namen des zugewiesenen Navigationsmenüs ab.

Customizing

Es sind CSS-Variablen definiert, die die gestalterische Anpassung erleichtern. Alle Variablen sind im Child-Theme vorbereitet. Alternativ können sie im Site-Editor mittels Custom CSS überschrieben werden. Beachtet, dass die Variablen auf den Template Part Header gescoped sind und daher in .site-header und nicht in :root definiert werden.

Jedes Submenu besitzt zudem eine individuelle CSS-Klasse, um das jeweilige Menü ansprechen zu können.

Folgende Variablen haben wir vorbereitet

.site-header {

    --large-menu-gap: .5em; // Horizontal gap between menu items on large screens.
    --menu-item-padding-inline: .75em;
    --menu-item-padding-block: .5em;
    --menu-item-border-radius: 0;

    // current and parent menu item highlighting
    --current-menu-item-color: var(--wp--preset--color--base-1);
    --current-menu-item-bg:  var(--wp--preset--color--contrast-1);
    --current-menu-ancestor-color: var(--wp--preset--color--contrast-1);
    --current-menu-ancestor-bg: var(--wp--preset--color--base-2);
    
    // submenus
    --submenu-minwidth: 12em;
    --submenu-border-radius: 0;
    --submenu-shadow: var(--wp--preset--shadow--level-2);
    --submenu-nested-offset-top: .5em;
    --submenu-nested-offset-left: calc(100% - .25em);

    // search
    --search-offset-top: .5em;
    --search-border-radius: 0;
    
    /* animation */
    --menu-item-hover-transition-property: background-color;
    --menu-item-hover-transition-easing: ease-in-out;
    --menu-item-hover-transition-timing: 0.3s;
    --menu-toggle-transition: opacity .4s ease-out, height .3s ease-out; 
    --submenu-transition: all .2s linear;

}

Funktionsweise

Alle Header-Pattern sind als <div> angelegt. Das ist korrekt, da sie im Template Part für Header innerhalb von <header> inkludiert sind.

Je nachdem, welches Pattern für den Header im Einsatz ist, werden die Navigation, die Suche oder beides gemeinsam hinter einem Button versteckt und per Klick/Tab geöffnet.

Es gibt zwei Toggle-Buttons, die dynamisch per JS gerendert werden:

• .toggle-button-menu – Öffnet und schließt #toggle-container-menu. Der Button erhält das Hamburger-Icon (#icon-menu)
• .toggle-button-search – Öffnet und schließt #toggle-container-search. Der Button erhält das Hamburger-Icon (#icon-search)

Es gibt zwei Container, die alle Elemente, die per Klick über einen der Toggle-Buttons ein- und ausgeblendet werden können, im HTML gruppieren. Die Container besitzen sowohl eine ID für die JS-Trigger als auch eine CSS-Klasse für das Styling:

• #toggle-container-menu – ID für die Klick-Funktionen im JS
• .toggle-container-menu – CSS-Klasse für das Styling
• #toggle-container-search – ID für die Klick-Funktionen im JS
• .toggle-container-search – CSS-Klasse für das Styling

Der Breakpoint des Headers wird über die theme.json gesteuert.