Animiertes responsives Dropdown Menu

Allgemeine Beschreibung

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.

Durchzuführende /durchgeführte Test mit verschiedenen Browsern und Geräten

Desktop-Browser

  • Firefox 29 - vollständig funktionsfähig
  • Google Chrome 35 - vollständig funktionsfähig
  • Internet Explorer 11 - vollständig funktionsfähig
  • Internet Explorer 10 - vollständig funktionsfähig
  • Internet Explorer 9 - funktionsfähig, keine transition-Übergänge
  • Internet Explorer 8- funktionsfähig, keine transition-Übergänge, keine Anpassung an geringere Bildschirmbreite

Mobile Geräte und Emulationen

Diese Tests dienen in erster Linie dem responsiven Verhalten

  • Entwicklertools Desktop Firefox: 320x480, 480x320, 360x640, 640x360, 480x800, 600x800, 768x1024, 1024x768 - alle ok, 800x480, 800x600 - zu breit
  • Firefox Webdevoloper Toolbar - mit Querformat für kleine Tablets (800x600) und Tablethochformat (768x1024) zu breit, sonst ok
  • Genymotion - Samsung Galaxy S3 - 4.3 - API 18 - 720x1280, 240 dpi; useragent:Mozilla/5.0 (Android; Tablet; rv:40.0) Gecko/40.0 Firefox/40.0; width:480; height:853 - Google Adsense Werbung ist zu breit
  • Genymotion - Samsung Galaxy S3 - 4.3 - API 18 - 720x1280, 240 dpi; Android Browser 4.0 - Google Adsense Werbung ist normal

Einsatz mit nPage Script

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.

Zusammenfassung der Merkmale

Drop Down, Vertikal, Flyout, Horizontal, Tabbed, Responsive, jQuery, Accordion, nur CSS, CSS3, CSSMenumaker, CSSDeck