Ich verstehe den Umgang mit der Pseudoklasse target nicht

  • Hallo,


    wie schon im Titel beschrieben, verstehe ich nicht, wie ich mit der Pseudoklasse target umgehen muss.


    Ich habe versucht ein Aufklappmenü zu erstellen. Das ging leider völlig daneben. Hier im Seminar existiert eine Anleitung dazu:

    https://www.html-seminar.de/toggle-menue-ohne-javascript.htm


    Die habe ich nachgebaut und das funktionierte auch einwandfrei.


    Bei meinem eigenen Projekt funktioniert leider gar nichts :(


    Hier ist mein HTML - Code


    <body>

    <a href="#aufklapp_zu" class="zu">Zu</a>

    <a href="#aufklapp_auf" class="auf">Auf</a>


    <nav id="aufklappmenu">

    <li><a>Link 1</a></li>

    <li><a>Link 2</a></li>

    <li><a>Link 3</a></li>

    </nav>

    </body>


    Und hier der CSS - Code


    html {

    font-family: Arial, sans-serif;
    }


    body {


    }


    #aufklappmenu {

    display: none;

    }


    #aufklapp_auf, #aufklappmenu:target {

    display: block;

    }


    #aufklapp_zu, #aufklappmenu:target {

    display: none;

    }

    Wie man sieht habe ich nicht vertstanden wie man die Pseudoklasse target korrekt einsetzt.

    Deshalb wäre ich dankbar wenn mir jemand erklären würde, wie es richtig gemacht wird. Besonders wichtig ist mir, dass ich verstehe wo meine Fehler sind und ich den richtigen Einsatz von taget begreife.


    Danke für's Lesen




  • Target greift wenn du ein Link anklickst der kein Link ist sondern wie nee id . In dein Fall zum öffnen #aufklapp_auf diese ID muss aber auch auf der Seite vergeben sein damit es geht und dass hast du nicht. Ich mache dir Mal Beispiele fertig wie es gehen könnte . Melde mich nochmal falls keiner schneller ist

  • So , in dein fall sollte es so gehen

    Html

    Code
    1. <body>
    2. <a href="#aufklapp_zu" class="zu">Zu</a>
    3. <a href="#aufklapp_auf" class="auf">Auf</a>
    4. <nav id="aufklapp_auf">
    5. <li><a>Link 1</a></li>
    6. <li><a>Link 2</a></li>
    7. <li><a>Link 3</a></li>
    8. </nav>
    9. </body>

    Css

    Code
    1. #aufklapp_auf{
    2. display: none;
    3. }
    4. #aufklapp_auf:target {
    5. display: block;
    6. }

    Wenn du AUF anklickst wird mit Target die id des Menüs angesprochen und da durch sichtbar gemacht.

    Beim klick auf zu wird einfach nee andere id oder auch einfach "#" angesprochen , dadurch hat das menü das target nicht mehr und ist dann auch nicht mehr sichtbar

    https://codepen.io/basti1012/pen/GRRXoVx?editors=1100


    Ich persönlich mache es lieber so .

    https://codepen.io/basti1012/pen/vYYzGGR?editors=1100


    Ich finde das einfacher

  • Kann man statt einer ID auch eine Klasse benutzen, oder muss es hier zwingend eine ID sein?

    Mit den Ankern geht das so wie in diesen fall nur mit id ,

    Habe das mal aus spaß gerade getestet , aber der Browser versucht den Link zu öffnen und nicht die Klasse anzuspringen.Wäre bei vielen gleichen Klassen Namen auch sinnlos.


    Wenn du andere möglichkeiten sucht das hier ohne Javascript zu machen gibt es auch noch checkbox hack