Menüpunkt hervorheben

  • Bei meiner Navigation möchte ich gerne den Button des Navigationsmenüs hervorheben, auf der Seite, wo ich gerade bin.

    Das soll dem Besucher eine Erleichterung sein, damit er besser sieht, wo er gerade ist.


    Das Menü existiert als ul folgendermaßen:


    <div id="navigation">

    <ul>

    <li> <a id="navi01" href="index.html">Startseite</a></li>

    <li> <a id="navi02" href="informationen.html">Informationen</a></li>

    <li> <a id="navi03" href="impressum.html">Impressum</a></li>

    </ul>

    </div>


    Im CSS habe ich:


    #navigation a:current {

    background-color: red;

    }


    Mit a:active habe ich es schon ausprobiert, aber damit bleibt die Farbänderung nur solange, wie ich mit der Maus drüber bin.

    Mit a:current passiert gar nichts.


    Was habe ich übersehen?

  • Dieses Javascript fügt dem aktuellen Link die Klasse "active" hinzu:

    Code
    1. <script>
    2. const url = document.location.href;
    3. document.querySelectorAll('#navigation li a').forEach(item => {
    4. if (url.includes(item.href)) {
    5. item.classList.add('active');
    6. }
    7. });
    8. </script>

    Dann kannst Du ihn mit CSS hervor heben, z. B. so:

    Code
    1. <style>
    2. #navigation li a.active {
    3. background-color: lightblue;
    4. }
    5. </style>

    BTW: Für die Navigation kannst Du mit Vorteil auch das nav-Tag verwenden.

  • Wenn du zb auf der Startseite bist gibst du dein <li> eine Klasse

    <li class="active_seite">

    Nein. Das richtige Attribut für den Fall ist aria-current="page" - so ist für jeden Client klar dass sich der Link auf die aktuelle Seite bezieht. Die Formatierung kann dann ja ebenfalls über CSS erfolgen, der Attributselektor existiert.

    Es gibt auch noch die möglichkeit mit :target

    … die aber hier nichts bringt.

    BTW: Für die Navigation kannst Du mit Vorteil auch das nav-Tag verwenden.

    s/kannst/musst (ja, ich weiß das ist Perl, kein PHP)

  • Dieses Javascript fügt dem aktuellen Link die Klasse "active" hinzu:

    Code
    1. <script>
    2. const url = document.location.href;
    3. document.querySelectorAll('#navigation li a').forEach(item => {
    4. if (url.includes(item.href)) {
    5. item.classList.add('active');
    6. }
    7. });
    8. </script>

    Dann kannst Du ihn mit CSS hervor heben, z. B. so:

    Code
    1. <style>
    2. #navigation li a.active {
    3. background-color: lightblue;
    4. }
    5. </style>

    BTW: Für die Navigation kannst Du mit Vorteil auch das nav-Tag verwenden.


    Das hätte ich auch grade ausprobiert, klappt bei mir leider nicht. Geht das denn auch, wenn durch den Link eine neue Seite aufgerufen wird oder funktioniert das nur innerhalb derselben Seite?


    So hab ich das bei mir angepasst.

    Code
    1. const url = document.location.href;
    2. document.querySelectorAll('.navigation .menu-list li a').forEach(item => {
    3. if (url.includes(item.href)) {
    4. item.classList.add('active');
    5. }
    6. });
    Code
    1. .navigation .menu-list li a.active {
    2. background-color: red;
    3. }
  • Zitat

    Geht das denn auch, wenn durch den Link eine neue Seite aufgerufen wird oder funktioniert das nur innerhalb derselben Seite?

    Ich denke schon, wenn das Skript in der aufgerufenen Seite vorhanden ist.

    Wo hast Du das Skript denn platziert? Am besten am Ende des Body, vor dem schließenden </body>.

    Wenn es dann nicht funktioniert, poste am besten die URL einer Testseite, damit man es sich ansehen kann.

  • Code
    1. .navigation .menu-list li a.active {
    2. background-color: red;
    3. }

    Hab ich doch?


    Also ich sehe im Inspektor auch, dass die Klasse hinzugefügt wurde. Aber... *weitergrübel*



    Sorry, ich Nuss. Hab die active-Klasse nur in einem bestimmten Breakpoint formatiert... Sehr gscheit.


    Also, alles gut. Funktioniert tadellos!

  • Code
    1. const url = document.location.href;
    2. document.querySelectorAll('.navigation .menu-list li a').forEach(item => {
    3. if (url.includes(item.href)) {
    4. item.classList.add('active');
    5. }
    6. });

    Sollte man in Zeile 4 nicht noch irgendwie mit && hinzufügen, dass ein aria-current="page" eingefügt werden soll? Ich finde nur leider die Befehle dafür nicht.

  • Mit diesen aria-Dingen habe ich mich noch nicht beschäftigt, aber es sollte kein Problem sein, das mit setAttribute zu setzen:

    Code
    1. const url = document.location.href;
    2. document.querySelectorAll('.navigation .menu-list li a').forEach(item => {
    3. if (url.includes(item.href)) {
    4. item.classList.add('active');
    5. item.setAttribute('aria-current', 'page');
    6. }
    7. });
  • Den Aria-Kram braucht kein Mensch (mehr).


    ARIA (Accessible Rich Internet Applications) dient dazu Webseiten barrierefreier zu machen.


    Das stammt noch aus Zeiten von HTML4 und CSS2, als HTML-Elemente keine Bedeutung hatten. In HTML5 haben aber alle (ALLE) Elemente eine Bedeutung. Durch Anwendung der dafür gedachten HTML-Elemente kann ohne viel Aufwand eine barrierearme Webseite erstellt werden. Barrierefreie Webseiten sind ein Schlagwort, in der Praxis nicht möglich.


    Bei korrekt angewandten HTML-Elementen ist ARIA nicht erforderlich. Falsch angewandte HTML-Elemente mit ARIA-Attributen zu "verbessern" ist ein Widerspruch in sich.


    Es ist also in jedem Fall sinnvoller die HTML-Grundlagen zu lernen.


    Wenn ARIA verwendet werden soll dann aber auch komplett. Ein paar ARIA-Attribute in eine Webseite einzubauen ist wie eine 3 m lange Leiter mit 6 Sprossen.


    So eine Leiter kann aus noch so stabilem Holz mit wunderschöner Maserung handgerfertigt sein. Sie ist trotzdem unbenutzbar.

  • Den Aria-Kram braucht kein Mensch (mehr). […]

    Was für ein Schwachsinn!

    Natürlich ist WAI-ARIA immer noch wichtig, die Zugänglichkeit von Seiten wird tendenziell sogar wichtiger als früher: früher[tm] wurde wenig Wert auf die Zugänglichkeit von Seiten gelegt (wohl auch mangels entsprechender Techniken), heute ist das anders. Klar, viel lässt sich erschlagen indem man die semantisch richtigen Elemente funktioniert, aber das geht eben längst nicht immer!

  • Manchmal glaubt man, man kann für eine neue Seite einfach das, was man schon hat, nehmen und anpassen. Dann tut man es und merkt, es geht nicht. Und versteht nicht warum.


    Code
    1. const url = document.location.href;
    2. document.querySelectorAll('nav ul li a').forEach(item => {
    3. if (url.includes(item.href)) {
    4. item.classList.add('active');
    5. }
    6. });


    Link zur Seite

    Testen nur mit Menüpunkt Mitglieder (mitglieder.php und index.php).


    Die Klasse active wird erst gar nicht hinzugefügt.

    Auch wenn ich alle a nehme, geht's nicht. Weder lokal noch online (denn das Problem hatte ich auch schon, dass JS lokal gar nicht funktioniert hat).


    Link zur anderen Seite - da ist es ja gleich, da geht's.