|
|
||
|
|
Tutorial CSS Textnavigation dieser Seite
... guckt bitte auch hier für eine Erstellung einer CSS-Navi mit einem Generator von CSS3Menu.com.
Da ich in meinem Tutorial zu einer CSS Textnavigation eigentlich berreits alles beschrieben habe, erkläre ich hier nur noch meine spezifischen Einstellungen auf dieser Seite. Lest Euch also zunächst mein anderes Tutorial aufmerksam durch.
Den Code unten fügt Ihr in die “Layout-HTML” (für eine Seite) oder auch die “Master-Rahmen HTML” (für alle Seiten) Eures Projektes ein. Achtet dabei auf die korrekte relative Pfadangabe zu der CSS-Datei, bei der Startseite (Home) darf dort nur ein Punkt stehen, also
./html/klappnavi.css
Bei mir habe ich diese CSS-Datei “klappnavi.css” genannt.
> Layout (oder Master-Rahmen) markieren > im Fenster “Eigenschaften” auf Button “HTML” klicken > Zwischen Head Tags einfügen
|
Meine CSS-Datei (klappnavi.css) habe ich gleich in meinen Ordner “Assets” der “Lokalen Publizierung” meines Projektes kopiert und dann in meine “Assets-Verwaltung” eingelesen. Wie man das macht könnt Ihr hier lesen. NOF wird dann diese so eingebundene CSS-Datei sogleich in den Ordner “html” integrieren. Dies hat dann den Vorteil, dass spätere Änderungen an dieser Datei (im Ordner “Assets”) automatisch von NOF übernommen werden und diese Datei auch automatisch von NOF auf den Server publiziert wird.
Unten meine CSS-Datei, die ich als klappnavi.css abgespeichert habe. Zum Testen könnt Ihr Euch diese Datei hier kopieren oder hier downloaden. Beachtet meine /* Kommentare */ in dieser Datei.
|
|
Alle Navi-Buttons, die Ihr oben in der CSS-Datei seht, müsst Ihr natürlich ebenfalls in die Assets-Verwaltung einlesen, so wie bereits weiter oben beschrieben und die Button-Dateinamen an Eure Buttons anpassen. Diese werden dann auch wieder automatisch von NOF in den Ordner
assets/images/
übernommen und automatisch auf den Server publiziert.
Jetzt kommt die eigentliche Navi, die eben mit Hilfe dieser CSS-Datei und den entprechenden Auflistungszeichen dargestellt wird.
Ich wollte hier, dass der jeweilig aktive Button eben ein anderer Button ist, den ich mit der Class “headlinkaktiv” in der CSS-Datei definiert habe. Wenn Ihr das auch wollt, dann müsstet Ihr diese Navi entweder in den Layout-Bereich Eurer Seite legen oder jeder Seite einen eigenen
Master-Rahmen geben (was aber dann zu dem gleichen Ergebnis führen würde). Das Gleiche gilt auch für interne Seiten, die Ihr mit einer relativen Pfadangabe verlinken wollt.
Ansonsten müsstet Ihr eben die internen Seiten auch mit einem absoluten Pfad (http:) verlinken und auf die Hervorhebung des aktiven Buttons verzichten. Dann könnt Ihr die Navi auch in ein und den gleichen Master-Rahmen einbauen.
|
Die Navi oben ist natürlich nur ein Beispiel, das Ihr an Eure Bedürfnisse anpassen müsst. Wie man eine vertikale Textnavigation erstellen kann, habe ich ebenfalls in meinem anderen Tutorial beschrieben.
Den Code der Navi (oben) fügt Ihr dann in den HTML-Code Editor eines Textfeldes ein, das Ihr an der Stelle platziert, wo die Navi später erscheinen soll. Achtet dabei darauf, dass das Textfeld mindestens die Länge aller Buttons haben muss.
Bei dem einen oder anderen DOCTYPE könnte es passieren, dass die Ausklappleisten den Inhalt Eures Layouts darunter verschieben. Sollte das geschehen, dann könnt Ihr unter das Textfeld mit der Navi einen extra Layout-Bereich legen, dem Ihr dann die HTML-Ausgabe “HTML 4.01” gebt (also “Festes Seitenlayout”), damit dieser Bereich einen eigens definierten DIV-Container bekommt.
Viel Erfolg !