IPhone : faire apparaitre ou disparaitre un menu

Bonsoir,

J'élabore actuellement un menu mobile pour m'entrainer. Il est actuellement sur cette page (édit : il faut resizer votre navigateur, sinon vous ne verrez pas le menu).

Je voudrais que ce menu (.digit) apparaisse ou disparaise en fonction d'un click n'importe où sur le body du site.

Mon problème : ça marche sur mon ordi' de bureau, mais pas sur mon simulateur iPhone (simulateur iOS). Pour ce qui est de l'iPhone en lui-même... je n'en ai point, je suis donc obligé de présumer (j'espère) que le comportement est le même.

Voici mon code jQuery :

$('body').click(function () {/*test*/
if (window.matchMedia("(max-width: 600px)").matches) {
	$('.digit').slideToggle(400);
}
});

Merci pour votre aide éventuelle sur un éclaircissement du problème.
Modifié par Olivier C (28 Jan 2013 - 20:49)

Bonjour olivier,

J'ai le même comportement sur iphone.

Veux-tu d'autres tests?

Merci Rodolphe,

Ça me permet de savoir que le simulateur est à peu près fiable sur ce point.

J'ai peut-être trouvé mon problème : un conflit avec le menu mobil placé en header. Du coup j'ai restrint la surface de mon click en le circoncisant du body aux boites .box, et ça marche.

Par contre, pour ce qui est de son emplacement, alors que mon menu devrait être positionné en bas, il semble que ce soit du grand n'importe quoi. Rodolphe, aurais-tu le menu mobile du bas positionné bizarrement ? (édit : quoi que maintenant ça marche, je n'y comprend rien... peut-être une histoire de cache...).
Modifié par Olivier C (28 Jan 2013 - 21:46)

Olivier C a écrit :
Je voudrais que ce menu (.digit) apparaisse ou disparaise en fonction d'un click n'importe où sur le body du site

En cliquant sur le body le menu ne se rétracte ni sur iphone, ni sur Mac (j'ai le même comportement sur les 2)

Je n'ai pas le menu mobile du bas positionné bizarrement.
Modifié par rodolpheb (28 Jan 2013 - 21:58)

Juste au cas où, étant donné que j'ai modifié le .js : tu as rechargé la page?

Oui et sur iphone lorsque je clique sur le body, il y a un rafraichissement qui s'opère sans modifications sur le menu.

Es-tu sous Mac?

Sous mac et iphone le menu se rétracte lorsque l'on clique sur :

Tout se passe comme si tu avais l'ancienne version du javascript...

Normalement je suis à jour. Je ne me préoccupe pas des versions de Js.

Non. Je voulais dire que le comportement que tu décrit est calqué sur le fichier javascript que j'avais mis en ligne précédemment. Je l'ai écrasé entretemps, c'est pour cela que je te demandais si la page avait bien été resetée par le navigateur de l'iPhone...

J'ai testé sur le 2ème iphone : même comportement.

Et dans cet exemple le script peut peut-être t'aider

Je n'y comprend rien : sur ordi' de bureau et sur simulateur ça marche. Il va encore falloir que je taxe un iPhone à un ami. Il me manque vraiment un iPhone...

Sur ordi ça ne fonctionne pas chez moi.

Je vais tester sur d'autres navigateurs...

Hormis cliquer sur l'image le menu ne se rétracte pas.

Jette un coup d'oeil sur la démo que je t'ai envoyée.

Idem sur Chrome, FF, et saf.
Sur opéra, je n'ai pas regardé mais tu n'as pas dû préfixer car le menu n'apparait pas.

Je viens d'allumer mon pc et c'est la même chose.

Sous chrome (pc) le menu n'apparait pas.

rodolpheb a écrit :
Sur opéra, je n'ai pas regardé mais tu n'as pas dû préfixer car le menu n'apparait pas.

Exact. Alors que sur une ancienne version de mon template ce menu apparait très bien (mais entretemps j'avais fait évoluer la techno). Merci du retour.

Par contre, pour moi, sur Chrome, FF, et Safari ça fonctionne (je suis sous Mac)... Attention : je rappelle que le menu du bas n'apparait que si l'on resize son navigateur (max-width: 600px).
Modifié par Olivier C (28 Jan 2013 - 23:11)