Forum: NOF - Tutorials (185 anschauliche Tutorials zum Lesen und Nacharbeiten) > NOF-Navigation und CSS-Navigation

CSS-Klappmenü - horizontal - über 4 Ebenen (für Fortgeschrittene)

(1/1)

nettesekel:
In diesem Tutorial zeige ich euch, wie ihr ein horizontales CSS-Klappmenü - das über 4 Ebenen ausklappt - in NetObjekts Fusion einbinden könnt.

Das Nacharbeiten dieser Anleitung ist für "Anfänger" nicht empfehlenswert. Ein gewissen Grundverständnis in Sachen CSS und HTML sollte vorhanden sein.

Auch für dieses Menü gilt: Damit auch im IE alles reibungslos funktionieren, publiziert eure Website bitte unter dem DocType LOOSE.
In den neuen NOF-Versionen wählt ihr hierfür die HTML-Ausgabe "HTML 4.01", in älteren NOF-Versionen könnt ihr diesen Doctype mit Hilfe der SwissKnife-DocType-Komponente publizieren.

Die Komponente könnt ihr hier downloaden.
Hier könnt ihr nachlesen wie sie installiert wird.
Und hier findet ihr eine Anleitung zur Nutzung der Komponente.


Eine Demo des Menüs könnt ihr euch unter folgendem Link ansehen. Wenn ihr mit der Maus über die Navigationsleiste fahrt, werdet ihr sehen, dass die Schaltflächen bis zu Ebene 4  ausklappen.

DEMO ANSEHEN

nettesekel:
Wenn ihr das Menü nachbauen möchtet, benötigt ihr zunächst Schaltflächengrafiken für die Menü-Buttons.
Ihr könnt, wenn ihr mögt meine verwenden, oder aber eigene erstellen.
Beachtet bitte, dass wenn ihr die Größe der Buttons ändert, entsprechende Anpassungen in der Style-Datei des Menüs vorgenommen werden müssen.






Bindet eure Grafiken am besten als Assets in euer Projekt ein, dann werden sie von NOF automatisch mit auf den Server publiziert. Eine Anleitung zum Einbinden eurer Grafiken als Assets findet ihr hier.

nettesekel:
Im nächsten Schritt bindet ihr die benötigte Style-Datei in euer Projekt ein. Diese Datei findet ihr als Dateianhang an diesem Post. (menuehorizontal.css)

Bei meinem Testprojekt habe ich bemerkt, dass NOF Inhalte der Styledatei löscht, wenn man die Datei als Asset einbindet und über NOF ins Projekt integriert. Deshalb rate ich in diesem Falle von dieser Vorgehensweise ab und empfehle die Datei von Hand einzubinden und von Hand auf den Server zu laden.

Speichert euch also die Datei aus dem Anhang ab und kopiert sie sowohl in den html-Ordner eurer lokalen Publizierung (für Offline-Tests) als auch in den html-Ordner auf eurem Server. (ich beziehe mich hier auf die Publizierung nach Assettyp)

Nachdem ihr das erledigt habt, tragt ihr die Style-Datei zwischen den Head-Tags eurer Seite ein. Da man das Menü vermutlich auf allen Seiten nutzen wird, empflielt es sich, die Eintagung im Masterrahmen-HTML vorzunehmen.
Legt euch deshalb zunächst für eure Startseite einen eigenen Masterrahmen an >> www.nof-community.de/index.php/topic,354.0 und tragt danach den nachfolgenden Code-Schnipsel ins Masterrahmen-HTML der Starseite und ins Masterrahmen-HTML einer Unterseite ein. (bei mehereren MB bitte auch in die anderen MB einfügen)

------------------------------------------------------------------------------------------------
Code zum Einfügen zwischen den Head-Tags der Start-Seite
------------------------------------------------------------------------------------------------

--- Code: HTML5 ---<link rel="stylesheet" type="text/css" href="./html/menuehorizontal.css">
------------------------------------------------------------------------------------------------
Code zum Einfügen zwischen den Head-Tags der Unter-Seiten
------------------------------------------------------------------------------------------------

--- Code: HTML5 ---<link rel="stylesheet" type="text/css" href="../html/menuehorizontal.css">

nettesekel:
Nun benötigt ihr eigentlich "nur" noch den Code für die Navigationsleiste.
Der Aufbau des Menüs wird mit jeder zusätzlichen Ebene ein bisschen verzwickter, so dass man schon alle Sinne beisammen haben sollte, wenn man das Menü aufbaut.

Ich hänge an dieses Post den Beispielcode des Menüs an, welches ihr oben als Demo ansehen könnt. Der Code ist komplett durchkommentiert, damit ihr den Aufbau besser verstehen könnt und parallel könnt ihr den Code mit dem Demo-Menü vergleichen. An Stelle der #-Zeichen setzt ihr bitte die entsprechenden Links ein.

Wenn ihr euren Menü-Code fertig zusammengestellt habt, dann fügt ihr ihn in NOF nach dieser Anleitung in ein Textfeld ein. Platziert das Textfeld dort, wo die Navigationsleiste erscheinen soll und publiziert eure Seite.

Viel Erfolg!  :smilie_xmas_551:

Navigation

[0] Themen-Index