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