nicht angemeldet
Hallo Philipp,
Jeder Menüpunkt, führt zu einer Seite. Wie gehts das, dass so lange ich eine
Seite anschaue, der Menüpunkt, der zu dieser Seite führt, activ bleibt (z.B:
fett, unterstrichen... )
Erstmal nebenbei:
Auf der öffentlichen CSS Mailingliste war vor ein paar Monaten der Vorschlag
für CSS 3 der Aufnahme eines Pseudoelementes namens :here. Dieses hätte
geleistet, was Du vermißt. Aber es dürfte anscheinend nicht mit in den
Standard kommen.
http://lists.w3.org/Archives/Public/www-style/2003Mar/0186.html
Daran, daß es ein Vorschlag ist, erkennst Du, daß es so etwas nicht gibt.
Man muß also beim Schreiben bzw. bei der Auslieferung der Seite dafür
sorgen, daß der Link, der auf die aktuelle Seite führt, entsprechende
Formatierungen bekommt. Arbeit also.
Eine elegante Variante, die die Feinheiten von CSS ausnutzt ist folgende;
sie ist an Arbeitsaufwand allerdings nur für Menüs mit einer kleinen
Anzahl von Menüpunkte ratsam.
Angenommen dieser Seitenentwurf ...
<body id="b-eins">
<ul id="navigation">
<li><a href="" id="eins">eins</a></li>
<li><a href="" id="zwei">zwei</a></li>
<li><a href="" id="drei">drei</a></li>
<li><a href="" id="vier">vier</a></li>
</ul>
<p>...</p>
</body>
... mit diesen CSS-Regeln:
a:link, a:visited, a:hover, a:active {color:blue;}
body#b-eins #eins,
body#b-zwei #zwei,
body#b-drei #drei,
body#b-vier #vier {color:red;}
Was ergibt das nun? Die erste CSS-Regel definiert die Farbe für Links
als blau. Die zweite Regel ist etwas komplexer und erfordert einen Blick
in die genauere Struktur der HTML-Seite.
Im obigen Beispiel hat der body die ID "b-eins". IDs sind ja immer
dokumentweit einzigartig, eine ID im body hat aber den Vorteil, daß
alle sonstigen IDs im Dokument in der Hierarchie darunter liegen.
Die vier Selektoren der zweiten Regel sind nun verschachtelt. Betrachten wir
einfachshalber nur den ersten Selektor (body#b-eins #eins). Damit diese
CSS-Regel in Kraft tritt, muß die ID #eins, die ja nun in diesem
hypothetischen Projekt in jedem Navigationsmenü auf jeder Seite auftaucht,
innerhalb der body-ID #b-eins liegen. Ebenso die anderen IDs.
Wenn jetzt eine andere Seite aktuell ist (beispielsweise zwei) wird
einfach deren entsprechende ID (Hier #b-zwei) als der des bodys definiert.
Damit trifft dann die CSS-Regel zu und dem Link "zwei" wird die Farbe
Rot zugewiesen.
Ein Beispiel davon kann man auf der Miniseite zum neuen Buch des Herrn
Zeldman bewundern (Die horizontale Subnavigation mit fünf Punkten):
Es liegt auf der Hand, daß diese Variante sich nicht unbedingt für
Navigationsleisten mit Massen von Menüpunkten eignet. Es wäre dann
einfach zuviel Schreibarbeit, da man all diese Abhängigkeiten im
Stylesheet definieren muß.
Wofür es sich aber eignet, sind Seiten mit ein paar Kategorieren,
die dann ihrerseits viele Unterseiten haben. Ein Beispiel für diese
Art ist http://kommdesign.de/. Dann hat man eine
Navigationsleiste, die nur ein paar Kategorien ansteuert und bei
den Unterseiten definiert man die ID für die Kategorie als ID im
body. So sieht man dann auf jeder Unterseite, zu welcher Kategorie
sie gehört.
Und natürlich ist das nicht auf Navigationsleisten bzw. Links
beschränkt. Man kann jedes mögliche Element in Abhängigkeit der
body-ID setzen. Die Möglichkeiten sind unbegrenzt.
- Tim
Schreib mal wieder was:
http://aktuell.de.selfhtml.org/artikel/beitrag.htm
http://aktuell.de.selfhtml.org/tippstricks/beitrag.htm
tft-bm