ak|weblog

Sinnvolle Gestaltung eines “Current Link”

Mike Rundle schlägt vor, den Mauszeiger daran zu hindern, zur Hand zu werden, wenn ein Link auf die gerade aktive Seite zeigt. Man nutzt dazu die Fähigkeit von CSS, den Mauszeiger zu verändern. Der relevante Befehl in diesem Fall ist:

cursor:default;

Das ganze lässt sich z.B. gut einsetzen, wenn man per CMS oder Server Side Includes auf jeder Seite dieselbe Navigation einbindet. Durch eine ebenfalls schon länger vorgestellte Technik, dem body-Element jeder Untersektion eine eigene ID zu geben, kann man sowohl den “Current”-Zustand als auch den Cursor anpassen.

Ein Beispiel:

Navigation:

<li><a href="home.htm" id="homelink" >Home</a></li>
<li><a href="sektion1.htm" id="sek1link">sektion1</a></li>
<li><a href="sektion1.htm" id="sek2link">sektion2</a></li>


Das XHTML für eine Seite in Sektion2 sähe z.B. so aus:


<body id="sektion2">
...
</body>

Das CSS für den entsprechenden Teil der Navigation so:

#sektion2 #sek2link {

background-color:red; cursor:default;
}

Ein Link zu der gerade aktiven Seite kann durchaus zu Verwirrung beim User führen. Andererseits möchte man sich natürlich ersparen, für jede einzelne Seite die Navigation von Hand anzupassen. Mit dieser Methode lässt sich beides in Einklang bringen.

[via: CSS Vault]

Geschrieben spät abends am 09. Juli 2004
Abgelegt unter Webwork & CSS

1Peter B. schrieb am 10. Juli 2004, 08:22 h    # 

Ich weiß garnicht wie oft und wie lange ich an diesem Problem der "automatischen" Linkauszeichnung herumgedacht habe. Und dabei ist es so simpel. Danke für den Stupser in die richtige Richtung ;)

2-thh schrieb am 10. Juli 2004, 13:08 h    # 

Wenn man die Seiten eh aus PHP generiert, kann man stattdessen auch einfach die aktuelle Seite nicht mit einem Link hinterlegen - das ist noch besser und funktioniert auch in Browsern, die mit CSS zu kämpfen haben. :)

3Mike Rundle schrieb am 12. Juli 2004, 04:26 h    # 

Thanks for the link! Hope it's useful for you :)

Take care-

Mike Rundle

4Jeena Paradies schrieb am 5. August 2004, 15:33 h    # 

Hi allerseits,

Jon Hicks beschrieb diese Vorgehensweise schon vor über einem Jahr oder verstehe ich das jetzt irgendwie falsch?

Zu dem Thema Current Page und PHP habe ich vor einiger Zeit auch ein kleines System entwickelt zu sehen in meinem Weblog, vielleicht hilft es dem einen oder anderen.

Grüße Jeena Paradies