Bonjour,
Alors voila mon problème que je n'arrive pas a résoudre. J'ai en faite une animation Javascript sur mon menu. C'est une barre qui bouge suivant le curseur.
Le problème est que lors de l'appel de mon script (dans le body), il ne se place pas sur mon menu, mais sur ma page entiere...
Voila le code :
avec menu.php:
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35 <link href="css/page_accueil.css" rel="stylesheet" type="text/css" /> <link href="css/general.css" rel="stylesheet" type="text/css" /> <link href="css/style.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" language="javascript" src="script.js"></script> </head> <title>Document sans titre</title> </head> <body onload="menuSlider.init('menu','slide');"> <div id="centrage" style="position: relative; margin-top: auto; margin-bottom:auto; margin-left:auto; margin-right:auto; width: 955px;"> <div id="menu" > <?php include("menu.php"); ?> </div> <div id="entete"> Entete <div id="logo"> </div> </div> <div id="conteneur"> Conteneur </div> <div id="footer"> Footer </div> </div> </div> </body> </html>
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10 <ul id="menu"> <li><a href="realisations.php" title="Partie Hôtel">hôtel</a></li> <li><a href="recrutement.php" title="Partie chambres">chambres</a></li> <li><a href="contact2.php" title="Partie Séminaire">séminaire</a></li> <li value="1"><a href="index.php" title="Partie Liens">liens</a></li> <li><a href="index.php" title="Partie Contact">contact</a></li> <li><a href="index.php" title="Partie Accès">accès</a></li> </ul> <div id="slide"><!-- --></div>
et ensuite, la css:
et la fonction:
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25 }#menu{ min-height:53px; width:955px; background-image: url(../images/fondmenu32bit.png); background-color: #FFF; background-repeat:no-repeat; color:#000; font-family: Arial, Helvetica, sans-serif; } #menu a{ color: #000; padding:8px; padding-top:15px; display:block; float:left; width:120px; text-align:center; } .menu ul {list-style:none; z-index:10; position:absolute; z-index:100; padding:9px 5px} .menu li {float:left} .menu a, .menu a:active, .menu a:visited {text-decoration:none; color:#000; padding:10px} .menu a:hover {color:#ebf0e6}
Voila. Je n'arrive pas a trouver la solution. La barre se situe grace à la div "centrage"...
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24 var menuSlider=function(){ var m,e,g,s,q,i; e=[]; q=8; i=8; return{ init:function(j,k){ m=document.getElementById(j); e=m.getElementsByTagName('li'); var i,l,w,p; i=0; l=e.length; for(i;i<l;i++){ var c,v; c=e[i]; v=c.value; if(v==1){s=c; w=c.offsetWidth; p=c.offsetLeft} c.onmouseover=function(){menuSlider.mo(this)}; c.onmouseout=function(){menuSlider.mo(s)}; } g=document.getElementById(k); g.style.width=w+'px'; g.style.left=p+'px'; }, mo:function(d){ clearInterval(m.tm); var el,ew; el=parseInt(d.offsetLeft); ew=parseInt(d.offsetWidth); m.tm=setInterval(function(){menuSlider.mv(el,ew)},i); }, mv:function(el,ew){ var l,w; l=parseInt(g.offsetLeft); w=parseInt(g.offsetWidth); if(l!=el||w!=ew){ if(l!=el){var ld,lr,li; ld=(l>el)?-1:1; lr=Math.abs(el-l); li=(lr<q)?ld*lr:ld*q; g.style.left=(l+li)+'px'} if(w!=ew){var wd,wr,wi; wd=(w>ew)?-1:1; wr=Math.abs(ew-w); wi=(wr<q)?wd*wr:wd*q; g.style.width=(w+wi)+'px'} }else{clearInterval(m.tm)} }};}();
Cordialement,
Ctesias.
Partager