Wie muss ich mit der CSS Pseudoklasse target umgehen?

Hallo,

ich versuche gerade mit der CSS Pseudoklasse target ein aufklappbares Navigationsmenü zu erstellen. Aber ich kapier absolut nicht die Funktionsweise.

Ich habe versucht den Code selber zu schreiben, aber das ging, um es milde auszudrücken, volles Programm in die Grütze.

Auf den Seiten kulturbanause und mediaevent.de habe ich versucht das Verhalten von target nachzuvollziehen. Aber irgendwie ist das dort ziemlich kompliziert erklärt.

Hier ist mein html Code

<body>
    <nav id="navigationsliste">
        <li><a href="">Link 1</a></li>
        <li><a href="">Link 2</a></li>
        <li><a href="">Link 3</a></li>
    </nav>
    <a href="#navigationsliste-auf">Menu auf</a>
    <a href="#navigationsliste-zu">Menu zu</a>

</body>

Und hier der CSS Code

html {

}

body {

}

#navigationsliste:target, #navigationsliste-auf {
    display: block;
}

#navigationsliste:target, #navigationsliste-zu {
    display: none;
}

(Ja - es ist mir durchaus bekannt, dass der Code von vorne bis hinten verkehrt ist. Deshalb habe ich auch oben erwähnt, das ich die Funktionsweise nicht mal im Ansatz verstanden habe.)

Vielleicht hat ja jemand Lust mir die richtige Funktionsweise zu erklären. Wichtig ist für mich, dass ich verstehe wie es funktioniert.

Danke für’s Lesen

Zwei Tage und keine Antwort.

Gibt es hier tatsächlich keinen Experten, der „target“ verständlich erklären kann?

Ich bin keiner. Ich kenne nur:
https://wiki.selfhtml.org/wiki/CSS/Selektoren/Pseudoklasse/target
https://wiki.selfhtml.org/wiki/CSS/Selektoren/Pseudoklasse
Hilft dir das eventuell weiter?

Dieser Beitrag wurde von der Community gemeldet und ist vorübergehend ausgeblendet.

Alles zu Pseudoklassen findet man hier: https://developer.mozilla.org/de/docs/Web/CSS/Pseudo-classes