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) mit Button-Grafiken  (Gelesen 2078 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
CSS-Klappmenü (horizontal) mit Button-Grafiken
« am: 27. November 2013, 14:28:45 »
Das Tutorial zum horizontalen Klappmenü, aus dieser Quelle stammend kennt ihr ja bereits.(Quelle)

Ich habe mit einigen Änderungen im CSS-Code Hintergrundgrafiken für die Schaltflächen eingebunden und möchte euch hier nun wieder eine kleine Anleitung dazu geben, wie ihr dieses Menü selbst erstellen könnt.

Wer bereits die einfache horizontale Klappnavi gebaut hat, braucht nur die Schaltflächengrafiken einbinden und den CSS-Code in seiner Seite gegen den aus dem nachfolgenden Post austauschen und ggf. anpassen.
« Letzte Änderung: 27. November 2013, 18:31:59 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) mit Hintergrundgrafiken
« Antwort #1 am: 27. November 2013, 17:54:47 »
Der Unterschied zwischen dieser Navigation und den zwei "einfachen" CSS-Klappnavis besteht darin, dass für diese Navigation statt reiner Farbwerte Hintergrundgrafiken verwendet werden.
Deshalb müsst Ihr zunächst mal die Grafiken für eure Navi erstellen und als Assets in euer Projekt einbinden.

   

Die Navigation besteht aus zwei Codes. Einmal der CSS-Code für das Aussehen der Navigation und einmal der html-Code für den Aufbau der Navigationsleiste.

Beginnen wir mit dem CSS-Code.

Hinweis!!! Das Tutorial geht von einer Publizierung nach Asset-Typ aus. Achtet bitte darauf, dass bei Verwendung der Navi auf Unterseiten, die Pfadangaben zu den Schaltflächengrafiken um einen Pubkt ergänzt werden müssen.
Also statt ./assets/...  muss es auf allen Unterseiten ../assets/... lauten.


------------------------------------------------------------------------------------------------
Ab hier nur für Nutzer von NetObjects Fusion 9 und niedriger
------------------------------------------------------------------------------------------------
Nutzer die bis einschließlich NOF9 verwenden, kopieren den folgenden Code und fügen ihn ins Masterrahmen-html ihres Projekts zwischen die Head-Tags ein.
Dazu drückt ihr einmal die Taste F10 auf der Tastatur, und klickt dann auf den html-Button der Eigenschaftenpalette. Es öffnet sich ein Fenster, Ihr aktiviert den Reiter „Zwischen Head-Tags” und fügt im unteren Teil des Fensters den Code ein. Die Eingabe bestätigt Ihr mit dem OK-Button.

<style type="text/css">
ul {
     font-family: Arial, Verdana;
     font-size: 14px;
     margin: 0;
     padding: 0;
     list-style: none;
}
ul li {
     display: block;
     position: relative;
     width: 161px; /* Breite der Grafik plus 1px */
     float:left;
}
               
li ul { position: absolute;
      top:41px; /* Höhe der Grafik plus 1px */
      display: none;
}

/* Formatierung der Standard-Schaltflächen */               
ul li a {
      display: block;
      text-decoration: none;
      color: #ffffff;
      border-top: 1px solid #ffffff;
      padding: 10px 15px 10px 15px;
      background: url(./asset/images/SF1.png) no-repeat 50% 0% ;
      margin-left: 1px;
      white-space: nowrap;
      height:20px; /*Höhe der Grafik minus padding oben und unten*/
}

/* Formatierung der Standard-Schaltflächen bei mousover*/
ul li a:hover {
      background: url(./asset/images/SF2.png)
}

li:hover ul {
     display: block;
     position: absolute;
}
               
li:hover li {
     float: none;
     font-size: 12px;                                               
}

/* Formatierung der Klapp-Schaltflächen*/
li:hover a {
    background: url(./asset/images/SF2.png);
    padding-top:12px;
    height:18px;
}

/* Formatierung der Klapp-Schaltflächen bei mousover*/               
li:hover li a:hover { background: url(./asset/images/SF1.png) }
</style>




------------------------------------------------------------------------------------------------
Ab hier nur für Nutzer von NetObjects Fusion 10 und höher
------------------------------------------------------------------------------------------------
Nutzer ab der NetObjectsFusion - Version 10 kopieren den folgenden Code, wechseln in die Designansicht, aktivieren dort den Reiter CSS und fügen den kopierten Code am Ende des vorhandenen Codes ein.

ul {
     font-family: Arial, Verdana;
     font-size: 14px;
     margin: 0;
     padding: 0;
     list-style: none;
}
ul li {
     display: block;
     position: relative;
     width: 161px; /* Breite der Grafik plus 1px */
     float:left;
}
               
li ul { position: absolute;
      top:41px; /* Höhe der Grafik plus 1px */
      display: none;
}

/* Formatierung der Standard-Schaltflächen */               
ul li a {
      display: block;
      text-decoration: none;
      color: #ffffff;
      border-top: 1px solid #ffffff;
      padding: 10px 15px 10px 15px;
      background: url(./asset/images/SF1.png) no-repeat 50% 0% ;
      margin-left: 1px;
      white-space: nowrap;
      height:20px; /*Höhe der Grafik minus padding oben und unten*/
}

/* Formatierung der Standard-Schaltflächen bei mousover*/
ul li a:hover {
      background: url(./asset/images/SF2.png)
}

li:hover ul {
     display: block;
     position: absolute;
}
               
li:hover li {
     float: none;
     font-size: 12px;                                               
}

/* Formatierung der Klapp-Schaltflächen*/
li:hover a {
    background: url(./asset/images/SF2.png);
    padding-top:12px;
    height:18px;
}

/* Formatierung der Klapp-Schaltflächen bei mousover*/               
li:hover li a:hover { background: url(./asset/images/SF1.png) }



Die wichtigsten Bereiche habe ich mit entsprechenden Kommentaren versehen, so dass Ihr genau sehen könnt, an welcher Stelle Ihr ggf. Farben oder Schrift Eurer Schaltflächen ändern könnt.
« Letzte Änderung: 27. November 2013, 18:25:26 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) mit Hintergrundgrafiken
« Antwort #2 am: 27. November 2013, 17:55:31 »
------------------------------------------------------------------------------------------------
Ab hier wieder für alle NetObjects Fusion Versionen
------------------------------------------------------------------------------------------------

Nun geht es an den Code für die Navigationsleiste. Hierzu zieht Ihr in Eurem Layout an der gewünschten Stelle ein Textfeld auf (zieht das Textfeld in etwa auf die Breite der Navigationsleiste), doppelklickt in dieses Textfeld, so dass der Cursor blinkt und klickt dann auf den html-Button auf der Eigenschaftenpalette.
Im sich öffnenden Fenster gebt ihr nun den folgenden Code für Eure Navigationsleiste ein.

<ul id="menu">
  <li><a href="Link zur Seite">Schaltfächen-Beschriftung[/url]</li>
  <li><a href="Link zur Seite">Schaltfächen-Beschriftung[/url]
    <ul>
    <li><a href="Link zur Seite">Schaltfächen-Beschriftung[/url]</li>
    <li><a href="Link zur Seite">Schaltfächen-Beschriftung[/url]</li>
    <li><a href="Link zur Seite">Schaltfächen-Beschriftung[/url]</li>
    </ul>
  </li>
  <li><a href="Link zur Seite">Schaltfächen-Beschriftung[/url]
    <ul>
    <li><a href="Link zur Seite">Schaltfächen-Beschriftung[/url]</li>
    <li><a href="Link zur Seite">Schaltfächen-Beschriftung[/url]</li>
    <li><a href="Link zur Seite">Schaltfächen-Beschriftung[/url]</li>
    <li><a href="Link zur Seite">Schaltfächen-Beschriftung[/url]</li>
    <li><a href="Link zur Seite">Schaltfächen-Beschriftung[/url]</li>
    </ul>
  </li>
  <li><a href="Link zur Seite">Schaltfächen-Beschriftung[/url]
    <ul>
    <li><a href="Link zur Seite">Schaltfächen-Beschriftung[/url]</li>
    <li><a href="Link zur Seite">Schaltfächen-Beschriftung[/url]</li>
    <li><a href="Link zur Seite">Schaltfächen-Beschriftunge[/url]</li>
    </ul>
  </li>
</ul>


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) mit Hintergrundgrafiken
« Antwort #3 am: 27. November 2013, 17:56:36 »
------------------------------------------------------------------------------------------------
Hinweise zur Anpassung des Navigationsleisten-Codes
------------------------------------------------------------------------------------------------

Hier poste ich nochmals den selben Code mit entsprechenden Kommentaren, damit ihr den Aufbau der Navigation besser versteht und die Anpassung der Navigation vornehmen könnt. Kopiert ihn Euch am besten in den Editor um ihn Euch mal in Ruhe ansehen zu können.

<ul id="menu">                                                       <!--Beginn Navigationsleiste-->
  <li><a href="Link zur Seite">Schaltfächen-Beschriftung[/url]</li>    <!--Beginn 1.Menüpunkt--><!--1.Menüpunkt ohne Klappmenü-Unterpunkte--><!--Ende 1.Menüpunkt-->
  <li><a href="Link zur Seite">Schaltfächen-Beschriftung[/url]         <!--Beginn 2.Menüpunkt--><!--2.Menüpunkt mit 3 Klappmenü-Unterpunkten-->
    <ul>                                                             <!--Beginn Klappmenü-->
    <li><a href="Link zur Seite">Schaltfächen-Beschriftung[/url]</li>  <!--Klappmenü-Unterpunkt 1-->
    <li><a href="Link zur Seite">Schaltfächen-Beschriftung[/url]</li>  <!--Klappmenü-Unterpunkt 2-->
    <li><a href="Link zur Seite">Schaltfächen-Beschriftung[/url]</li>  <!--Klappmenü-Unterpunkt 3-->
    </ul>                                                            <!--Ende Klappmenü-->
  </li>                                                              <!--Ende 2.Menüpunkt-->
  <li><a href="Link zur Seite">Schaltfächen-Beschriftung[/url]         <!--Beginn 3.Menüpunkt--><!--3.Menüpunkt mit 5 Klappmenü-Unterpunkten-->
    <ul>                                                             <!--Beginn Klappmenü-->
    <li><a href="Link zur Seite">Schaltfächen-Beschriftung[/url]</li>  <!--Klappmenü-Unterpunkt 1-->
    <li><a href="Link zur Seite">Schaltfächen-Beschriftung[/url]</li>  <!--Klappmenü-Unterpunkt 2-->
    <li><a href="Link zur Seite">Schaltfächen-Beschriftung[/url]</li>  <!--Klappmenü-Unterpunkt 3-->
    <li><a href="Link zur Seite">Schaltfächen-Beschriftung[/url]</li>  <!--Klappmenü-Unterpunkt 4-->
    <li><a href="Link zur Seite">Schaltfächen-Beschriftung[/url]</li>  <!--Klappmenü-Unterpunkt 5-->
    </ul>                                                            <!--Ende Klappmenü-->
  </li>                                                              <!--Ende 3.Menüpunkt-->
  <li><a href="Link zur Seite">Schaltfächen-Beschriftung[/url]         <!--Beginn 4.Menüpunkt--><!--4.Menüpunkt mit 5 Klappmenü-Unterpunkten-->
    <ul>                                                             <!--Beginn Klappmenü-->
    <li><a href="Link zur Seite">Schaltfächen-Beschriftung[/url]</li>  <!--Klappmenü-Unterpunkt 1-->
    <li><a href="Link zur Seite">Schaltfächen-Beschriftung[/url]</li>  <!--Klappmenü-Unterpunkt 2-->
    <li><a href="Link zur Seite">Schaltfächen-Beschriftunge[/url]</li> <!--Klappmenü-Unterpunkt 3-->
    </ul>                                                            <!--Ende Klappmenü-->
  </li>                                                              <!--Ende 4.Menüpunkt-->
</ul>                                                                <!--Ende Navigationsleiste-->


Für eine zusätzliche Schaltfläche ohne Klappmenü-Unterpunkte müsst Ihr eine solche zusätzliche Code-Zeile einfügen:

<li><a href="Link zur Seite">Schaltfächen-Beschriftung[/url]</li>
Für eine zusätzliche Schaltfläche mit 1 Klappmenü-Unterpunkt müsst ihr folgenden Code hinzufügen:

<li><a href="Link zur Seite">Schaltfächen-Beschriftung[/url]         
    <ul>
    <li><a href="Link zur Seite">Schaltfächen-Beschriftung[/url]</li>
    </ul>

Für jede weitere Klappleisten-Schaltfläche müsst Ihr innerhalb des Klappmenüs folgende Zeile einfügen:

<li><a href="Link zur Seite">Schaltfächen-Beschriftung[/url]</li>
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) mit Hintergrundgrafiken
« Antwort #4 am: 27. November 2013, 17:57:04 »
Damit die Navigationsleiste auch im IE funktioniert, publiziert eure Website bitte unter dem DocType LOOSE.
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.

« Letzte Änderung: 03. Juli 2014, 22:08:19 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... ;)