Eine von mir erstellte Webseite verwendet ein auf CSS basierendes responsives Menü, welches auf mobilen Geräten auf eine Zeilenweise Darstellung der Menüpunkte wechselt. Das klappte bei der Entwicklung gut – die Untermenüs wurden auf meinem Smartphone und in der Entwickleransicht unter Chrom wie gewünscht beim Anklicken ausgeklappt. Dazu wird das Hovern in CSS verwendet. Allerdings gab es dann Meldungen, dass die Seite auf einem IPhone nicht richtig funktioniert – alle Menüpunkte mit Untermenüs funktionierten dort nicht. Dies ist das zweite Mal, dass ich Probleme mit Webseiten auf Geräten der Firma mit dem angebissenen Obst habe. Das erste Mal betraf übrigens ein Teil einer Webseite mit WebGL – lief nur unter Windows, Android und Linux.
Wie dem auch sei, ich musste eine Lösung für das CSS – Hover – Problem finden und Google half. Es war ein wenig Javascript nötig um mit möglichst wenig Aufwand das Menü ans Laufen zu kriegen. Hier der Link auf die gefundene Lösung.
In der PHP Datei wird im <head> Bereich die Datei doubletaptogo.min.js eingebunden:
<html> <head> <title>Der Titel</title> <?php $relativeRootPath = EvalRelativeRootPath(); // z.B. ./../ ?> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <meta name="viewport" content="width=device-width"> <!-- sonst funktionieren die Mediaqueries nicht --> <link rel="stylesheet" type="text/css" href="<?php echo $relativeRootPath?>www/styles/main.css" /> <script src="<?php echo $relativeRootPath; ?>external/jquery-1.10.2.js"></script> <script src="<?php echo $relativeRootPath; ?>external/jquery-ui-1.10.4.custom.js"></script> <script src="<?php echo $relativeRootPath; ?>www/js/modernizr.custom.17475.js"></script> <script src="<?php echo $relativeRootPath; ?>www/js/doubletaptogo.min.js"></script>
An geeigneter Stelle wird dann in der JQuery ready Funktion die Zeile mit doubleTapToGo() eingefügt. Die Funktion wird für die li ausgeführt, die zu dem Div mit der Id HMenuL1 gehören – wenn die li weitere ul’s haben:
<script type="text/javascript">
$(document).ready(function() {
// Problem Navigation Responsive auf Iphone beheben
$( '#HmenuL1 li:has(ul)' ).doubleTapToGo();
Da ich kein I-Gerät besitze, musste ich meinen Schwiegervater mal kurz nach seinem IPhone fragen. Das Menü funktionierte nun zumindest auf seinem Gerät.