Geschrieben von Christian Schnettelker

Schlagwörter:

Webdesign-Tipps 5: Dropdown

Das Leben könnte so schön sein, wenn es nicht immer irgendjemanden gäbe, der einem garantiert in die Suppe spuckt. Im Layout zweier neuer Kunden setzte ich ursprünglich ein recht praktisches, handliches Dropdown-Menü ein, welches auf allen Geräten, die ich besitze und allen gängigen Auflösungen auch wunderbar funktioniert.

Als Spielverderber stellten sich allerdings im Nachhinein die Geräte der Firma mit dem Apfel heraus; aus mir immer noch nicht ganz erklärlichen Gründen öffnet sich das Dropdown-Menü dort nicht…

Hover

Offizielle Begründung für dieses Verhalten ist, dass es auf Touch-Geräten, im Gegensatz zum Desktop mit Maus, keinen richtigen „Hover“ (Mauszeiger schwebt über einem Element), sondern nur einen „Klick“ gibt.

Klingt zwar einleuchtend, ich frage mich allerdings, warum sämtliche Android-Geräte mit dem fehlenden Hover anscheinend keinerlei Probleme haben; diese verhalten sich exakt so, wie es auch der Desktop mit Maus tut.

Für dieses ärgerliche Problem gibt es im Netz zahlreiche Lösungsvorschläge, meist in Form von Javascript-Routinen und „Modernizern“, funktioniert hat das alles bei mir nicht. Zudem versuche ich, woimmer möglich auf Javascript & Co. zu verzichten und möglichst nur Lösungen in CSS einzusetzen.

Musste mir, mangels eigener Apfelgeräte, dann wohl oder übel vom Kollegen ein iPad zu Testzwecken ausleihen und habe (wieder mal) Stunden mit der Lösung dieser dösigen, mE völlig unnötigen Problematik verbracht.

Letztlich kann ich es mir natürlich nicht leisten, dass meine Seiten auf diesen Geräten nicht korrekt funktionieren, auch wenn ich sie selber aus bereits beschriebenen Gründen nicht nutze.

Drop-Down Navigation: Responsive and Touch-Friendly

Um es kurz zu machen, die bis dato einzige Lösung, die nach meinen Tests überall – also auch auf den störrischen Obstgeräten – funktioniert, ist das CSS-Dropdown-Menü des Letten Osvaldas Valutis, siehe

http://osvaldas.info/drop-down-navigation-responsive-and-touch-friendly

Vielen Dank an dieser Stelle dem Autor für die Bereitstellung des Codes. Demnächst werde ich in meinem Blog die zwei neuen Seiten vorstellen, in denen ich diese Lösung in angepasster Form einsetze. Allerdings, als Vorwarnung an alle, die diesen CSS-Code ebenfalls nutzen möchten; selbiger ist nicht unbedingt trivial. Bei Syntax-Konstruktionen wie

#nav li ul li a:hover,
 #nav li ul:not( :hover ) li.active a
 { color:#FFF; background-color:rgb(150,0,0);
 }

geraten die grauen Matratzen ganz schön ins Rotieren. Natürlich konnte ich nicht alle hunderttausend CSS-Dropdown-Menüs, welche im Internet angeboten werden, ausprobieren; falls Sie also eine noch bessere, einfachere Lösung kennen, wäre ich interessiert, von Ihnen zu hören.

Kommentare

Kommentare

Kommentar schreiben

Allgemeiner Hinweis: Bitte kommentieren Sie zum Thema unter Vermeidung von Allgemeinplätzen. Eine gute Rechtschreibung sollte selbstverständlich sein.

Hinweis für SEO-Kommentarschreiber: alle Links sind nofollow und steigern Eure Linkpopularität nicht. Offensichtliche SEO-Kommentare werden nicht oder in anonymisierter Form veröffentlicht.