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. Dies kann man ausprobieren, in dem man das Browserfenster verkleinert. Das Umschalten auf einen kleineren Bildschirmmodus, dass mit einer sogenannten media-Query in der CSS-Datei erfolgt, geschieht bei einer Bildschirmbreite von etwa 770px. Die macht sich auch daran bemerkbar, dass die Hintergrundfarbe im Hauptinhaltsbereich heller wird. Auch die Darstellung der Links im Fussbereich ist bei kleineren Monitoren verändert.
Die CSS-Festlegungen enthalten zwar einige wenige CSS3-Anweisungen, diese sind aber für die Funktionsfähigkeit der Navigationsleiste ohne Bedeutung.
Diese Tests dienen in erster Linie dem responsiven Verhalten
Auf dieser Seite verwende ich die animierte responsive Navigation mit festen Dummy-Links. Man kann die Navigation aber natürlich auch automatisch mit Hilfe von nPage Script erstellen lassen. Das demonstriere ich auf dieser Seite.