Appel fonction menu

Version imprimable

Appel fonction menu

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 :

Code:

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>

avec menu.php:

Code:

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&eacute;minaire">s&eacute;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&egrave;s">acc&egrave;s</a></li>  
 
    </ul>
  <div id="slide"><!-- --></div>

et ensuite, la css:

Code:

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}

et la fonction:

Code:

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)}
}};}();

Voila. Je n'arrive pas a trouver la solution. La barre se situe grace à la div "centrage"...

Cordialement,

Ctesias.

19/01/2012, 10h12
Ctesias

J'ai réussi à résoudre mon premier problème de la barre qui prend toute la page. Mais le problème maintenant, c'est quelle est située sous la div "centrage" et non sous la div "menu"... :(
19/01/2012, 10h28
Rachel

bonjour :)
un problème : tu as deux fois l'id menu. donne un id différent à ta liste, et applique la barre soit à la div, soit à la liste

euh.. C'est a dire? faire cela?

Code:

1
2
3
4
5
6
7
8
9
     <ul id="menuliste">
        <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&eacute;minaire">s&eacute;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&egrave;s">acc&egrave;s</a></li>  
 
    </ul>

et dans la css:

Code:

1
2
.menuliste ul {list-style:none; z-index:10; position:absolute; z-index:100; padding:9px 5px}
.menuliste li {float:left}

19/01/2012, 10h34
Rachel

oui, et dans ta fonction javascript de slider, il faut que tu cibles le menuliste

Code:

menuSlider.init('menuliste','slide')
19/01/2012, 10h50
Ctesias

J'ai beau faire ca et avoir essayé un grand nombre de combinaison possible. La barre reste au meme endroit, c'est a dire sous la div centrage :(

Hop hop hop!
J'ai reussi :)

La solution: Menu.php

Code:

1
2
3
4
5
6
7
8
9
10
11
12
<div class="menuliste">
     <ul id="menuliste">
        <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="newsletter.php" title="Partie Restaurant">restaurant</a></li>
        <li value="1"><a href="contact2.php" title="Partie S&eacute;minaire">s&eacute;minaire</a></li>
        <li ><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&egrave;s">acc&egrave;s</a></li>  
	 <div id="slide"></div></ul>
 
</div>

Il fallait en faite mettre la div slide juste avant la fin du ul :)

Merci a toi en tous cas :)