Suivez les fils RSS
 
Rechercher dans le sujet :
Forum
» JavaScript, DOM et API Web HTML5
» Probleme menu en JQuery
Auteur
Dev2
# 02 Sep 2010 - 00:47:00
Citer
2 Posts
 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 ... 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 biggrin
Merci d'avance
^
cyber_al
# 02 Sep 2010 - 02:16:30
Citer
1 Posts
 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)
^
Dev2
# 02 Sep 2010 - 02:39:57
Citer
2 Posts
 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,{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]
^
Le sujet est clos.
Aller à