Templatehamster: Website Templates Vorlagen Website Designs

Navigationsleisten beim eigenen Design bei nPage erstellen

Vorbemerkung

nPage ist einer der wenigen Webspaceanbieter mit Homepagebaukasten, bei dem man sein eigenes Design komplett frei gestalten kann. Das gilt auch für den englischsprachigen Ableger der Firma ASNetworks hPage.

Allerdings haben wenig erfahrene Webmaster häufig Probleme eine eigene Navigationsleiste zu erstellen, vor allem dann, wenn diese Navigation mehrstufig sein soll, also Haupt- und Untermenüpunkte aufweisen soll. Hier werden einige Beispiele solcher Navigationsleisten vorgestellt, die auch direkt bei nPage zum Einsatz kommen.

Animiertes responsives Dropdown Menu

Vorschau WebsiteX5 Template Travel A Desert horizontal
Diese Navigationsleiste erstreckt sich waagerecht über die Webseite. Sie ermöglich es, mit bis zu 3 Menübenen zu arbeiten. So kann man auch bei nPage eine Website mit 3 Menüebenen erstellen. Dies ist mit den nPage Designvorlagen nicht möglich. Zum Einblenden der untergeordneten Menüebenen wird die JavaScript-Bibiothek jQuery verwendet. Die Menüleiste ist responsiv, das heißt, dass sie sich entsprechend dem verfügbaren Platz auf dem Bildschirm anpasst.
Zur Demoseite : Animiertes responsives Dropdown Menu

Apfel (englisch: apple) CSS3

Vorschau Apfel (englisch: apple) CSS3
Diese Menüleiste erstreckt sich waagerecht über den Bildschirm und ist für eine Untermenüeben ausgelegt. Sie ist daher sehr gut für die Nutzung von nPage Script zur automatischen Menüerstellung geeignet. Der gesamte Menüaufbau ist so umgesetzt, dass kein JavaScript zum Einsatz kommt.
Zur Demoseite : Apfel (englisch: apple) CSS3

Aqua-Tabbed

Vorschau Aqua-Tabbed
Dieses Menü erstreckt sich waagerecht über die Webseite. Eine Untermenüebene ist nicht vorgesehen, daher ist diese Menüleiste auch nur für kleinere Websites geeignet. Im Fussbereich gibt es einen weiteren Navigationsbereich, in dem Links zu den Kommunikationsseiten (z.B. Kontaktformular, Gästebuch, Impressum) abgelegt sind..
Zur Demoseite : Aqua-Tabbed

Bubble Wrap Vertikal

Vorschau Bubble Wrap Vertikal
Diese Navigationsleiste ist senkrecht links im Design platziert. Es gibt keine Untermenüebene, trotzdem lassen sich deutlich mehr Menüelemente platzieren, als bei einer horizontalen Menüleiste ohne Untermenüs wie z.B. bei Aqua-Tabbed Demo 1. Bei dieser Menüleiste kommt kein JavaScript zum Einsatz.
Zur Demoseite : Bubble Wrap Vertikal

Cherry Responsive

Vorschau Cherry Responsive
Diese Menüleiste ist waagerecht im Design platziert. Es gibt eine Untermenüebene. Das Menü ist so aufgebaut, dass sich bei einer geringeren Bildschirmauflösung die Form der Navigation ändert. Dadurch lasst sich diese Navigationleiste auch mit einem Smartphone gut bedienen. Zusätzlich zur Ausgangsvariante der Navigation wurde beim :hover-Link eine kleine Grafik (ein Ferkelkopf) eingebaut. Diese Navigationsleiste ist nur mit aktiviertem JavaScript voll funktionsfähig. Es ist eine höhere jQuery-Version erforderlich.
Zur Demoseite : Cherry Responsive

Dropdown CSS3 Only

Vorschau Dropdown CSS3 Only
Diese Navigationsleiste verläuft senkrecht am linken Rand neben dem Inhalt. Sie ist so aufgebaut, dass es zu jedem Hauptmenüpunkt einen oder mehrere Untermenüpunkte gibt. Sie hat daher die typische Erscheinungsform einer Akkordion-Navigation. Die einzelnen Untermenüpunkte werden angezeigt, wenn man auf den jeweiligen Hauptmenüpunkt klickt. Diese Navigation macht ausgiebig gebraucht von CSS3-Attributen. Das gilt vor allem für das Ein- und Ausblenden der Untermenüpunkte, die mit Hilfe einer Keyframe-Animation realisiert werden. JavaScript kommt hingegen nicht zum Einsatz, auch wenn dies zunächst so erscheinen mag.
Zur Demoseite : Dropdown-CSS3-Only

Dropdown CSS3 Only nPage Script

Vorschau Dropdown CSS3 Only nPage Script
Im Unterschied zur vorherigen Variante mit dem gleichen Navigationstyp wird hier die Navigationleiste automatisch mit den einzelnen Haupt- und Untermenüpunkten gefüllt. Dies geschieht mit Hilfe der Script Sprache nPage Script.
Zur Demoseite : Dropdown-CSS3-Only nPage Script

 

Copyright: Skywalk-Webdesign.de 2014