Menu qui se déplie. Comment le replier sur un mouseout ?

Bonjour,


Je finalise un menu déroulant pour ce site : www.gigalis.org

Tout se passe bien sauf que si l'utilisateur déplie un menu sans cliquer sur un lien, le menu rester déplié. J'aimerais donc qu'il se replie lorsque la souris de l'utilisateur sort des menus.

Voici mon code actuel (mélangé à du spip ...)

<script type="text/javascript">

$(document).ready(function () {
<BOUCLE_menu_js(RUBRIQUES){titre_mot=menu_haut}>
$('img.menu_head#ID_RUBRIQUE').click(function () {

$('ul.menu_body#ID_RUBRIQUE').slideToggle('medium');

<BOUCLE_menu_autre(RUBRIQUES){titre_mot=menu_haut}{exclus}>

 if ( $('ul.menu_body#ID_RUBRIQUE').is(':visible')) {
                         $('ul.menu_body#ID_RUBRIQUE').slideUp();
                        } 
</BOUCLE_menu_autre>
});
/*$('ul.menu_body#ID_RUBRIQUE li').mouseout(function () {
				$(this).slideUp('medium');

});*/
</BOUCLE_menu_js>


$('ul.menu_body li a').mouseover(function () {

$(this).animate({ fontSize: "14px", paddingLeft: "25px" }, 50 );

});

$('ul.menu_body li a').mouseout(function () {

$(this).animate({ fontSize: "12px", paddingLeft: "15px" }, 50 );

});


});

</script>

Auriez-vous une idée pour me débloquer ?

Cette partie là, en commentaire

/*$('ul.menu_body#ID_RUBRIQUE li').mouseout(function () {
				$(this).slideUp('medium');

});*/

c'est mon dernier test. ca marche pas trop mal mais le menu se replie aussi lorsque le curseur va d'un bouton à un autre .....

Merci d'avance pour votre aide,

à charge de revanche,
Emmanuelle

Normalement pour faire un menu on utilise des listes imbriquées avec en plus un plugin jquery qui va généré tout ça les doigts dans le nez comme superfish.
Modifié par Patidou (21 Apr 2009 - 15:23)

L'emm... de service rappelle à toutes fins utiles que les événements onmouse (over/out/...) ne fonctionnent pas sur écran de mobiles, et plus généralement dans tous les cas où on n'utilise pas de "mouse" (écrans tactiles, nav par Tab, etc.). Merci d'utiliser l'outil universel qu'est le clic (à la souris, d'un coup d'ongle ou de touche Tabulation).

Salut Arsene,

Dans le cas de Superfish ça fonctionne bien avec le doigt sur iphone et avec la touche tabulation également. Je ne sais pas sur ton wiewty.

P.S. : perso j'aime pas trop les menus déroulants mais il faut croire que c'est à la mode vu le nombre de sujets ouverts...
Modifié par Patidou (21 Apr 2009 - 15:56)

Salut,

Sinon, avec ton code, Kalana, tu pourrais essayer un truc du style :

$(document.body).click(function(){
    $('.entree_menu ul').slideUp();
});

En passant, si tu me permets :

1) tes classes menu_head<x> et menu_body<x> ciblent des éléments qui n'apparaissent qu'une seule fois dans la page. J'en ferais bien des id, personnellement (ce qui accélèrerait un peu ton code JS par la même occasion)

2) pour ça :

$('ul.menu_body li a').mouseover(function () {
	$(this).animate({ fontSize: "14px", paddingLeft: "25px" }, 50 );
});

$('ul.menu_body li a').mouseout(function () {
	$(this).animate({ fontSize: "12px", paddingLeft: "15px" }, 50 );
});

...tu n'as absolument pas besoin de JS. En CSS c'est simplement :

.menu_body a:hover {
    font-size:12px;
    padding-left:15px;
}

Modifié par marcv (21 Apr 2009 - 17:08)

Désolé, je viens de me rendre compte que tu veux que le menu se réplie sur mouseout, donc ce serait plutôt :

$('.entree_menu ul').mouseout(function() {
	$(this).slideUp();
});

Patidou a écrit :
Salut Arsene,

Dans le cas de Superfish ça fonctionne bien avec le doigt sur iphone et avec la touche tabulation également. Je ne sais pas sur ton wiewty.

P.S. : perso j'aime pas trop les menus déroulants mais il faut croire que c'est à la mode vu le nombre de sujets ouverts...

Salut Patidou

Ah mais figure-toi que j'iPhone depuis quelques jours (depuis que mon opérateur les distribue)
J'ai regardé Superfish et OK, effectivement quand on clique (pas d'équivalent onmouse évidemment) ça ouvre bien le menu, mais pas moyen de le refermer sans en ouvrir un autre... sur le Viewty je sais pas, faudrait que j'échange les puces pour voir.

(sinon juste pour dire, c'est vrai que l'iPhone est grandiose pour le webviewing mais alors pour le reste c'est franchement très en dessous de mon bon vieux Viewty ;-( ... Nativement pas de radio ni de TV, pas de fonction modem pour le connecter au PC en déplacement, pas de vidéo (Viewty fait du DivX), un pauv'appareil photo en 2Mo (contre 5) ni zoom, pas de pavé d'écriture manuelle (tu sais tu écris à la main et ça traduit en textes), pas MSN, pas moyen de charger des trucs genre Opera mini, pas d'outil de retouche/recadrage photo, pas d'enregistreur numérique, pas moyen de rajouter des cartes mémoire pour loader des trucs dans un sens ou dans un autre, connexion web permanente (t'as pas intérêt à l'oublier si tu pars à l'étranger), etc etc. En tant qu'Apple fan des premiers jours je suis un peu déçu du truc... me demande moyennement si je vais le garder.)

Merci pour vos réponses et j'entend très bien le discours sur le 'one click only' et les questions d'accessibilité sous-jacente. Je ne manquerais pas de l'intégrer à l'avenir à la réflexion.

Merci encore,
je teste le code demain matin !
Emmanuelle

(pour Arsene)

Alors toujours dans le hors-sujet :
* pour la radio j'utilise allradio (c'est via le net, attention au forfait data)
* pour la tv, en Belgique aucun des opérateurs ne propose une appli comme en France, je me rabat sur France 24 qui fonctionne partout.
* la fonction modem serait dispo dans la version 3 du système mais serait activée ou non suivant que l'opérateur soit d'accord
* pour la vidéo ça fait un moment que j'encode tout en mp4 (h.264 plus léger et de meilleure qualité) et que je synchronise via itunes. J'utilise handbrake quand je veux emporter un dvd dans l'iphone.
* c'est clair qu'il y a des progrès à faire au niveau de l'appareil photo (un flash serait aussi bienvenu), mais bon quand la lumière est suffisante les photos ne sont pas dégeux, de plus elles sont géotaggées.
* pour l'écriture manuelle c'est possible mais seulement avec les langues asiatiques, mais bon, le clavier est suffisament confortable et sera dispo au format paysage dans toutes les applications avec l'OS3
* pas de msn c'est vrai mais meebo devrait sortir une application de chat multiprotocole, et puis il ne faut pas oublier skype, fring : msn, voip (free et autre), etc…
* pour retoucher les photos il y a pas mal d'applications qui sont sorties dernièrement
* enregistreur numérque? du son? il y a aussi des applications dispo, j'ai un programme qui s'appelle YouNote qui permet de prendre des notes vocales, écrites, photographiques
* pour télécharger des trucs, il y a aussi des programmes de partage de fichier (en wifi)
* la connexion web est désactivée automatiquement quand tu es l'étranger, sauf si tu as modifié le réglage

Bref pour moi la grande force de l'iphone, outre la simplicité et la convivialité c'est l'appStore, des milliers d'applications, beaucoup gratuites ou alors ne coutant que quelques centimes. On trouve tout ce qu'on veut, parfois les plus farfelues. Voici ma liste si ça t'intéresse :

allRadio (radios)
eBay Mobile
Facebook
FRANCE 24 LIVE
A Free Level (un niveau à bulle, très précis!!)
fring (voip, chat, etc)
Google Earth
LifeCast (pour blogguer)
Lightsaber Unleashed (juste pour le fun)
NetNewsWire (lecteur de flux rss synchro avec la version mac)
Pangea VR (lecteur de pano VR)
Remote (pilotage de itunes à distance)
Shazam (reconnaissance de musique)
Skype
Stanza (lecteur de ebook)
Things (choses à faire)
Twitterrific (pour twitter)
VeryTV (programmes télé)
WordPress (marche pas avec DC)
YouNote (prise de note)

Une des choses qui me sert énormément (mais j'étais déjà abonné avant) c'est mobileme. Google propose en beta ce même genre de service.

Je suis fan.

P.S. : et il ne faut pas oublier l'arrivée imminente de iPhone OS 3, qui sera gratuit pour les possesseurs d'iPhone.
Modifié par Patidou (21 Apr 2009 - 23:58)