Markierung des aktiven Navigationsfeldes

[Tino]

Hallo zusammen,

folgender Sachverhalt:
Damit ein User immer weiß, wo auf der Website er sich befindet möchte ich, dass der gerade aktive Naviationspunkt farblich hervorgehoben wird. (Meine Navigation ist eine Liste)

In diesem Zusammenhang habe ich bereits einen Beitrag gefunden, der mich wie ich meine auf den richtigen Weg gebracht hat. Ich habe den Code nach bestem Wissen auf meine CSS angepasst. Leider ohne Erfolg bisher. Was/Wo muss ich noch ändern im folgenden Quellcode?

Auszug aus meiner HTML:
<ul id="navigation">
   <li class="active"><a href="company.html">Unternehmen</a></li>
   <li class="active"><a href="#">Investoren</a></li>
   <li class="active"><a href="#">Kunden</a></li>
   <li class="active"><a href="#">Panel User</a></li>
   <li class="active"><a href="#">Presse</a></li>
</ul>

Mein CSS-Quelltext:
body {
   margin: 0px;
   padding: 0px;
}

div#indexcontainer {
   margin:auto;
   width:1024px;
}

div#indexheader {
   width:1024px;
   height:74px;
}

div#indexheaderlogo {
   width:57px;
   height:56px;
   background-image:url(pics/logo.png);
   margin-left:29px;
   margin-top:9px;
   float:left;
}

div#indexheaderbalken {
   width:906px;
   height:74px;
   background-image:url(pics/header.png);
}

div#indexnavi {
   width:1024px;
   height:27px;
}

div#indexnavinormal {
   width:753px;
   height:27px;
   float:left;
}

ul#navigation  {
   margin: 0px;
   padding: 0px;
   padding-left: 0px;
   margin-left:58px;
   width: 695px;
   height: 27px;
}

#navigation li {
   display: block;
   float: left;
}

#navigation li a{
   margin-top: 0px;
   padding-top: 9px;
   margin-right: 1px;
   display: block;
   background-color: #ededed;
   height: 33px;
   width: 138px;
   text-align: center;
   font-family: verdana;
   font-size:12px;
   color: #514c4c;
   text-decoration: none;
   -moz-border-radius:5px;
   -khtml-border-radius:5px;
}

#navigation li a:hover{
   background-color: #f38628;
}

div#indexnavimarkenspecial {
   width:138px;
   height:27px;
}

ul#markenspecial  {
   margin: 0px;
   padding: 0px;
   padding-left: 0px;
   margin-left:69px;
   width: 138px;
   height: 27px;
}

#markenspecial li {
   display: block;
   float: left;
}

#markenspecial li a{
   margin-top: 0px;
   padding-top: 9px;
   margin-right: 0px;
   display: block;
   background-color: #f7d3bc;
   height: 33px;
   width: 138px;
   text-align: center;
   font-family: verdana;
   font-size:12px;
   color: #514c4c;
   text-decoration: none;
   -moz-border-radius:5px;
   -khtml-border-radius:5px;
}

#markenspecial li a:hover{
   background-color: #f38628;
}

div#linecontainer {
   width:1024px;
   height:12px;
}

div#line {
   width:905px;
   height:12px;
   background-image:url(pics/line.png);
   margin-left:58px;
   background-repeat: no-repeat;
}

div#indexcenter {
   width:1024px;
   height:470px;
   background-image:url(pics/indexcenter.png);
}

div#indexfooter {
   width:1024px;
   height:197px;
   background-image:url(pics/indexfooter.png);
}

div#companycontainer {
   margin:auto;
   width:1024px;
}

div#companycenter {
   width:1024px;
   height:467px;
   background-image:url(pics/companycenter.png);
}

div#companyfooter {
   width:1024px;
   height:195px;
   background-image:url(pics/companyfooter.png);
}

.active {
   color: #f38628;
   cursor: default;
}

Ende des Quelltexts. Bin für jede Hilfe oder Anregung dankbar!

[Picco]

Hallo zusammen,

folgender Sachverhalt:
Damit ein User immer weiß, wo auf der Website er sich befindet möchte ich, dass der gerade aktive Naviationspunkt farblich hervorgehoben wird. (Meine Navigation ist eine Liste)
Ende des Quelltexts. Bin für jede Hilfe oder Anregung dankbar!

naja du musst dem aktiven link irgendwie eine class oder id zuordnen der du dann sagen kannst das bei ihr das selbe sein soll wie bei hover.

das heißt entweder für jede Seite eine eigene Navigation oder via php eine dynamische Navigation bauen lassen.

möglicherweise kann man auch mit js abgleichen welcher link zum selben wie die aktuelle Seite führt und dann nachträglich die klasse einfügen lassen. dazu kenne ich mich aber nicht gut genug mit js aus.

[Malcolm Beck´s]

hi,

Damit ein User immer weiß, wo auf der Website er sich befindet möchte ich, dass der gerade aktive Naviationspunkt farblich hervorgehoben wird. (Meine Navigation ist eine Liste)

Mit CSS geht das ganz einfach, siehe hier.

mfg

[Gunnar Bittersmann]

@@Malcolm Beck´s:

nuqneH

Mit CSS geht das ganz einfach, siehe hier.

Einfach heißt hier nicht gut.

1. Die altuelle Seite ist im Menü verlinkt. Sollte sie nicht.

2. Bei späteren Änderungen im Menü muss auch das Stylesheet angepasst werden. Schlechte Wartbarkeit; Verletzung der Trennung von Inhalt und Präsentation.

Qapla'

[Malcolm Beck´s]

hi Gunnar,

Einfach heißt hier nicht gut.

Das war ja auch nicht die Frage, die Frage war, wie man die gerade angezeigte Seite hervorhebt; nicht immer hat man eine Serverseitige Technik zur Hand, mit der man die Navigation generieren lassen kann.
Mit SSI Bspw. wird es schwer, den Link zur gerade angezeigten Seite zu "entlinken", von daher doch schon Nützlich, zu wissen, wie es mit CSS funktioniert.

2. Bei späteren Änderungen im Menü muss auch das Stylesheet angepasst werden. Schlechte Wartbarkeit; Verletzung der Trennung von Inhalt und Präsentation.

Ich habe bei meinem Posting meine Meinung dazu zurück gehalten und mich auf die Frage bezogen, Generell stimme ich dir zu.

mfg

[Gunnar Bittersmann]

@@Malcolm Beck´s:

nuqneH

nicht immer hat man eine Serverseitige Technik zur Hand, mit der man die Navigation generieren lassen kann.
Mit SSI Bspw. wird es schwer, den Link zur gerade angezeigten Seite zu "entlinken"

Hm, sind SSI keine serverseitige Technik? ;-)

Ich sehe nicht, wie es mit SSI schwerer werden sollte als mit PHP. Man tut dasselbe:
IF URI des Menüpunkts = URI der aktuellen Seite THEN generiere Menüpunkt ohne Verlinkung ELSE generiere Menüpunkt mit Verlinkung

Qapla'

[Malcolm Beck´s]

hi Gunnar,

Hm, sind SSI keine serverseitige Technik? ;-)

Naja, nichts halbes und nichts ganzes, irgendwas dazwischen und doch wieder nichts  ;)

Ich sehe nicht, wie es mit SSI schwerer werden sollte als mit PHP. Man tut dasselbe:
IF URI des Menüpunkts = URI der aktuellen Seite THEN generiere Menüpunkt ohne Verlinkung ELSE generiere Menüpunkt mit Verlinkung

Für SSI kenne ich nur If mit expr="$QUERY_STRING".

Gibt es denn auch richtige if/else Konstrukte für SSI, ohne gleich Perl mit ins Spiel zu bringen?
Das mit dem $QUERY_STRING ist ja auch nicht gerade das Gelbe vom Ei.

Ich denke, mit SSI wird es dennoch Definitiv schwerer; selbst wenn man ein if/else Konstrukt hinkriegt, wird es immer noch mühsam sein, Bspw. ein verschachteltes Menu zu generieren -- oder aber man beisst in den Sauren Apfel und schreibt sich die Finger wund mit endlosen if/else bedingungen (was ich -- Barrierefrei hin oder her -- nicht tun würde -- aber ich habe ja PHP, daher brauche ich mir da keinen Kopp machen ;).

mfg

[Gunnar Bittersmann]

@@Tino:

nuqneH

<ul id="navigation">
   <li class="active"><a href="company.html">Unternehmen</a></li>
   <li class="active"><a href="#">Investoren</a></li>
   <li class="active"><a href="#">Kunden</a></li>
   <li class="active"><a href="#">Panel User</a></li>
   <li class="active"><a href="#">Presse</a></li>
</ul>

Wenn alle Geschwisterelemente dieselbe Klassenzugehörigkeit haben, dann ist die Klasse sinnlos. Statt per '.active' wären sie auch per '#navigation li' selektierbar.

Die Klassenbezeichnung "active" ist unglücklich gewählt, da sie an die CSS-Preudoklasse ':active' erinnert, die etwas ganz anderes tut. Besser wäre "selected" oder "current".

Der Menüpunkt der aktuellen Seite sollte aber gar kein Link sein: „Verlinke niemals auf die aktuelle Seite.“ (Punkt 10 der zehn meist-missachteten Homepage-Design-Richtlinien [Nielsen])

Damit erübrigt sich auch eine Klasse:

<ul id="navigation">  
   <li>Unternehmen</li>  
   <li><a href="investoren.html">Investoren</a></li>  
   <li><a href="kunden.html">Kunden</a></li>  
   <li><a href="paneluser.html">Panel User</a></li>  
   <li><a href="presse.html">Presse</a></li>  
</ul>

Die Formatierung des Menüpunkts der aktuellen Seite per '#navigation li', davon abweichende Foramtierungen für die anderen Menüpunkte per '#navigation li a'.

Die Generierung des Menüs samt Nichtverlinkung der aktuellen Seite kann man natürlich einer serverseitigen Logik (SSI, PHP, ...) überlassen. Dabei könnte es einfacher sein, immer ein 'a'-Element einzubauen, für die aktuelle Seite jdoch ohne 'href'-Attribut*:

<ul id="navigation">  
   <li><a>Unternehmen</a></li>  
   <li><a href="investoren.html">Investoren</a></li>  
   <li><a href="kunden.html">Kunden</a></li>  
   <li><a href="paneluser.html">Panel User</a></li>  
   <li><a href="presse.html">Presse</a></li>  
</ul>

In diesem Fall die Formatierung des Menüpunkts der aktuellen Seite per '#navigation li' bzw. '#navigation li a', davon abweichende Foramtierungen für die anderen Menüpunkte per '#navigation li a:link, #navigation li a:visited'.

Qapla'

* Ich weiß, nicht das schönste Markup, aber durchaus erlaubt.

[molily]

Dabei könnte es einfacher sein, immer ein 'a'-Element einzubauen, für die aktuelle Seite jdoch ohne 'href'-Attribut*:

[code lang=html]<ul id="navigation">
   <li><a>Unternehmen</a></li>

Aus CSS-Sicht vielleicht einfacher, aus Markup-Sicht schlechter, als das a-Element wegzulassen (wie du auch sagst). Außerdem: Wer weiß, wie UAs mit diesem leeren a umgehen.

Die gängige Methode ist hier, mit einem strong-Element den ausgewählten Menüpunkt hervorzuheben und ggf. noch ein »Sie befinden sich hier:« voranzustellen, das man mit einer barrierefreien Methode versteckt.

Mathias

[Gunnar Bittersmann]

@@molily:

nuqneH

Aus CSS-Sicht vielleicht einfacher

Finde ich gar nicht mal. Aus Script-Sicht könnte es einfacher sein:

  
<a <?php [code lang=php]if (current != foo) echo 'href="foo"'
~~~?>>foo</a>[/code]  
  
In anderen Fall müsste man sich auch noch um das End-Tag kümmern, was aber eigentlich auch so schwer nicht ist.  
  
Anders sieht es aus, wenn man die Nichtverlinkung der aktuellen Seite mit clientseitigen JavaScript macht: im Fall mit 'a'-Element müsste man nur dessen '@href' entfernen, im anderen Fall das ganze Element und dessen Inhalt an dessen Stelle ins DOM einfügen.  
  
  

> Außerdem: Wer weiß, wie UAs mit diesem leeren a umgehen.  
  
Leer?? ;-)  
  
Was sollten sie Böses damit anstellen? 'a'-Elemente mit '@name' sind auch keine Links.  
  
Qapla'

-- 
Bildung lässt sich nicht downloaden. (Günther Jauch)

[molily]

Was sollten sie Böses damit anstellen?

Es als aktivierbares Element ansehen. Ist aber nur eine Vermutung, wie ein *fehlerhafter* UA das interpretieren könnte. Die Sache mit strong hingegen ist weit verbreitet und gut geprüft.

Mathias

[Bademeister]

Hi Gunnar,
darf ich in dieser Stelle mal was fragen:

„Verlinke niemals auf die aktuelle Seite.“ (Punkt 10 der zehn meist-missachteten Homepage-Design-Richtlinien [Nielsen])

Was ist denn mit Seiten mit unterschiedlichen Parametern? Beispiel: Auf einer Seite ist ein Kalender zu sehen, der zunaechst den aktuellen Monat zeigt und ueber ein Steuermenu mittels GET-Parameter zum Anzeigen eines anderen Monats bewegt wird.
Ich finde es in solchen Faellen durchaus als angenehm, einfach nochmal auf den Link im Menu klicken zu koennen, um wieder in die Default-Darstellung zu gelangen.

Ebenso bei POST-Parametern. Ich habe etwa gerade etwas in ein Gaestebuch geschrieben und sehe dieses nun, zusammen mit einem nervtoetenden, knallroten Hinweis der Art "Danke, Ihr Eintrag wurde gespeichert." Dann will ich die Seite abermals aufrufen, aber eben ohne das Formular zu senden, und freue mich ueber den Link im Menu, der mir das ermoeglicht.

Und der Homogenitaet wegen stoert es mich daher ueberhaupt nicht, wenn der Link zu aktuellen Seite grundsaetzlich vorhanden ist.

Was sagen denn der Herr Nielsen und sein Juenger dazu? Ich verstehe

„Verlinke niemals auf die aktuelle Seite.“

so, als seien derartige Links auch in obigen Faellen eine Todsuende (als Menue-Links, nicht Steuerbuttons).

???

Danke, viele Gruesse
der Bademeister

[Auge]

Hallo

darf ich in dieser Stelle mal was fragen:

»» „Verlinke niemals auf die aktuelle Seite.“ (Punkt 10 der zehn meist-missachteten Homepage-Design-Richtlinien [Nielsen])

Was ist denn mit Seiten mit unterschiedlichen Parametern?

Eine Seite, die mit unterschiedlichen Parametern ausgegeben wird, wird praktisch zu mehreren Seiten, womit die "aktuelle Seite" wegfällt.

Was sagen denn der Herr Nielsen und sein Juenger dazu? Ich verstehe

»» „Verlinke niemals auf die aktuelle Seite.“

so, als seien derartige Links auch in obigen Faellen eine Todsuende (als Menue-Links, nicht Steuerbuttons).

Wie gesagt, unpassendes Beispiel. Und was bitteschön sind Steuerbuttons?

Tschö, Auge

[Bademeister]

Hi,

»» Was ist denn mit Seiten mit unterschiedlichen Parametern?

Eine Seite, die mit unterschiedlichen Parametern ausgegeben wird, wird praktisch zu mehreren Seiten, womit die "aktuelle Seite" wegfällt.

Hmmm. Ok.

Und was bitteschön sind Steuerbuttons?

Da musste den Herrn Nielsen fragen.

„Verlinke niemals auf die aktuelle Seite. (Ein Button, der Aktienkurse oder andere veränderliche Informationen aktualisiert, ist etwas anderes. Dieser sollte als Steuerbutton präsentiert werden, nicht als Navigationslink, da er nicht zu einem neuen Ort führt.)“ (Quelle wie oben)

Viele Gruesse,
der Bademeister

[Auge]

Hallo

»» Und was bitteschön sind Steuerbuttons?

Da musste den Herrn Nielsen fragen.

„Verlinke niemals auf die aktuelle Seite. (Ein Button, der Aktienkurse oder andere veränderliche Informationen aktualisiert, ist etwas anderes. Dieser sollte als Steuerbutton präsentiert werden, nicht als Navigationslink, da er nicht zu einem neuen Ort führt.)“ (Quelle wie oben)

Na bitte, genau der beschriebene Fall. Durch Paramerter, die per GET oder POST übergeben werden um die Ausgabe des Dokuments zu beeinflussen, wird das Dokument zu mehreren Dokumenten, da sich die angebotenen Inhalte unterscheiden.

Tschö, Auge

[Gunnar Bittersmann]

@@Bademeister:

nuqneH

Was ist denn mit Seiten mit unterschiedlichen Parametern?

Dann ist es eine Aktualisierung der Daten für die Anwendung, keine Navigation. http://forum.de.selfhtml.org/archiv/2009/4/t185908/#m1235050

Qapla'

[Bademeister]

»» Was ist denn mit Seiten mit unterschiedlichen Parametern?

Dann ist es eine Aktualisierung der Daten für die Anwendung, keine Navigation.

Und?

Dann ist es eben eine Fehlinterpretation, in einer Liste von Links (nur) eine Navigation zu sehen, wenn sie weitergehende Funktionalitaet (wie etwa "Steuerfunktion", vgl. Steuerbuttons) bietet. Steht doch nirgends, dass eine Liste von Links immer eine Navigationliste ist.

Sag ich mal ganz provokant :-)

http://forum.de.selfhtml.org/archiv/2009/4/t185908/#m1235050

Danke.

Viele Gruesse,
der Bademeister

[Gunnar Bittersmann]

@@Bademeister:

nuqneH

Steht doch nirgends, dass eine Liste von Links immer eine Navigationliste ist.

Einem Nutzer sollte klar ersichtlich sein, was er suf einer Webseite tun kann. Die Vermengung von Navigation zu einer anderen Seite und Aktionen auf dieser Seite dürfte dem nicht zuträglich sein und könnte sich als Usability-Problem erweisen.

Qapla'