navigation a: hover

[Andreas Harzer]

Hallo liebe Forumer,

ich würde gerne eine professionelle Lösung zu meinem Problem bekommen.Deswegen wende ich mich nochmal an euch. Ich finde die Lösung für mein Problem einfach nicht.

Problem: Ich habe eine horizontale Navigation gebaut. In der Navigationliste sind die einzelnen Punkte mit Links und target hinterlegt. Mit der Pseudoklasse hover habe ich es jetzt schon hinbekommen, dass sich die drüber fahren mit der Maus die Hintergrundfarbe ändern. Gerne würde ich jetzt noch, dass der aktive angeklickte Punkt in der besagten Hintergrundfarbe stehen bleibt. Gibt es hier eine Möglichkeit nur mit html und css? Hier mein "Code".

nav {
    float: right;
    background-color: #F5F5F5;
    font-family: 'Fresca', sans-serif,Verdana, Geneva, sans-serif;
    font-size: 120%;
    color: red;
    font-weight: bold;
    line-height: 1.5em;
    margin-bottom: 3em;
    padding: 0em;
    border: 2px solid #3b444b;
    border-top: none;
    text-shadow: grey 5px 3px 5px;
}


ul#menu li {
    display: inline;
    margin: 0;
    padding: 0;
    overflow: hidden;
}


li {
  float: left;
}

li a {
  display: block;
  color: red;
  text-align: left;
  padding:15px 12px;
  text-decoration: none;
    
}


li a:hover, a:focus, a:active {
    background-color: red;
    color: white;
 
}

Ich bedanke mich vorab für eure Mühe.

Gruß Andreas

Edit Rolf B: Code-Blöcke formatiert man mit ~~~, inline-Code mit Backticks.

[Auge]

Hallo

Ich habe eine horizontale Navigation gebaut. In der Navigationliste sind die einzelnen Punkte mit Links und target hinterlegt. Mit der Pseudoklasse hover habe ich es jetzt schon hinbekommen, dass sich die drüber fahren mit der Maus die Hintergrundfarbe ändern. Gerne würde ich jetzt noch, dass der aktive angeklickte Punkt in der besagten Hintergrundfarbe stehen bleibt. Gibt es hier eine Möglichkeit nur mit html und css?

Erst mal zur Begriffskunde, damit wir alle hier nicht aneinander vorbei reden. Die Pseudoklasse :active wird aktiv bei einem interaktiven Element, wenn es gerade benutzt wird. Bei einem Link bedeutet das, dass die Formatierung für :active nur dann wirksam ist, wenn du den Link angeklickt hältst. Wenn du die Maustaste loslässt oder die Taste der Tastatur ausgelöst hat, ist der Status vorbei.

Wenn du die Markierung des aufgerufenen Menüpunkts meinst, hat das wiederum nichts mit der Pseudoklasse :active zu tun. Du hast dann üblicherweise ein neues Dokument aufgerufen. In diesem kannst du den Link zur aktuellen Seite speziell notieren, um ihn für CSS von den anderen Links unterscheidbar zu machen.

• Du kannst dem Link eine ID zuweisen (<a href="linktext.html" id="aktuelle-seite">Linktext</a>) und diese ID mit CSS ansprechen (#aktuelle-seite {}). Eine Klasse ginge auch, aber da es normalerweise in der Navi nur einen ausgewählten Punkt gibt, ist eine ID wohl passender.
• Du kannst den Link ohne das href-Attribut notieren (<a>Linktext</a>). Den Link kannst du in CSS mit a:not([href]) {} ansprechen. Falls du eine stark dynamische Seite hast, die von den Benutzern typischerweise über den Link in der Navi aktualisiert wird, dann fällt diese Möglichkeit allerdings flach.

Tschö, Auge

[Andreas Harzer]

Hallo Auge,

vielen Dank für deine Antwort und deine Erklärung. Ich werde das mit der ID mal versuchen hinzubekommen. Da es sich hier um ein Schulprojekt handelt verlinke ich nicht auf eine andere Seite (es gibt in diesem Falle nur eine), sondern auf je eine Section.

Gruß Andreas

[Gunnar Bittersmann]

@@Andreas Harzer

vielen Dank für deine Antwort und deine Erklärung. Ich werde das mit der ID mal versuchen hinzubekommen.

Wie gesagt ist das nicht der Weg, den du gehen solltest. Zum einen weil es mit aria-current einen Weg gibt, besser für Nutzer ist.

Da es sich hier um ein Schulprojekt handelt verlinke ich nicht auf eine andere Seite (es gibt in diesem Falle nur eine), sondern auf je eine Section.

Zum anderen, weil Elemente einer Seite ihre Eigenschaften (Attribute, u.a. Klassenzugehörigkeit) dynamisch ändern können, aber nicht ihre Identität (ID) ändern sollten.

In deinem Fall einer single page dürfte "location" der passende Wert fürs aria-current-Attribut sein. Bei einer Navigation über die Seiten einer Webseite wäre es "page".

Ich habe mal in einem Codepen die Änderung des aria-current-Attributs implementiert. Zum fixierten Header siehe auch dieses Posting.

LLAP 🖖

[Andreas Harzer]

@@Gunnar Bittersmann

Hallo Gunnar, vielen Dank für deine Erläuterungen zu meinem Problem. Muss mir das Thema mal genau anschauen. Blicke hier noch nicht so ganz durch. In deinem Codepen sehe ich, dass du für das aria-current-Attribut auch JavaScript nutzt. Dies ist in meinem/diesen Falle bei mir nicht möglich, da Schulaufgabe (ohne Javascript).

Danke Andreas Harzer

[Gunnar Bittersmann]

@@Andreas Harzer

Da es sich hier um ein Schulprojekt handelt verlinke ich nicht auf eine andere Seite (es gibt in diesem Falle nur eine), sondern auf je eine Section. In deinem Codepen sehe ich, dass du für das aria-current-Attribut auch JavaScript nutzt. Dies ist in meinem/diesen Falle bei mir nicht möglich, da Schulaufgabe (ohne Javascript).

Auf einer Seite wird es dir ohne JavaScript kaum gelingen, den angewählten Abschnitt im Menü kenntlich zu machen.

LLAP 🖖

[Auge]

Hallo

Blicke hier noch nicht so ganz durch. In deinem Codepen sehe ich, dass du für das aria-current-Attribut auch JavaScript nutzt. Dies ist in meinem/diesen Falle bei mir nicht möglich, da Schulaufgabe (ohne Javascript).

Falls du statische Seiten hast, kannst du das Aria-Attribut in der navigation im passenden Eintrag genausogut händisch einfügen. Bei Gunnar wird das Attribut per JS gesetzt und verschoben, weil seine Links alle auf Abschnitte auf der selben Seite führen. Es gibt hier also keinen Reload, der ein neues Dokument lädt, in dem man das Attribut fest oder per serverseitiger Technik setzen könnte.

Tschö, Auge

[Gunnar Bittersmann]

@@Auge

• Du kannst dem Link eine ID zuweisen (<a href="linktext.html" id="aktuelle-seite">Linktext</a>) und diese ID mit CSS ansprechen (#aktuelle-seite {}). Eine Klasse ginge auch, aber da es normalerweise in der Navi nur einen ausgewählten Punkt gibt, ist eine ID wohl passender.

Weder das eine noch das andere; sondern das aria-current-Attribut – dann haben auch Nutzer von AT was davon.

Das lässt sich auch zum Stylen nutzen; einer zusätzlichen ID oder Klasse bedarf es nicht.

• Du kannst den Link ohne das href-Attribut notieren (<a>Linktext</a>). Den Link kannst du in CSS mit a:not([href]) {} ansprechen. Falls du eine stark dynamische Seite hast, die von den Benutzern typischerweise über den Link in der Navi aktualisiert wird, dann fällt diese Möglichkeit allerdings flach.

?? Warum sollte? ☞ php mit aria-current f.

LLAP 🖖