nicht angemeldet
hab mal eine frage.
auf manchen seite ist ja, wenn mann zb auf einen link im menu klickt, dass dann der hintergrund vom gewählten link eine andere farbe hat.
Ich knüpfe jetzt mal an Daniels Beitrag an:
Du musst den Link, der die aktuelle Seite repräsentiert irgendwie vom Rest abheben. Dafür bieten sich z.B. Klassen an.
z.B.
<ul>
<li>Seite 1</li>
<li>Seite 2</li>
<li class="aktuell">Seite 3</li>
<li>Seite 4</li>
<li>Seite 5</li>
</ul>
> und dann in der CSS-Datei u.a.:
>
> `li.aktuell {background-color:Farbe;}`{:.language-css}
>
> Wenn du das Menü serverseitig einfügst, musst du dir eben entsprechende Algorithmen ausdenken, um das class-Attribut einzufügen. Ein einfacher include() ist da jedenfalls nicht mehr ausreichend…
Wenn man wenig Links hat, ist das Formatieren des aktuellen Links auch mit CSS möglich.
Ähhm, wenn man \_viele\_ Links hat, dann natürlich auch, aber dann wird es schnell chaotisch und unübersichtlich im Stylesheet. ;-)
Also: jedem Link eine eigene Klasse oder ID geben.
<ul>
<li><a href="home.html" class="eins"> Startseite </a></li>
<li><a href="mail-me.html" class="vier"> Kontakt </a></li>
<li><a href="impress.html" class="fuenf"> Impressum </a></li>
</ul>
Will man nun das CSS auch noch auslagern, so braucht man eine Möglichkeit, mit CSS zb die Seite 'home.html' mit dem ersten Link der <ul> zu verknüpfen, weil dieser ja auf der Seite 'home.html' der aktuelle Link ist, und anders formatiert werden soll.
Also, wie schon erwähnt, jeder Seite einen Namen geben.
Die Seite 'home.html' bekommt also <body id="home">
die Seite 'impress.html' bekommt <body id="impress"> usw
Nun im CSS den ID-Namen der Seite mit der Klasse des dazugehörigen Links verknüpfen:
body#home li a.eins,
body#mail li a.vier,
body#impress li a.fuenf
{ ... } (Formatierung für den aktuellen Link)
li a:hover,
body#home li a.eins:hover,
body#mail li a.vier:hover,
body#impress li a.fuenf:hover { ... } (Formatierung für den aktuellen Hover-Link)
bsp-code:
<http://gaby77.ga.funpic.de/FAQ/aktueller_link/navi_auslagern_mit_bild/home.html>
Du kannst auch zum Seitenwechsel aufs Bild klicken.
Im Menü wird dann der aktuelle Link angezeigt.
Grüße
gaby
Der Martin