Dropdown-CSS3-Only Demo 1

Allgemeine Beschreibung

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.

Zu dieser Navigationsleiste gibt es auch eine Variante mit automatischer Erstellung der einzelnen Navigationspunkte Dropdown-CSS3-Only nPage Script Demo 1.

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

Desktop-Browser

  • Firefox 29 und neuer - vollständig funktionsfähig
  • Google Chrome35 und neuer - vollständig funktionsfähig
  • Internet Explorer 11- vollständig funktionsfähig
  • Internet Explorer 10- vollständig funktionsfähig
  • Internet Explorer 9 - funktionsfähig, keine keyframe-Animation beim Aufklappen der Untermenüs
  • Internet Explorer 8 - nicht funktionsfähig

Mobile Geräte und Emulationen

Das Design ist nicht responsiv, die Test dienen daher auch nur der Überprüfung der Funktionsfähigkeit der Navigation.

  • Entwicklertools Desktop Firefox:
  • Firefox Webdevoloper Toolbar:
  • Genymotion - Samsung Galaxy S3 - 4.3 - API 18 - 720x1280, 240 dpi; Firefox  - Navigation vollständig funktionsfähig
  • Genymotion - Samsung Galaxy S3 - 4.3 - API 18 - 720x1280, 240 dpi; Android Browser 4.0 - Navigation funktioniert nicht
  • Genymotion - Samsung Galaxy S2 - 4.1.1 - API 16 - 480x800, 240 dpi; Firefox  - Navigation vollständig funktionsfähig
  • Genymotion - Samsung Galaxy S2 - 4.1.1 - API 16 - 480x800, 240 dpi; Android Browser 4.0 - Navigation funktioniert nicht
  • Samsung Galaxy S3 - Firefox  - Navigation vollständig funktionsfähig
  • Samsung Galaxy S3 - Android Browser 4.0 - Navigation funktioniert nicht (nur Direktlinks ohne Untermenüs)
  • Samsung Galaxy S3 - Chrome  - Navigation vollständig funktionsfähig

Zusammenfassung der Merkmale

Relevant

Drop Down, Vertikal, Accordion, nur CSS, CSS3, CSSDeck

Nicht relevant

Drop Down,  Flyout, Horizontal, Tabbed, Responsive, jQuery, CSSMenumaker

Neuer Link