Menú Jquery/CSS desplegable que no responde en iPad/iPhone

Question

He estado diseñando y codificando mi sitio web y el sencillo menú desplegable no funciona al visualizar el sitio en un iPad o iPhone.

He buscado e intentado implementar algunas de las soluciones que están en línea, es decir, fragmentos de jquery que reconocen cuándo el usuario está utilizando un tipo particular de dispositivo, pero fue en vano. No estoy seguro de si es debido a que estos métodos están en desuso o porque lo estoy haciendo mal (probablemente el último)

La página web en cuestión es http://www.sotomayormac.com

el elemento de menú superior: "Nuestro pensamiento" cae a un submenú a través de un enlace href = #. Esto se resalta (a: hover) cuando se toca en un iPad/iPhone, pero no aparece ningún submenú. Estoy bastante seguro de que esta es una parte clave del problema.

código html para el menú es el siguiente:

<!-- Start of MENU --> 
<ul id="ddmenu"> 
<li><a id="topLink" href="#">Our thinking</a> 
<ul> 
    <li><a href="index.html">Showcase</a></li> 
    <li><a href="about.html">About us</a></li> 
    <li><a href="contact.html">Contact</a></li> 
</ul> 
</li> 

el CSS correspondiente:

#ddmenu { 
background: #fff no no-repeat; 
margin-left:50px; 
padding: 0; 
height:43px; 
width:200px; 
} 

#ddmenu li { 
float: left; 
list-style: none; 
margin-left:0px; 
} 

#ddmenu li a { 
background:#fff; 
display: block; 
padding: 0px 0px; 
text-decoration: none; 
width: 70px; 
color:#000; 
white-space: nowrap; 
text-align:left; 
} 

#ddmenu li a:hover { 
background: #fff; 
color:#666; 
} 

#ddmenu li ul { 
margin: 10px 0 0 0px; 
padding: 0; 
position: absolute; 
visibility: hidden; 
width:600px; 
} 

#ddmenu li ul li { 
display:inline; 
} 

#ddmenu li ul li a { 
width: auto; 
background: #fff right no-repeat; 
display: inline; 
color: #000; 
padding-right:10px; 
} 

#ddmenu li ul li a:hover { 
background: #fff no-repeat; 
color:#666; 
} 

y jQuery:

// <![CDATA[ 
var timeout = 500; 
var closetimer = 500; 
var ddmenuitem = 0; 

function ddmenu_open(){ 
    ddmenu_canceltimer(); 
     ddmenu_close(); 
     ddmenuitem = $(this).find('ul').css('visibility', 'visible'); 
} 

function ddmenu_close(){ 
    if(ddmenuitem) ddmenuitem.css('visibility', 'hidden'); 
} 

function ddmenu_timer(){ 
    closetimer = window.setTimeout(ddmenu_close, timeout); 
} 

function ddmenu_canceltimer(){ 
    if(closetimer){ 
     window.clearTimeout(closetimer); 
      closetimer = null; 
}} 

$(document).ready(function(){ 
    $('#ddmenu > li').bind('mouseover', ddmenu_open) 
    $('#ddmenu > li').bind('mouseout', ddmenu_timer) 
}); 

document.onclick = ddmenu_close; 
// ]]> 

Creo que eso es todo. Soy novato en este tipo de cosas, por lo que cualquier ayuda sería muy apreciada. ¡Probablemente me está mirando directamente a la cara, pero no puedo entenderlo!

Saludos

TODO el JScript:

$(document).ready(function() { 

}); 
$("#slideshow").css("overflow", "hidden"); 

$("ul#slides").cycle({ 
fx: 'fade', 
speed: 2000, 
timeout: 8000, 
pause: true, 
prev: '#prev', 
next: '#next', 
after:  onAfter 
}); 

function onAfter(curr,next,opts) { 
var caption =(opts.currSlide + 1) + '/' + opts.slideCount; 
$('#caption').html(caption); 
} 

$(".button").hover(function() { 
    $(this).attr("src","socialnetworks_hover_03.gif"); 
     }, function() { 
    $(this).attr("src","socialnetworks_05.gif"); 
}); 

// <![CDATA[ 
var timeout = 500; 
var closetimer = 500; 
var ddmenuitem = 0; 

function ddmenu_open(){ 
    ddmenu_canceltimer(); 
     ddmenu_close(); 
     ddmenuitem = $(this).find('ul').css('visibility', 'visible'); 
} 

function ddmenu_close(){ 
    if(ddmenuitem) ddmenuitem.css('visibility', 'hidden'); 
} 

function ddmenu_timer(){ 
    closetimer = window.setTimeout(ddmenu_close, timeout); 
} 

function ddmenu_canceltimer(){ 
    if(closetimer){ 
     window.clearTimeout(closetimer); 
      closetimer = null; 
}} 

var toggle_clicked = false; 
function ddmenu_toggle(){ 
if(toggle_clicked) { 
    toggle_clicked = false; 
    ddmenu_timer(); 
} else { 
    toggle_clicked = true; 
    ddmenu_open(); 
} 
} 

$(document).ready(function(){ 
if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) ||    (navigator.userAgent.match(/iPad/i))) { 
    $('#ddmenu > li').bind('click', ddmenu_toggle); 
} else { 
    $('#ddmenu > li').bind('mouseover', ddmenu_open); 
    $('#ddmenu > li').bind('mouseout', ddmenu_timer); 
} 
}); 

document.onclick = ddmenu_close; 
// ]]> 

Answer 1

iPad/iPhone no soporta mouseover, mouseout eventos.

Tiene que usar el evento click o touchstart, touchend para navegadores móviles con soporte para pantalla táctil.

Por ejemplo para iPad/iPhone dispositivo de escritura $('#ddmenu > li').bind('click', ddmenu_open) en lugar de $('#ddmenu > li').bind('mouseover', ddmenu_open)

ACTUALIZACIÓN:

Cambie su código:

$(document).ready(function(){ 
    $('#ddmenu > li').bind('mouseover', ddmenu_open) 
    $('#ddmenu > li').bind('mouseout', ddmenu_timer) 
}); 

a esto:

var toggle_clicked = false; 
function ddmenu_toggle(){ 
    if(toggle_clicked) { 
     toggle_clicked = false; 
     ddmenu_timer(); 
    } else { 
     toggle_clicked = true; 
     ddmenu_open(); 
    } 
} 

$(document).ready(function(){ 
    if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) || (navigator.userAgent.match(/iPad/i))) { 
     $('#ddmenu > li').bind('click', ddmenu_toggle); 
    } else { 
     $('#ddmenu > li').bind('mouseover', ddmenu_open); 
     $('#ddmenu > li').bind('mouseout', ddmenu_timer); 
    } 
}); 

Answer 2

Yo Está utilizando mouseover y mouseout, que no son compatibles con pantallas táctiles.

Consulte la documentación sobre el JavaScript touch events de Apple.

Se puede utilizar así:

document.addEventListener('touchstart', function(e) { 
    // Do sth. 
}, false);