|
aktuelle Seite in der Navigation hervorheben
Es ist im Internet mittlerweile üblich, in der Navigation die aktuelle Seite hervorzuheben – das bietet dem Besucher Orientierung.
Doch wie geht das in NOF?
Nof macht dieses Feature automatisch bei der NOF-eigenen Navigation: mittels JavaScript bei der grafischen Lösung, und mit einem Trick bei der Textnavi: NOF macht aus dem jeweiligen Rubriken-Link der aktuellen Seite einfach einen formatierten Text.
Soweit, sogut. Doch diese Methode hat auch Haken – was ist mit Unterseiten, die nicht in der Hauptnavi auftauchen? Zudem lässt sich die NOF-Textnavi auch nur bedingt formatieren.
Die andere Variante wäre eine manuelle Formatierung, doch dann müsste logischerweise die Navigation in den Layout-Bereich, und für jede Seite extra angepasst werden. Ein irre Aufwand!
Und nun die Lösung: aktuelle Seite in der Navi hervorheben mit CSS!
Der Aufwand ist gering, und auch nicht größer als einen Google-Analytics-Script einzufügen!
Der Clou: die Navigation kann im Masterrahmen stehen bleiben! Und die zentrale Formatierung der Navi funktioniert über die Formatvorlagen. (Bis auf den hervorgehobenen Teil – der wird in der CSS-Datei formatiert).
So einfach geht’s!:
Einmaliger Aufwand der sich lohnt:
- es müssen nur die Links der Navi mit einer individuellen ID versehen werden (siehe 1.)
- für jede Rubrik muss zwar eine eigene Navi-CSS-Datei angelegt werden. Solange die Rubriken bleiben, ist der Aufwand aber einmalig.
- die Unterseiten unter der jeweiligen Rubrik brauchen dann nur noch jeweils in den Zwischen-Head-Tags die Einfügung: <link rel="stylesheet" href="[rubrik]navi.css" type="text/css">
Vorgehensweise:
Anlegen einer Navi mit den Testrubriken: Bier – Auto – Fußball – Fernsehen
- Mit den Textvorlagen ein Design für die Navigation festlegen
- Ein Textfeld aufziehen, die Rubriken reinschreiben, verlinken und mit der Formatvorlage versehen
- CSS-Dateine anlegen - für jede Rubrik eine, hier also 5 Stück (siehe unten).
Weiter geht’s am Beispiel der Seite “Auto”
- Den Links in der Navigation jeweils eine ID zuweisen: Link “Auto” markieren -> auf „HTML“ gehen und “in dem Link” einfügen: id=“autonavi“
- Layout-HTML der Seite „Auto“ - in die Zwisch-Head-Tags einfügen:
<link rel="stylesheet" href="autonavi.css" type="text/css"> - Erstellen der CSS-Datei “autonavi.css” (siehe unte)
- Die Navi-CSS-Dateien müssen manuell in den Ordner „html“ der Publizierung kopiert werden.
- Die Navi-CSS-Datei für die Startseite aber muss in das Verzeichnis, in das auch die index.html-Datei liegt!
Erstellen der CSS-Dateien
In die CSS-Datei “autonavi.css” kommt dieser CSS-Code rein:
/* Definitionen für die Navigation */
#autonavi {
font-family: Verdana, Tahoma, Arial, Helvetica, Sans-serif;
font-size: 13px;
color: #FF0033;
line-height: 30px;
font-weight: normal;
font-style: normal;
text-decoration: none ;
background-color: #FF6666;
border: 1px solid #FF0033;
padding: 2px 5px
}
In den anderen CSS-Dateien wird nur imme der Name der CSS-Datei und die Zuordnung in der Datei angepasst:
Rubrik Bier: CSS-Datei kopieren und umbennen: biernavi.css; In der Datei: #biernavi
Rubrik Fussball: CSS-Datei kopieren und umbenennen: fussballnavi.css; In der Datei: #fussballnavi
Man muss also nur eine Stamm-CSS-Datei anlegen, kopieren, umbenennen und anpassen!
Diesen Vorgang analog für jede Rubrik wiederholen!
Fazit: geringer Pflegeaufwand nur bei Änderung der Navigation!
- Das ist auch nicht mehr Aufwand als den Code von Google Analytics manuell einzufügen!
- Das kann man bestimmt noch verfeinern und automatisieren: wenn man mit Selektoren arbeitet und alle Navi-CSS-Datein in einer unterbekomt, könnte man sicher auch komplexe Navis mit Sekundär-Navis damit bedienen
- aber ich denke, ein Anfang ist gemacht! -> Fortsetzung folgt :-)