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