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

NOF-Navigation & ihre Einstellungen - Teil 8 - (Richtung der Klappmenüs)

(1/1)

nettesekel:
Nun möchte ich noch ein paar Sätze zur Ausrichtung des Klappmenüs schreiben. Hier gibt es verschiedene Einstellmöglichkeiten, welche ich euch nacheinander erklären und vorstellen möchte.

Um die Ausrichtung des Klappmenüs einstellen zu können, müsst ihr zunächst eure Navigationsleiste mit einem einfachen Klick markieren und dann den zweiten Reiter der Eigenschaftenpalette aktivieren. Dort klickt ihr dann den Button „Erweitert...” an.



Standardmäßig stehen die Klappmenüs auf der Einstellung
Vertikal / Rechts / Offset-x-y: 0



Wie sich das Klappmenü bei dieser Einstellung verhält, könnt ihr in folgendem Beispielprojekt ansehen und testen.

http://demos.nof-community.de/Navigation/Klappleiste_vertikal_rechts/index.html

nettesekel:
Wenn ihr diese Einstellung nun ändern wollt, markiert ihr links im SiteStruktur-Baum zunächst mit einem einfachen Klick die Ebene unter welcher die Seiten ausklappen sollen, so dass diese blau unterlegt sind. Heißt, es werden nicht die Seiten markiert, die später ausklappen sollen, sondern die, welche darüber liegen.



Nun können rechts im Fenster die Einstellungen geändert werden. Zunächst ändere ich mal die Orientation von „Vertikal” in „Horizontal”.
Das hat zur Folge, dass die Schaltflächen des Klappmenüs nicht untereinander sondern nebeneinander angeordnet werden.
Besonders bei einer horizontalen Navi ist das recht ungünstig, da das Klappmenü die Schaltflächen des Standard-Menüs verdeckt.

Zum ansehen und ausprobieren gibt es wie immer ein Demo-Projekt:
http://demos.nof-community.de/Navigation/Klappleiste_horizontal_rechts/index.html

nettesekel:
Da wir gerade bei der horizontalen Orientation sind und die Klappmenüs der horizontalen Navigationsleiste so öffnen, dass die eigentliche Navigation von ihnen verdeckt wird, wenden wir uns an dieser Stelle kurz der Option „Offset” zu.




Mit Offset X: können wir einen horizontalen Abstand des Klappmenüs definieren, mit Offset Y: einen vertikalen Abstand.
Fügen wir zusätzlich zu unserer letzten Einstellung nun noch einen Wert von 15 bei Offset Y: ein, so wird das Klappmenü um 15px nach unten versetzt und verdeckt somit nicht mehr die Schaltflächen der eigentlichen Navigationsleiste.

Auch hierzu wieder ein Demo-Projekt zum testen.
http://demos.nof-community.de/Navigation/Klappleiste_horizontal_rechts_offset/index.html

nettesekel:
Unter dem Punkt „Öffnen” habt ihr die Möglichkeit eine Richtung anzugeben, in die das Menü aufgeklappt werden soll. Als Standardrichtung ist dort „Rechts” voreingestellt. Man kann allerdings auch Links, Unten oder oben einstellen.

Ganz wichtig für jede Einstellung ist, dass ihr vorab im linken Teil des Fensters die Ebene markiert unter der die Navigation ausklappen soll.
Also sollen Seite B1, B2 und B3 ausklappen so muss die übergeordnete Seite, in meinem Beispiel die „Seite B” markiert werden um die Klappleisteneinstellungen erfolgreich vorzunehmen.




In folgenden Beispielprojekten könnt ihr die drei Einstellungen ansehen und testen.

Öffnen: Links
http://demos.nof-community.de/Navigation/Klappleiste_vertikal_links/index.html

Öffnen: Oben
http://demos.nof-community.de/Navigation/Klappleiste_vertikal_oben/index.html

Öffnen: Unten
http://demos.nof-community.de/Navigation/Klappleiste_vertikal_unten/index.html

nettesekel:
Unter der Option „Öffnen” finden sich aber auch noch Einstellmöglichkeiten wie nach links, rechts, oben oder unten schieben. Hierbei wird das Klappmenü  mit einem minimalen Animations-Effekt in die angegebene Richtung geöffnet.



Während es bei der Einstellung „unten”, einfach unterhalb der berührten Schaltfläche „aufpoppt” wird es bei der Einstellung „nach unten schieben” nach unten hin „aufgeschoben”.

Im folgenden Beispielprojekt könnt ihr die beiden Einstellungen miteinander vergleichen um den Effekt besser erkennen zu können.
http://demos.nof-community.de/Navigation/Klappleiste_vertikal_unten_schieben/index.html

Ein weiterer Effekt ist das Überblenden, wobei ich gestehen muss, dass mir hier die Animation so gut wie gar nicht auffällt. Aber vielleicht könnt ihr ihn ja erkennen: http://demos.nof-community.de/Navigation/Klappleiste_vertikal_unten_blenden/index.html

Natürlich kann man für jede dieser Einstellungen zusätzlich auch die Einstellung „Offset” vornehmen.

Navigation

[0] Themen-Index