Icon Flyout / slidern ähnlich wie bei meiner Navigation

[einsiedler]

Witzbold. Ja eben, das ist eben der Part der mir kopfzerbrechen bereitet.

Um mal kurz anzudeuten was ich bereits versucht habe:

Zunächst hatte ich mir überlegt mit details / summary zu arbeiten, denn ein "eigentliches" Menü ist es ja nun nicht wirklich.

<div class="icon-span">
					<details id="icon-nav">
						<summary>
							<a class="sitelink-title-tagline" href="http://meinewebsite.eu/arbeitsseite_14-04-25.html">
							
                             <h1>
									maxmustermann.eu
							</h1>
                             </a>
						</summary>
					</details>
</div>

Nun habe ich summary den SVG-Icon zugeteilt. background-image: url("...der link zum SVG...")

.icon-span {
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		width: 26rem;
}

.icon-span wird eine horizontale flexbox... zwei Boxen NEBENEINANDER

(eine für a , eine für das h1)

Und nun fängt das Dilemma an und zwar NUR beim besch..ten FIREFOX Hoffentlich fällt dieser SCH....ss Browser bald unter 0% der Anwender

Der Firefox besteht darauf das summary UNTER details angezeigt wird, bei ALLEN NORMALEN Browsern wird das a & h1 NEBENEINANDER angezeigt.

Genervt ging ich dazu über details / summary wieder zu entfernen und änderte es mit einem Button und dem aria=expanded Zeugs.

Da das Hauptmenü schon fertig war funktionierte anschliessend GAR NICHTS mehr, weder das Hauptmenü noch der Esel-Run

DESHALB die Frage in meinem Post: Bei beiden wird dieses aria-expanded Gedöns NICHT angewendet, kommen sich also ins Gehege.

WIE NUN kann man nun mit meinen tausenden Attributen mein [aria-expanded] INDIVIDUALISIEREN sodas es nur speziell für seine Funktion "läuft"

Ich habe meiner Meinung nach ALLE Komninationen mit diesen Kombinatoren ausgetestet und NICHTS funktioniert. Da meine frage: WARUM das?

Ich möchte DAS gerne von einem von euch zeigen lassen.

Darum bitte ich.

MFG der einsiedelnde