Appel fonction menu [Résolu]

Ctesias · 19/01/2012, 10h08

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 :

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>

avec menu.php:

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&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 :

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}

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
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.

Ctesias · 19/01/2012, 10h12

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"...

rotrevrep · 19/01/2012, 10h28

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

Ctesias · 19/01/2012, 10h32

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

rotrevrep · 19/01/2012, 10h34

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

menuSlider.init('menuliste','slide')

Ctesias · 19/01/2012, 10h50

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

Ctesias · 19/01/2012, 10h54

Hop hop hop!
J'ai reussi

La solution: Menu.php

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

19/01/2012, 10h28	#3
rotrevrep Membre Expert yannick inizan Secrétaire d'état à la procrastination Inscription : février 2011 Messages : 304 Détails du profil Informations personnelles : Nom : yannick inizan Âge : 25 Localisation : France, Cher (Centre) Informations professionnelles : Activité : Secrétaire d'état à la procrastination Secteur : High Tech - Multimédia et Internet Informations forums : Inscription : février 2011 Messages : 304 Points : 1 118 Points : 1 118	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 __________________ (marquer un post résolu si vous êtes satisfait de la réponse ) le chat caramail de retour ? :/ http://www.tchats.net/beta.php les projets web en cours sont sur : https://github.com/rotrevrep
	00

19/01/2012, 10h34	#5
rotrevrep Membre Expert yannick inizan Secrétaire d'état à la procrastination Inscription : février 2011 Messages : 304 Détails du profil Informations personnelles : Nom : yannick inizan Âge : 25 Localisation : France, Cher (Centre) Informations professionnelles : Activité : Secrétaire d'état à la procrastination Secteur : High Tech - Multimédia et Internet Informations forums : Inscription : février 2011 Messages : 304 Points : 1 118 Points : 1 118	oui, et dans ta fonction javascript de slider, il faut que tu cibles le menuliste Code : Sélectionner tout - Visualiser dans une fenêtre à part menuSlider.init('menuliste','slide') __________________ (marquer un post résolu si vous êtes satisfait de la réponse ) le chat caramail de retour ? :/ http://www.tchats.net/beta.php les projets web en cours sont sur : https://github.com/rotrevrep
	00

19/01/2012, 10h12	#2
Ctesias Nouveau Membre du Club Inscription : janvier 2012 Messages : 64 Détails du profil Informations forums : Inscription : janvier 2012 Messages : 64 Points : 25 Points : 25	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"...
	10

19/01/2012, 10h50	#6
Ctesias Nouveau Membre du Club Inscription : janvier 2012 Messages : 64 Détails du profil Informations forums : Inscription : janvier 2012 Messages : 64 Points : 25 Points : 25	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
	10

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email