Antworten: 0
Seite [1] |
|
 reVerBGeekboy Beiträge: 1237 |
# Thema - 09.06.2012 um 19:50 Uhr
Im Zuge meines Mobile Webstyle-Guides, den ich aktuelll verfasse habe ich für das Kapitel Navigationskonzepte überlegt, wie man ein Dropdown realisieren kann, da der Viewport für eine Navigation echt beschränkt ist. Über Hover fällt ja raus, da keine Maus vorhanden ist. Ich habe jetzt 4 Stunden rumgespielt und habe ein Ergebnis bekommen, das sehr gut funktioniert. Ich wollte das jetzt hier einmal präsentieren. Da ein Touchscreen-Gerät wie ein Smartphone keine Maus bietet, um ein dauerhaftes Hover-Event auszulösen, muss in CSS eine andere Art gefunden werden, ein Dropdown zu realisieren. Die Lösung ist es, Focus anstatt Hover zu verwenden. nur wie verschachtelt man nun das ganze? Zuerst erstellen wir mal eine einfache Navigationsleiste. ich habe absichtlich auf eine Liste verzichtet, um den Code etwas knapper zu halten: HTML-Code  <div id="navigation"> <a href="#">Menü1</a> <div class="menu"> <a href="#">Link</a> <a href="#">Link</a> <a href="#">Link</a> </div> <a href="#">Menü2</a> <div class="menu"> <a href="#">Link</a> <a href="#">Link</a> <a href="#">Link</a> </div> <a href="#">Menü2</a> <div class="menu"> <a href="#">Link</a> <a href="#">Link</a> <a href="#">Link</a> </div> <a href="#">Menü4</a> <div class="menu"> <a href="#">Link</a> <a href="#">Link</a> <a href="#">Link</a> </div> </div> Jetzt kommen wir zum CSS-Code. Die Menü-Container werden Standard ausgeblendet über display: none;. Beim setzen des Focus auf einen Menü-Button soll es wieder eingeblendet werden. Dabei hilft das Plus als Verknüpfungsoperator im Selektor. Das Plus verknüpft das nächste .menu-Element anstatt eines Kindelementes des Links. Wichtig ist es aber auch, das der Container auch wenn Hover nicht funktioniert bei einem Hover eingeblendet bleibt. Der Hintergrund ist, das beim verlieren des Fokusses das Menü zuklappt, bevor der Klick auf den Link registriert und die Weiterleitung ausgeführt wird. Es würde also nur das Menü zugehen, aber keine Weiterleitung auf das neue Ziel erfolgen. Aber jetzt zum CSS-Code: CSS-Code #navigation a { float: left; /* Weitere Formatierungen */ } .menu { display: none; position: absolute; /* Oder relative, wenn man das Menü am Button ausrichten will */ /* Ausblenden des Menüs und weitere Formatierungen */ } #navigation a:focus + .menu { display: block; /* Hier wird das Focus-Toggle ausgelöst */ } .menu:hover { display: block; /* Dieser Teil gewährleistet, das der Druck auf einen Link im Menü auch registriert wird */ } Wenn der Nutzer der Seite jetzt auf einen freien Bereich der Seite tippt, geht das Menü wieder zu, da der Link dabei den Fokus verliert und wieder die Standardformatierung des Menüs greift. Also display: none; wird wieder gesetzt. Das ist jetzt soweit der allgemeine, aber einfache Aufbau. Schwer ist es eigentlich nicht. man muss nur erst einmal darauf kommen. Ich hoffe das kann jemand gebrauchen. Screen, wie das aussehen kann im Anhang. Es ist da nicht das schönste. Aber es soll ja nur zeigen, wie so ein Menü aussehen kann. Es geht auf jeden Fall schöner. Dateianhänge:
 mobile_dropdown.png (122.74 KiB - 117 mal heruntergeladen )Zuletzt editiert von reVerB am 09.06.2012 um 19:52 Uhr (1x Editiert)
|
Inaktiv |
|
Antworten: 0
Seite [1] |
|
| Sie müssen sich registrieren, um zu antworten. |