Hallo einsiedler,
grins, ich bin jetzt von dem alten Kram ausgegangen. Mal gucken, wie sich das auf die neue Version portiert.
Das Tab-Problem habe ich jetzt mit visilibility:hidden gelöst und einer Klasse, die den Flyout-Inhalt so lange sichtbar hält, bis die Transition beendet ist.
Du hast ein Überschriften-Problem. "calendar" ist h2, aber der Link nach maxmustermann.eu soll die h1 sein? Glaube ich nicht. Die h1 gibt an, worum es auf der Seite geht. Ich denke deshalb, dass calendar in h1 sein muss und der Link zu maxmustermann.eu ist überhaupt keine Überschrift, sondern einfach nur ein Link. Den Du natürlich stylen kannst, bis er schimmerlig wird.
Den Esel habe ich jetzt so ins HTML gesetzt:
<header id="sitemast">
<div id="header-global" class="header-box">
<h2 class="page-title-tagline">calendar</h2>
<nav id="icon-nav" class="flyout-box" tabindex="-1">
<button aria-controls="icon-link"></button>
<a id="icon-link" class="flyout-content" href="...">
maxmustermann.eu
</a>
</nav>
</div>
<nav aria-label="page" id="skiplinks">...</nav>
</header>
und das Menü sieht so aus:
<div id="navi-span">
<nav id="main-nav" class="flyout-box" tabindex="-1">
<button aria-expanded="false" aria-controls="menu"></button>
<ul id="menu" class="flyout-content">
...
</ul>
</nav>
</div>
Anmerkungen:
- den tabindex -1 auf dem main-nav hast Du gemacht, weil die Skiplinks dahin verweisen, okay, ABER ich würde die Skiplinks auf den Button zeigen lassen. Denn sonst muss man erstmal mit Tab zum Button springen, bevor man das Menü öffnen kann.
- die Existenzberechtigung von navi-span würde ich bestreiten wollen, aber das wird eine längere Operation. Ich verstehe, warum Du das Ding benutzt. In Sinne von "Sorry für das lange Markup, ich hatte keine Zeit für ein kürzeres" lasse ich das so.
Die Klassen flyout-box und flyout-content bilden zusammen mit dem Button (dem man noch die Klasse flyout-toggle geben kann wenn das Flyout weitere Buttons bekommt) das Flyout-Widget. Die Grundstruktur ist
<div class="flyout-box">
<button></button>
<div class="flyout-content">
</div>
</div>
Statt der divs sind beliebige passende Elemente möglich.
Das Widget steuert sich mit
.flyout-box {
display: flex;
justify-content: end;
overflow: hidden;
}
.flyout-box > button[aria-expanded] {
width:45px;
height: 45px;
background: transparent;
color: transparent;
border: none;
margin: 0.7rem;
}
.flyout-box > .flyout-content {
display: block !important;
width: var(--flyout-width);
margin-right: calc(-0.3em - var(--flyout-width));
transition: margin-right 0.85s;
visibility: hidden;
}
.flyout-box [aria-expanded="true"] ~ .flyout-content {
margin-right: 0;
}
.flyout-box button.content-visible ~ .flyout-content {
visibility: visible;
}
wobei das Styling des Buttons eigentlich nicht ins Widget gehlört, sondern spezifisch für den Einsatz des Widgets ist. Das custom property --flyout-width muss man in dem Element setzen, das die flyout-box Klasse hat, um festzulegen, wie breit der Inhalt sein soll. Sowas kann man sicherlich geschickter lösen, vielleicht auch automatischer, aber dazu hatte ich jetzt keinen Nerv.
Für den Esel gibt's dann noch
#icon-nav {
--flyout-width: 10em;
justify-self: end;
display: flex;
align-items: center;
}
#icon-nav button[aria-expanded] {
background: center no-repeat url('***/esel.svg');
}
und für die Navigationslinks dies:
#main-nav {
--flyout-width: 10em;
flex-basis: auto;
height: fit-content;
font-size: 1.55rem;
font-weight: bold;
}
#main-nav > ul {
margin-top: 1em;
margin-left: 0.3em;
padding: 0.4em 0.9em;
border: dashed 5px red;
background: rgb(190,190,190,0.2);
}
#main-nav > button[aria-expanded=true] ~ ul {
background: orange;
}
font-style muss font-weight sein. Mit font-style setzt du Kursiv und so.
font-size und -weight auf >* und li a kann weg, das erbt sich einfach aus #main-nav.
Rolf
--
sumpsi - posui - obstruxi
einsiedler
Rolf B
Gunnar Bittersmann
