Deutschsprachiges NOF - Forum

Support und Tutorials rund um das Thema NetObjects Fusion

collapse

* Alles hat ein Ende...

Eine Weisheit der Dakota-Indianer sagt:
"Wenn Du entdeckst, dass Du ein totes Pferd reitest, steig ab!"

Vor fast fünf Jahren habe ich die NOF-Community gegründet und nachdem just zu diesem Zeitpunkt das „alte NOF-Forum“ quasi über Nacht vom Betreiber geschlossen wurde, war mein Forum für viele Nutzer von NetObjects Fusion eine willkommene Alternative.

Inzwischen sind weit über 5000 NetObjects-Nutzer in der NOF-Community registriert und täglich kommen weitere hinzu. An interessierten Mitgliedern fehlt es also nicht. Was aber fehlt, sind Mitglieder, die Lust haben, anderen Nutzern bei der Lösung ihrer vielfältigen Probleme in der Anwendung von NetObjects Fusion zu helfen. Vielleicht, weil viele von ihnen - ebenso wie ich - das Interesse an NOF verloren haben und zwischenzeitlich mit anderen Programmen arbeiten.

Aktuell ist es so, dass der Support wie die Kosten für den Betrieb der NOF-Community fast ausschließlich von mir übernommen werden. Dies, und die Tatsache, dass ich die Arbeit mit NetObjects Fusion nicht mehr für zeitgemäß halte, veranlasst mich, den aktiven Forenbetrieb zu beenden. Die Beiträge, Tipps und Anleitungen aus den letzten Jahren stehen ab heute nur noch als Nachschlagewerk zur Verfügung.

Ich bedanke mich an dieser Stelle ganz herzlich bei allen, die mich und die NOF-Community in den vergangenen Jahren unterstützt haben.

Beste Grüße nettesekel

Die letzten Beiträge

Autor Thema: CSS-Klappmenü - horizontal - über 4 Ebenen (für Fortgeschrittene)  (Gelesen 2496 mal)

0 Mitglieder und 1 Gast betrachten dieses Thema.

Offline nettesekel

  • Administrator
  • *****
  • Beiträge: 8181
    • Schatznasen- Der Katzenblog
  • NOF-Version: NOF 11
  • System: Windows Vista
  • System-Typ: 32bit
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.


« Letzte Änderung: 06. Dezember 2013, 23:53:36 von nettesekel »
Der neue Katzenblog mit vielen Tipps und Ideen für Katzenhalter.

Fragen - die inhaltlich ins Forum gehören - sind im Forum zu stellen und werden nur dort beantwortet. Anfragen dieser Art per PN bleiben unbeantwortet!


Avatar: fotolia.com  rat © Oleg Kozlov

Offline nettesekel

  • Administrator
  • *****
  • Beiträge: 8181
    • Schatznasen- Der Katzenblog
  • NOF-Version: NOF 11
  • System: Windows Vista
  • System-Typ: 32bit
Re: CSS-Klappmenü - horizontal - über 4 Ebenen (für Fortgeschrittene)
« Antwort #1 am: 07. Dezember 2013, 00:01:55 »
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.
Der neue Katzenblog mit vielen Tipps und Ideen für Katzenhalter.

Fragen - die inhaltlich ins Forum gehören - sind im Forum zu stellen und werden nur dort beantwortet. Anfragen dieser Art per PN bleiben unbeantwortet!


Avatar: fotolia.com  rat © Oleg Kozlov

Offline nettesekel

  • Administrator
  • *****
  • Beiträge: 8181
    • Schatznasen- Der Katzenblog
  • NOF-Version: NOF 11
  • System: Windows Vista
  • System-Typ: 32bit
Re: CSS-Klappmenü - horizontal - über 4 Ebenen (für Fortgeschrittene)
« Antwort #2 am: 07. Dezember 2013, 00:03:27 »
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
  1. <link rel="stylesheet" type="text/css" href="./html/menuehorizontal.css">

------------------------------------------------------------------------------------------------
Code zum Einfügen zwischen den Head-Tags der Unter-Seiten
------------------------------------------------------------------------------------------------
Code: HTML5
  1. <link rel="stylesheet" type="text/css" href="../html/menuehorizontal.css">
« Letzte Änderung: 07. Dezember 2013, 00:12:04 von nettesekel »
Der neue Katzenblog mit vielen Tipps und Ideen für Katzenhalter.

Fragen - die inhaltlich ins Forum gehören - sind im Forum zu stellen und werden nur dort beantwortet. Anfragen dieser Art per PN bleiben unbeantwortet!


Avatar: fotolia.com  rat © Oleg Kozlov

Offline nettesekel

  • Administrator
  • *****
  • Beiträge: 8181
    • Schatznasen- Der Katzenblog
  • NOF-Version: NOF 11
  • System: Windows Vista
  • System-Typ: 32bit
Re: CSS-Klappmenü - horizontal - über 4 Ebenen (für Fortgeschrittene)
« Antwort #3 am: 07. Dezember 2013, 00:13:59 »
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:

« Letzte Änderung: 03. Juli 2014, 22:07:10 von nettesekel »
Der neue Katzenblog mit vielen Tipps und Ideen für Katzenhalter.

Fragen - die inhaltlich ins Forum gehören - sind im Forum zu stellen und werden nur dort beantwortet. Anfragen dieser Art per PN bleiben unbeantwortet!


Avatar: fotolia.com  rat © Oleg Kozlov

Deutschsprachiges NOF - Forum

Support und Tutorials rund um das Thema NetObjects Fusion

 


Wenn dir dieser Artikel gefallen hat, dann empfehle ihn doch weiter... ;)