11548 sujets

JavaScript, DOM et API Web HTML5

Probleme menu en JQuery

Bonjour,
je souhaite réaliser le meme style de menu que celui de http://www.toyota.fr (celui avec les voitures).

Voici ma tentative :
 $(function() {

		function runEffect(){
                $("#MaDIV").show('slide',500,callback);
		};
		
		
                function callback(){
                if($("#MaDIV").mouseenter()){$("#MaDIV").bind("mouseleave",function(){
                               $("#MaDIV:visible").removeAttr('style').hide().fadeOut();}, 5000);}
                     else{
                        {$("#menu-item-54").bind("mouseleave",function(){
                               $("#MaDIV:visible").removeAttr('style').hide().fadeOut();}, 5000);}
                     }
						
		};
		
		
		$("#menu-item-54").mouseenter(function() {
			runEffect();
			return false;
		});
		
		$("#MaDIV").hide();
	});


Quand je passe sur mon lien, la MaDIV s'affiche bien, ensuite quand je vais sur ma MaDIV elle reste afficher et quand je la quitte elle se ferme , jusque l'a tout marche nickel. Le probleme est que si je vais sur le lien et que je le quitte sans passer par MaDIV, MaDIV ne se ferme pas ... Smiley sweatdrop

J'ai l'impression que je rentre jamais dans le else de ma boucle ... une idée?

Je fait appelle au amateur de jQuery , j'ai besoin d'aide Smiley biggrin
Merci d'avance
salutations

je suis pas tout a fait sur de ce que tu veux faire, il semble que onmouseenter ne fait plus partie des evenements (http://www.w3schools.com/tags/ref_eventattributes.asp /lien en anglais mais comprehensible)

pour info sur ton lien c'est fait en flash il semble

en ce qui concerne les mouseover/out/etc, il faut considérer que lorsque la souris passe sur le contenu d'un div(par expl!) on est plus sur le div, c'est un question de couche.
j'ai moi-même cherché longtemps un truc a peu-près identique et trouvé quelque chose qui pourrait aider mais pas en JQuerry:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<!-- saved from url=(0014)about:internet -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

</head>
<style type="text/css">
.boite {display:block;width:50px;border:1px solid black;z-index:1}
.boite a {z-index:1}
</style>
<script type="text/javascript" language="javascript">

CloseNavigator='';//variable qui sert a sauvegarder l'id appelante
function LeaveTheNavigator(p1) {//sert a faire la différence entre si le div est touché ou les liens
if (p1) {//debut
window.setTimeout('CloseTheNavigator()',100);//on maintien ouvert pour avoir le temps de verifier si la souris est hors div ou sur un lien
CloseNavigator=p1;//on sauvegarde l'id pour fermeture ulterieure
}
else {//suite (la c'est un lien qui est touché et plus le div)
window.setTimeout('CloseTheNavigator()',100);//on renvois de nouveau sur la fonction suivante ...
CloseNavigator='';//... et on efface l'id pour faire comprendre a la fonction suivante que l'on a pas quitté la zone du div
}
}
/*
le delais de 100m seconde semble etre un bon compromis pour tout les navigateur
*/
function CloseTheNavigator() {//2ieme fonction qui ferme le div uniquement si on a quitté la zone
if (CloseNavigator) {//fermer que si la variable contien un id
document.getElementById(CloseNavigator).style.display='none';//ferme l'id ...
CloseNavigator='';//...et on vide la variables pour la remettre a zéro jusqu'a l'appel suivant
}
}

</script>
<body>

<div id="test" class="boite" onmouseout="LeaveTheNavigator('test')" onmouseover="LeaveTheNavigator()"><!-- mouseover rajouté pour firefox, j'ai remarqué un truc qui cloche -->
<a href="#" onmouseover="LeaveTheNavigator()">test1</a>
<a href="#" onmouseover="LeaveTheNavigator()">test2</a>
<a href="#" onmouseover="LeaveTheNavigator()">test3</a>
<a href="#" onmouseover="LeaveTheNavigator()">test4</a>
</div>

</body>
</html>

testé sous IE/Firefox/Safari

autres a voir
Modifié par cyber_al (02 Sep 2010 - 02:20)
Merci je vais testé!

J'ai trouve le Js de Toyota.fr

/* homepage showroom */
G.shr={
init:function(){
    var m=this,o=$('nav-sr'),i,p,x,pp,o2,f=parseInt;if(!o)return
    o=$$('a',o);p=m.last=o[o.length-1]
    x=f((770-p.offsetLeft-p.offsetWidth)/o.length)
    pp='8px '+f(x/2)+'px 11px '+f(.5+x/2)+'px'
    for(i=0;i<o.length-1;i++){G.set(o[i],{onmouseover:m.over,onmouseout:m.out,index:i},{padding:pp})}
    x=770-p.offsetLeft-p.offsetWidth;   if(G.ie6)x-=2.9
    p.style.padding='8px '+f(x/2)+'px 11px '+f(x/2)+'px'
    o2=$('cnav-dd');o2.style.zIndex=999;m.dds=o2=$$('li',o2)
    for(i=0;i<o2.length;i++){
        x=o[i].offsetLeft;x=(x<572)?x:572
        G.set(o2[i],{onmouseover:m.subover,onmouseout:m.subout},{left:x+'px'})
    }
},
over:function(){
    var m=G.shr,o=m.dds[this.index]
    if(G.halt)return
    G.stop(m.timer)
    if(m.a)m.a.style.display='none'
    o.style.display='block'
    m.a=o
},
out:function(){var m=G.shr;m.timer=setTimeout(m.stop,250)},
subover:function(){var m=G.shr;G.stop(m.timer)},
subout:function(e){
    var m=G.shr,t,o,q=window.event
    e=e||q
    t=(q)?e.srcElement:e.target
    o=(e.relatedTarget)?e.relatedTarget:e.toElement
    if(o){while(o.parentNode){if(o==m.a)return;o=o.parentNode}}
    m.stop()
},
stop:function(){var m=G.shr;if(m.a)m.a.style.display='none'}
}


J'ai du mal a capter, je souhaiterai le simplifier en jQuery si c'est possible![/i][/i][/i]
Sujet clos
Aller à