Deutschsprachiges NOF - Forum

Support und Tutorials rund um das Thema NetObjects Fusion

collapse

* Wichtige Mitglieder-Information

Aufgrund der anstehenden gesetzlichen Änderungen in Sachen Datenschutz habe ich am 03.05.2018 eine umfassende Bereinigung unserer Datenbanken vorgenommen.

Bei dieser Bereinigung habe ich alle personenbezogenen und privaten Daten unserer Mitglieder aus den Mitglieder- , Beitrags- und Nachrichtendatenbanken gelöscht.

Konkret von der Löschung betroffen waren hierbei im Wesentlichen folgende Daten:

persönliche Avatare
E-Mail-Adressen
Angaben zum Wohnort
Angaben zum Geschlecht
Angaben zu Alter und Geburtstag
IP-Adressen
Websites und Websitetitel
Signaturen
Angaben zu diversen Messengern
Passwörter
Sicherheitsfragen und -antworten
Angaben zur verwendeten Programmversion
Angaben zum verwendeten Betriebssystem
sämtlicher persönlicher Schriftverkehr in Form privater Nachrichten

Beste Grüße nettesekel

* Friendship

DER Katzenblog – mit tollen Tipps und Ideen für deine Katze(n) <3

Die letzten Beiträge

Autor Thema: Eine einfache CSS-Klapp-Navigation (vertikal) in NOF  (Gelesen 2692 mal)

0 Mitglieder und 1 Gast betrachten dieses Thema.

Offline nettesekel

  • Administrator
  • *****
  • Beiträge: 8181
Eine einfache CSS-Klapp-Navigation (vertikal) in NOF
« am: 27. November 2013, 11:20:53 »
Das Tutorial zum horizontalen Klappmenü, aus dieser Quelle stammend kennt ihr ja bereits.(Quelle)

Ich habe mit einigen geringfügigen Änderungen im CSS-Code dieses Menüs nun ein vertikales Klappmenü daraus gemacht und möchte euch hier nun wieder eine kleine Anleitung dazu geben, wie ihr dieses Menü selbst erstellen könnt.



Offline nettesekel

  • Administrator
  • *****
  • Beiträge: 8181
Re: Eine einfache CSS-Klapp-Navigation (vertikal) in NOF
« Antwort #1 am: 27. November 2013, 11:26:14 »
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.


------------------------------------------------------------------------------------------------
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: 150px;  /*Breite der Standard-Schaltflächen */
}

li ul {
  position: absolute;
  top:0;
  left:150px; /*=Breite der Standard-Schaltflächen*/
  display: none; }

/* Formatierung der Standard-Schaltflächen */
ul li a {
  display: block;
  text-decoration: none;
  color: #ffffff;
  border-top: 1px solid #ffffff;
  padding: 5px 15px 5px 15px;
  background: #2C5463;
  margin-left: 1px;
  white-space: nowrap;
}

/* Formatierung der Standard-Schaltflächen bei mousover*/
ul li a:hover {
  background: #617F8A;
}

li:hover ul {
  display: block;
  position: absolute;
}

li:hover li {
  float: none;
  font-size: 11px;
}

/* Formatierung der Klapp-Schaltflächen*/
li:hover a {
 background: #617F8A;
}

/* Formatierung der Klapp-Schaltflächen bei mousover*/
li:hover li a:hover {
background: #95A9B1;
}
</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: 150px;  /*Breite der Standard-Schaltflächen */
}

li ul {
  position: absolute;
  top:0;
  left:150px; /*=Breite der Standard-Schaltflächen*/
  display: none; }

/* Formatierung der Standard-Schaltflächen */
ul li a {
  display: block;
  text-decoration: none;
  color: #ffffff;
  border-top: 1px solid #ffffff;
  padding: 5px 15px 5px 15px;
  background: #2C5463;
  margin-left: 1px;
  white-space: nowrap;
}

/* Formatierung der Standard-Schaltflächen bei mousover*/
ul li a:hover {
  background: #617F8A;
}

li:hover ul {
  display: block;
  position: absolute;
}

li:hover li {
  float: none;
  font-size: 11px;
}

/* Formatierung der Klapp-Schaltflächen*/
li:hover a {
 background: #617F8A;
}

/* Formatierung der Klapp-Schaltflächen bei mousover*/
li:hover li a:hover {
background: #95A9B1;
}



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, 11:54:10 von nettesekel »

Offline nettesekel

  • Administrator
  • *****
  • Beiträge: 8181
Re: Eine einfache CSS-Klapp-Navigation (vertikal) in NOF
« Antwort #2 am: 27. November 2013, 11:29:41 »
------------------------------------------------------------------------------------------------
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>



Offline nettesekel

  • Administrator
  • *****
  • Beiträge: 8181
Re: Eine einfache CSS-Klapp-Navigation (vertikal) in NOF
« Antwort #3 am: 27. November 2013, 11:30:26 »
------------------------------------------------------------------------------------------------
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>

Offline nettesekel

  • Administrator
  • *****
  • Beiträge: 8181
Re: Eine einfache CSS-Klapp-Navigation (vertikal) in NOF
« Antwort #4 am: 27. November 2013, 11:32:11 »
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.

Offline nettesekel

  • Administrator
  • *****
  • Beiträge: 8181
Re: Eine einfache CSS-Klapp-Navigation (vertikal) in NOF
« Antwort #5 am: 27. November 2013, 11:32:45 »
Wenn Ihr den Code für die Navigationsleiste mit Euren eignen Links und Schaltflächentexten gespickt habt, müsst Ihr die Seite nur noch publizieren und könnt eure CSS-basierte Klappleisten-Navi bewundern.

Auf den ersten Blick mag das Ganze den einen oder anderen schrecken, es ist aber wirklich ganz simpel und schnell gemacht.

Viel Spaß!  :)

« Letzte Änderung: 03. Juli 2014, 22:08:54 von nettesekel »

Deutschsprachiges NOF - Forum

Support und Tutorials rund um das Thema NetObjects Fusion