Ausklappnavigation auf touch-basierten Mobilgeräten
Nicht nur bei umfangreichen Webseiten hat es sich eingebürgert, Unterseiten über sogenannte Ausklappmenüs direkt erreichbar zu machen. So wirkt die Navigation aufgeräumt, die thematische Zuordnung der Inhalte ist direkt ersichtlich und der Benutzer gelangt schnell und unkompliziert an die Inhalte seiner Wahl.
Auf Desktopsystemen, welche ja in der Regel mit Maus und Tastatur bedient werden, erschließt sich das Bedienkonzept intuitiv: fährt der Benutzer mit dem Mauscursor über einen Hauptnavigationspunkt, faltet sich automatisch ohne weiteres Zutun die Unternavigation mit allen zugeordneten Unterseiten unterhalb dem entsprechenden Text/Link auf.
Doch wie verhält sich diese Art Navigation auf Geräten, welche bauartbedingt nicht über ein sogenanntes “externes Zeigegerät” verfügen, sondern mit einem echten externen Zeigegerät wie dem eigenen Finger oder einem Touch-Stift bedient werden?
Keine Mäuse
Der Benutzer eines Tablets erwartet, dass das Bedienkonzept einfach, inuitiv und sicher im Sinne von Bedienfehlern ist. Daher dürfte der erste Gedanke also sein, den gewünschten Navigationspunkt einfach anzutippen.
Ohne weitere Anpassung der via CSS realisierten Ausklappmechanik geschieht nun folgendes:
Auf Apples iPad klappen die Unterseiten einfach auf wie auch bei Mausbedienung auf einem Desktoprechner, der Benutzer kann die gewünschte Unterseite durch Antippen eines der angezeigten Einträge wählen.
Tablets, die auf Google’s Android-Betriebssystem basieren (also zum Beispiel die Samsung Galaxy-Geräte), versuchen jedoch, unmittelbar den Link der Hauptnavigation, der solchen Ausklappmechaniken meist zugrunde liegt, zu öffnen. Dass dabei kurz die Unterseiten erscheinen, spielt dann keine Rolle mehr, da der Benutzer bereits unwillentlich unterwegs zur nächsten Seite ist.
Ein Verhalten für viele
Um das zu verhindern und auf den verschiedenen Plattformen einheitliche Bedienkonzepte zu etablieren ist etwas Programmierarbeit nötig.
JavaScript/jQuery
trilobit.initNaviFoldouts = function() {
jQuery('#header nav ul.level_1 > li.submenu > *:first-child')
.each( function() {
jQuery(this)
.click( function() {
if ( jQuery(this).parent().hasClass('hover')
|| jQuery('body').hasClass('ios')
) {
return true;
}
else {
jQuery(this)
.parent()
.addClass('hover')
;
return false;
}
}
})
;
})
;
jQuery('#wrapper')
.click( function() {
jQuery('nav .hover')
.removeClass('hover')
;
})
;
};
jQuery(document).ready(function() {
if (isMobileBrowser())
trilobit.initNaviFoldouts();
}
});Wer berührt mich?
Die Funktion fängt den Click- bzw. Touch-Event auf den Navigationsbereich ab und führt eine Prüfung durch, ob es sich um ein iOS-Gerät handelt oder ob der geklickte Navigationspunkt bereits ausgeklappt ist. Ist dies der Fall, so wird das Ziel des Links aufgerufen. Im anderen Fall wird die Hilfsklasse “hover” auf das geklickte Element gesetzt, die für das Einblenden via CSS erforderlich ist.
Dieses Ein-/Ausblenden erfolgt dann durch CSS optimalerweise nur für Geräte, für welche das auch relevant ist.
CSS
@media only screen
and (min-width : 768px)
and (max-width : 1024px) {
li.submenu ul.level_2 {
display: none;
}
li.submenu.hover ul.level_2 {
display: block;
}
}Aufs Tablet
Contao, das CMS, das wir am liebsten einsetzen, übernimmt dankenswerterweise bereits die Prüfung des verwendeten Browsers/Systems und belegt das body-Element mit entsprechenden Klassen, so dass im Javascript die Detektionsmerkmale zur Verfügung stehen.
Die Initialisierung der Funktion wird idealerweise nur durchgeführt, wenn es sich um ein mobiles Gerät handelt. Ob man sich dabei auf die von Contao bereits gesetzten body-Klassen verlässt, oder eleganter über “Featuredetection”, also ein Knüpfen an tatsächlich beherrschte Funktionen des Browsers, steuert, wird im Einzelfall der Anwendung zu entscheiden sein.
So steht mit Contao als bewährter CMS-Basis mit integriertem Responsive-Ansatz und mit dem "Gewusst wie!" der Entwickler die Webseite nicht nur dem Maus-zeigenden Desktop-Anwender, sondern auch der immer größer werdenden Gemeinde der Tablet- und Smartphone-Nutzer zuverlässig zur Verfügung.