navigation mit css

[shishX]

bin froh um hilfe!
möchte mit css gesteuerter navigation, dass der navigationspunkt in der seite, die man angeglickt hat automatisch gehighlightet ist.
natürlich nicht so, dass ich in der jeweiligen seiite den navigationspunkt anders formatieren muss.

vielen dank für eure hilfe.

[Bany64]

css=>neuer Stil=>css selektor, da findest du die einstellungen für die Links

[shishX]

danke für deine hilfe.
aber ich weiss ehrlich gesagt nicht, wie du das meinst. brauch ich eine neuen style zu definieren (dreamweaver)? wenn ja, wie sieht der aus?
hast du vielleicht eine beispielseite, wo sowas definiert ist? danke!

[Bany64]

Im DW gibt es ein Fenster Design darin den Reiter "css-Stile" oder umschalt-F11, darin kannst du deine Eigenschaften für die Links über css-selektor definieren.
Probier die css Stile mal aus und öffne am besten die css Datei mal im DW dann siehst du was da alles definiert (geschrieben) wird

[shishX]

ich kenne mich mit den css stilen eigentlich schon aus. frage ist nur, gibt es eine möglichkeit, einen link hervorgehoben darzustellen, wenn der link gewählt wurde und die neue seite geladen ist. gibt es für diesen zustand eine css programmiermöglichkeit?

[seb]

Ich denke ich verstehe, was du meinst - dafür gibt es leider keine automatische Lösung.

Du wirst nicht darum herum kommen, für jede Seite dem jeweils gerade gewählten Menüpunkt eine CSS-Klasse zuzuweisen, durch die er als solcher gekenntzeichnet wird. Hat mich auch schon ab und zu geärgert .

Allerdings fällt mir gerade eben ein, dass man das mit einem kleinen Javascript realisieren könnte. Das probier ich gleich mal aus - falls dich eine JS-Lösung interessiert, kann ichs hier gerne posten.

[shishX]

vielen dank seb. schade, dass das nur mit JS funzt.
im einem projekt kann ich es nicht gebrauchen, da die site ohne JS auskommen muss (barrierefrei). für ein anderes projekt wäre ich aber um eine lösung dankbar, wenn du was weisst.

[seb]

Es ist ja nicht so, dass die Links bei abgeschalteten JS nicht mehr funktionieren würden.

Wenn JS nicht verfügbar ist, wird der Link einfach nicht als 'aktuelle Seite' hervorgehoben.
Das erhält man, wenn der Browser kein CSS versteht oder der Benutzer sehbehindert ist.

Da eine barrierefreie Seite auch ohne CSS auskommen muss bzw. die Hervorhebung des aktuellen Dokuments in der Navigation sowieso ne rein visuelle Sache ist, spricht meiner Meinung nach nichts gegen Javascript.

Gegen Javascript-Features, dien den Bedienkomfort eines Dokuments erhöhen, ohne bei Nichtverfügbarkeit etwas wegzunehmen, ist generell nichts einzuwenden. Du kannst es also ruhig einbauen.

Hier der Code:

function mark_self_links()
{
    all_links = document.getElementsByTagName('a');
    
    for(var x = 0; x <= all_links.length; x++)
    {
        if (document.location.href == all_links[x].href) all_links[x].className += ' current';
    }
} 

Die Funktion muss entweder per onLoad im Body oder per <script>-Bereich am Ende des Dokuments aufgerufen werden. Sie weist alle Links im Dokument (zusätzlich zu evtl. bereits vorhandenen Klassenzuweisungen) der CSS-Klasse 'current' zu.

Die wird in der CSS-Datei beliebig formatiert.

[shishX]

ich gebs zu: bin nicht der geborene programmierer. es hat nicht geklappt.

habs folgendermassen gemacht:
1. neue class definiert:

a.navleveleins:current {
font-family:verdana, arial, helv, sans-serif;
color: #00CC33;
background-color:#CCCC99;
text-indent: 6px;
border: 1;
margin-right: 6px;
font-size: 11px;
}

2. den code in body tag integriert:

function mark_self_links()

{

____all_links = document.getElementsByTagName('a');

____

____for(var x = 0; x <= all_links.length; x++)

____{

________if (document.location.href == all_links[x].href) all_links[x].className += ' current';

____}

}

ist da was falsch? vielen dank, falls du noch nerven hast...j-)

[seb]

Kein Problem: In dein CSS ein Fehlerchen eingeschlichen (es muss 'a.current' heißen), und nach deiner Beschreibung des JS-Einbaus ist der wahrscheinlich auch noch nicht in Ordnung.

Es sollte ungefähr so aussehen:

<style>
a.current
{
background-color:#ccc;
    font-size:20px;
...
 }
</style>

<script type="text/javascript">
function mark_self_links()
{
    all_links = document.getElementsByTagName('a');
    
    for(var x = 0; x <= all_links.length; x++)
    {
        if (document.location.href == all_links[x].href) all_links[x].className += ' current';
    }
}
</script>


<body onload="mark_self_links();">
.... 

Und nochwas: Logischerweise werden nur solche Links geändert, deren URL absolut identisch mit der URL der aktuellen Seite ist, einschließlich Query-String-Variablen (GET) etc.

Das ist ansich auch völlig korrekt, allerdings könnte es Benutzer irritieren, wenn du z.B. eine zweite Navigationsebene hast und der Menüpunkt zur ersten Ebene gehört. Wenn dann nämlich ein Unterpunkt angewählt wird, verschwindet die Kennzeichnung als aktuelle Seite wieder, auch wenn der übergeordnete Punkt rein von der logischen Inhaltehierarchie her immernoch angewählt sein sollte (du verstehst, was ich mein?).

Falls soetwas berücksichtigt werden muss, bleibt dir wirklich nichts anderes übrig, als die Sache 'per Hand' zu regeln.

[Jürgen]

Hallo,

endlich mal wieder ein bissl was interessanteres hier

Also es gibt schon noch mehr Möglichkeiten, das zu realisieren, ohne jede Seite verändern zu müssen und auch ohne JS! Hier mal die Kurzform:

1. Möglichkeit: die Lösung von http://www.kaipahl.de/brain/web_dwmx_templates.html

2. Möglichkeit: ich würde eher Template-Variablen definieren, die man einfach beim Erstellen der Seite aus der Vorlage setzt und damit sozusagen eine "Halbautomatik" realisieren. Die 1. Lösung ist da etwas unflexibel, weil sie auf Linkbezeichnungen setzt.

3. Möglichkeit: das Menü mit PHP einbinden und per Regex die aktive Seite mit dem href-Attribut der Links vergleichen - wenn Übereistimmung, dann andere CSS-Klasse. Hab ich kürzlich gemacht, aber das Problem mit der Unterseite, das seb beschrieben hat, ist da genauso vorhanden.

Gruß,
Jürgen

[seb]

Gut, welche Automatisierungsmöglichkeiten Dreamweaver einem da bietet, weiß ich garnicht.
Ich kenne Dreamweaver nicht und hab die Frage - ungeachtet der Tatsache, dass das hier das DW-Board ist - einfach mal aufgefasst, als wäre sie bei den HTML-Puristen gestellt worden.

Und an PHP hab ich vorhin garnicht gedacht. Das ist natürlich die beste Möglichkeit, die Sache zu lösen. Wenn du PHP einsetzen kannst, mach es damit.