Frage zum Wiki-Artikel „Dateien_mit_include_nachladen“

[Frank]

Hallo Wissende, ich habe die Navigation mit include ausgelagert. Das letzte Beispiel auf der o.g. Seite "vorhandene Seiten in einem Array" habe ich nachgebaut und es funktioniert gut. Außer: Wie kann ich den aktiven Link markieren/kennzeichnen? Dachte über aria-current="page" im CSS das zu erreichen, doch komme damit nach vielen Versuchen nicht weiter. Zweifle mittlerweile ob das überhaupt möglich ist.

Vielleicht hat jemand eine Idee, einen Lösungsvorschlag?

Frank

[JürgenB]

Hallo Frank,

hast du es mal mit

li[aria-current] a { ... }

versucht?

Gruß
Jürgen

[Rolf B]

Hallo Frank,

*** Edit: Möglicherweise tue ich Dir unrecht und deine Probleme liegen im CSS. Erscheint bei Dir das aria-current Attribut überhaupt im HTML? Wenn ja, dann entschuldige den folgenden Rant ***

doch komme damit nach vielen Versuchen nicht weiter

Heißt: Du hast wild rumprobiert, frei von Wissen, was Du da tust.

Lerne debuggen! Im PHP Handbuch steht dazu ein bisschen, aber das Aufsetzen eines interaktiven Debuggers ist nicht so einfach. Statt dessen kann man auch einfach mit ECHO in den Ausgabedatenstrom schreiben. Das verhagelt einem zwar das Seitenlayout, aber man kann auf diesem Weg an die Werte von Variablen zu einem bestimmten Zeitpunkt herankommen.

Damit hättest Du herausgefunden, dass beim Abruf von http://example.org/test.php in $_SERVER["SCRIPT_NAME"] der Text "/test.php" zu finden ist. Das Beispiel geht von etwas anderem aus.

Entweder ist das Beispiel falsch, oder die Bestückung von SCRIPT_NAME ist Serverabhängig - keine Ahnung. Guck Dir mal an, was bei Dir in $_SERVER["SCRIPT_NAME"] steht, und passe die Abfrage bzw. die Menüeinträge entsprechend an.

Rolf

[Frank]

zunächst bedanke ich mich für Eure Antworten - sie geben mir neue Anregungen.

Den Vorschlag in CSS hatte ich auch so gedacht - doch leider ohne Erfolg.

Rolf, Du hast vollkommen Recht, ich stehe ganz am Anfang mit PHP. Von Deinem Vorschlag debuggen zu lernen bin ich noch weit entfernt - doch weitere Informationen mit ECHO will ich versuchen, wenn ich wüßte wonach ich genau suchen muss.

In den vergangenen Jahren konnte ich mir, dank selfhtml, ein Grundwissen in Html und CSS erwerben und mit guten Erfolg realisieren. Nun steht das "includieren" in PHP an.

Dazu habe ich verschiedene Beispiele (Templates)nachgebaut und über Xampp ausprobiert. Das besagte Temlate gefällt mir ausgesprochen gut, weil mein Seitelayout in Ordnung bleibt und - vor allem - weil ich mein "off-canvas-menu" problemlos einbinden kann. Das Problem ist leider noch immer die Kennzeichnung des aktiven Links.

Die Frage ob aria-current="page" auch im Html auftaucht ist berechtigt. Das Html der Navigation liegt jetzt im include, wie im Bsp. "ausgelagerte Navigation in nav.php" vorgegeben. Ich denke damit sollte das aria-current="page" richtig im Html verhanden sein. Oder?

[Rolf B]

Hallo Frank,

Ich denke damit sollte das aria-current="page" richtig im Html verhanden sein.

An dieser Stelle nützt kein Denken, sondern nur Nachgucken. Ruf die Seite ab, öffne die Entwicklerwerkzeuge^[1] des Browsers und inspiziere das DOM. Wie man damit umgeht, musst Du eh lernen.

Wenn Du im Stylesheet erreichen willst, dass Eigenschaften abhängig von aria-current="page" gesetzt werden, dann fragst Du das so ab (z.B. für ein li Element innerhalb des nav Elements der Navigation):

nav li[aria-current=page] {
   ...
}

Anführungszeichen sind erlaubt (li[aria-current="page"]), ein Doppel-Gleichheitszeichen wie in PHP oder JavaScript nicht (li[aria-current=="page"]).

Wenn Du nur die Existenz des Attributes abfragen willst, reicht auch li[aria-current]. Wenn Du im CSS unabhängig vom Elementtyp das Element stylen willst, das das aria-current Attribut hat, geht das auch: nav [aria-current=page]. Beachte die Leerstelle hinter nav, die hat in einem CSS Selektor eine Bedeutung!

Rolf

---

1. In historischer Tradition des Internet Explorers geht das mit der F12 Taste - aber Chrome und Firefox erklären im Menü, dafür sei Strg+Shift+I da. F12 funktioniert trotzdem in jedem Browser. ↩︎