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
-
- 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
-
- 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
-
- 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
-
- 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
-
- 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
-
- 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
-
- 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