Menu a discesa Jquery/CSS non risponde su iPad/iPhone

Question

Ho progettato e codificato il mio sito Web e il semplice menu a discesa non funziona quando si visualizza il sito su un iPad o iPhone.

Mi sono guardato attorno e ho cercato di implementare alcune delle soluzioni che sono online, cioè frammenti jquery che riconoscono quando l'utente sta usando un particolare tipo di dispositivo, ma senza successo. Non sono sicuro se il suo perché questi metodi sono obsoleti o perché sto facendo male (probabilmente il secondo)

Il sito in questione è http://www.sotomayormac.com

la voce di menu in alto: "Il nostro pensiero" scende in un sottomenu tramite un link href = #. Questo viene evidenziato (a: hover) quando viene toccato su un iPad/iPhone, ma non appare alcun sottomenu. Sono abbastanza sicuro che questa sia una parte fondamentale del problema.

codice html per il menu è la seguente:

<!-- 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> 

CSS corrispondente:

#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; 
} 

e 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; 
// ]]> 

Penso che questo sia tutto. Sono un noob su questo genere di cose quindi qualsiasi aiuto sarebbe molto apprezzato. Probabilmente mi sta fissando in faccia, ma non riesco a capirlo!

Acclamazioni

TUTTO il 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 non supporta mouseover, mouseout eventi.

È necessario utilizzare l'eventoo touchstart, touchend per i browser mobili con supporto touchscreen.

Ad esempio per iPad/iPhone dispositivo di scrittura $('#ddmenu > li').bind('click', ddmenu_open) invece di $('#ddmenu > li').bind('mouseover', ddmenu_open)

UPDATE:

Sostituire il codice:

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

a questo:

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 stai usando mouseover e mouseout, che non sono supportati su touch screen.

Vedere la documentazione su Apple JavaScript touch events.

Si può usare così:

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