Layer-Navigationen mit IE 10+ auf Touch-Geräten nutzen

08. Aug 2013

Layer-Navigationen, die über CSS-Hover Effekte umgesetzt sind, können mit dem IE 10+ und Touch-Bedienung nur nach einer Anpassung genutzt werden. Der Artikel zeigt, wie Sie bestehende Weblication Projekte einfach nachrüsten.

Layer-Navigationen, die über CSS-Hover Effekte umgesetzt sind, können mit dem IE 10+ und Touch-Bedienung nur nach einer Anpassung genutzt werden. Der Artikel zeigt, wie Sie bestehende Weblication Projekte einfach nachrüsten.

Während der Safari unter IOS in der Lage ist, Layer-Navigationen über CSS-Hover zu öffnen, müssen beim Einsatz des IE unter Windows 8 ein paar Anpassungen über jQuery durchgeführt werden, um zu verhindern, dass die Layer beim Überfahren wieder geschlossen werden.

Zuerst müssen die standardmäßigen Touch-Events deaktiviert werden. Über jQuery wird dazu innerhalb der Hauptnavigation die CSS-Eigenschaft -ms-touch-action, welche ursprünglich auf auto steht mit none überschrieben. Diese Anpassung verhindert nun das Schließen der Hover-Layer beim Überfahren. 

Der Besucher kann jetzt mit dem Finger zum gewünschten Navigationspunkt fahren und diesen dort loslassen. Über das per jQuery ergänzte mouseup-Event gelangt er dann zur URL, die im jeweiligen Link hinterlegt ist.

Ergänzendes JavaScript, um Layer-Navigation über Touch-Events zu nutzen

if(jQuery('#navigationMain').css('msTouchAction')){
jQuery('#navigationMain').css('msTouchAction', 'none');
jQuery('#navigationMain ul ul a').each(function(){
jQuery(this).bind('mouseup', function(){
wOpenURL(jQuery(this).attr('href'), jQuery(this).attr('target'));
});
});
}