menu déroulant

**Spectoo** · 04/12/2007, 11h25

Bonjour !

voilà je suis débutant en javascript ; voir over débutant ; voir je comprends que le quart du code dont je vais parler ici ...

J'ai en fait inséré un menu déroulant dans un site, seulement voila ; je n'avais besoin que d'un onglet dans tout le menu (celui ci est a l'intérieur de balises <li>)

a force de tests, j'ai réussi a faire en sorte que le titre du menu apparaisse la ou je le souhaitai, seulement, le sous menu lui apparaît en haut a gauche de ma page plutot que sous le menu... (qd j'ai réussi à le faire apparaître en dessous, il a agrandit la case de la barre menu et donc modifié le site complet)

Voici le code que j'utilise :

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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
   1.
      //************ Menu Principal ************//
   2.
      Color0M = '#006699' //Couleur du texte
   3.
      Color1M = '#FFFFFF' //Couleur Arrière
   4.
      Color2M = '#006666' //Couleur Arrière Surbrillance
   5.
      Color3M = '#FFFFFF' //Couleur Bordure ????
   6.
      Color4M = '#006699' //Couleur texte surbrillance
   7.
      PosY = 2 //Distance entre le haut de l'écran et le menu
   8.
      PosZ = 25 //Distance entre le haut de l'écran et le menu
   9.
      LargeurM = 128 //Largeur
  10.
      HauteurM = 15 //Hauteur
  11.
      AlignM = 'left' //'center','right','left'
  12.
      FontM = 'arial' //Police
  13.
      SizeM = 11 //Taille de la Police
  14.
      WeightM = 'bold' //Epaisseur de la Police
  15.
      CursorM = 'default' //Curseur-> default,hand...
  16.
 
  17.
      menu = new Array
  18.
      i=0
  19.
      //--------[Texte/Html]------------------[ Adresse ]--------------------------//
  20.
 
  21.
      menu[i++]='CONTACTEZ VOS ELUS' ;menu[i++]='http://villedemaing.free.fr/INTRANET/SOMMAIRE/CONTACT/INDEX.php'
  22.
 
  23.
      //************ Sous-Menus ************//
  24.
      Color0S = '#FFFFFF' //Couleur du texte
  25.
      Color1S = '#006699' //Couleur Arrière
  26.
      Color2S = '#FFFFFF' //Couleur Arrière Surbrillance
  27.
      Color3S = '#FFFFFF' //Couleur Bordure
  28.
      Color4S = '#006699' //Couleur texte surbrillance
  29.
      EnLigne = 0 //1:pour ranger sur une seule ligne 0:en colonne
  30.
      LargeurS = 150 //Largeur
  31.
      HauteurS = 20 //Hauteur
  32.
      AlignS = 'left' //'center','right','left'
  33.
      FontS = 'arial' //Police
  34.
      SizeS = 12 //Taille de la Police
  35.
      WeightS = 'bold' //Epaisseur de la Police
  36.
      FonduS = 1 //1:Fondu, 0:aucun
  37.
      CursorS = 'default' //Curseur-> default,hand...
  38.
 
  39.
      k=-1; zlien=new Array
  40.
 
  41.
      i=0; zlien[++k]=new Array
  42.
      //------------[Texte/Html]------------------[ Adresse ]-------------------------------//
  43.
 
  44.
      zlien[k][i++]='- Questionner à vos Elus' ;zlien[k][i++]='http://villedemaing.free.fr/INTRANET/SOMMAIRE/CONTACT/INDEX.php'
  45.
      zlien[k][i++]='- Réponse des Elus' ;zlien[k][i++]='http://villedemaing.free.fr/INTRANET/FAQ/foire.php'
  46.
 
  47.
 
  48.
      //************ Fin des paramètres, Début du programme ************//
  49.
      document.write('<style>')
  50.
      document.write('.ejmenu {background:'+Color1M+';text-align:'+AlignM+';font:'+WeightM+' '+SizeM+' '+FontM+';color:'+Color0M+';cursor:'+CursorM+'}')
  51.
      document.write('.ejsmenu {background:'+Color1S+';text-align:'+AlignS+';font:'+WeightS+' '+SizeS+' '+FontS+';color:'+Color0S+';cursor:'+CursorS+'}')
  52.
      document.write('</style>')
  53.
 
  54.
      function fadeIn(obj)
  55.
      { obj.style.filter="blendTrans(duration=1)"
  56.
      if(obj.filters.blendTrans.status!=1)
  57.
      { obj.filters.blendTrans.Apply()
  58.
      obj.style.visibility="visible"
  59.
      obj.filters.blendTrans.Play()
  60.
      }
  61.
      }
  62.
 
  63.
      document.onclick = function() { skn.visibility='hidden' }
  64.
      document.onmousemove = function() { dgt.top=document.body.scrollTop+PosY; dgt.visibility='visible' }
  65.
      window.onscroll = function() { dgt.visibility=skn.visibility='hidden' }
  66.
 
  67.
      function pop(msg,pos)
  68.
      { skn.visibility="hidden"
  69.
      skn.top=document.body.scrollTop+PosY+HauteurM
  70.
      if(!msg.length) return
  71.
      if(EnLigne)
  72.
      { content="<TABLE style='border-collapse:collapse;'WIDTH="+LargeurM*menu.length/2+" bordercolor="+Color3S+" BORDER=1><TR>"
  73.
      for(pass=0;pass<msg.length;pass+=2) content+="<TD CLASS=ejsmenu>"+msg[text]+"</TD>"
  74.
      } else
  75.
      { skn.left=pos-1
  76.
      content="<TABLE style='border-collapse:collapse;'WIDTH="+LargeurS+" bordercolor="+Color3S+" BORDER=1>"
  77.
      for(pass=0;pass<msg.length;pass+=2) content+="<TR><TD WIDTH="+LargeurS+" onMouseDown='location.href=\""+msg[pass+1]+"\"' onMouseOver=\"this.style.background='"+Color2S+"' ; this.style.color='"+Color4S+"' \" onMouseOut=\"this.style.background='"+Color1S+"' ; this.style.color='"+Color2S+"'\" HEIGHT="+HauteurS+" CLASS=ejsmenu>"+msg[pass]+"</TD></TR>"
  78.
      }
  79.
      document.getElementById("topdeck").innerHTML=content+"</TR></TABLE>"
  80.
      if(document.all && FonduS) fadeIn(topdeck); else skn.visibility="visible";
  81.
      }
  82.
 
  83.
      document.write('<DIV style="position:fixed"><DIV style="POSITION:absolute;top:'+200+';left:'+50+';VISIBILITY:hidden;z-index:15" id=topdeck></DIV><TABLE ID=topmenu style="position:fixed;border-collapse:collapse;" bordercolor='+Color3M+' BORDER=1 WIDTH='+LargeurM*menu.length/2 +' HEIGHT='+12+'><tr>')
  84.
      skn=document.getElementById('topdeck').style
  85.
      dgt=document.getElementById('topmenu').style
  86.
      for(pass=0;pass<menu.length/2;pass++) document.write("<TD onMouseOver=' ;pop(zlien["+pass+"],this.offsetLeft)' CLASS=ejmenu>"+menu[pass*2]+"</TD>")
  87.
      document.write('</TR></TABLE></DIV>')
  88.
      dgt.top=document.body.scrollTop+PosZ

(je me demande s'il est possible de faire en sorte que le sous menu apparaisse flottant a un endroit choisi de la page ; sans biensur qu'il se déplace en meme temps que le défilement vertical de celle ci)

quelqu'un peut-il me venir en aide ?

**Spectoo** · 04/12/2007, 14h11

je viens vous mettre un peu plus d'information

voila le code dans lequel je viens insérer le fichier javascript :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
<div id="buttons_outer"><div id="buttons_inner"><div id="buttons"><ul id="mainlevel-nav">
<li><a href="http://www.maing.fr/AFFICHAGE/SOMMAIRE/ACCUEIL/INDEX.php" class="mainlevel-nav" target="_top">ACCUEIL</a></li>
<li><a href="http://www.maing.fr/AFFICHAGE/SOMMAIRE/PERMANENCES/INDEX.php" class="mainlevel-nav" target="_top">PERMANENCES</a></li>
<li><a href="http://www.maing.fr/AFFICHAGE/SOMMAIRE/VIE_LOCALE/INDEX.php" class="mainlevel-nav" target="_top">VIE LOCALE</a></li>
<li><a href="http://www.maing.fr/AFFICHAGE/SOMMAIRE/INFOS_PRATIQUES/INDEX.php" target="_top">INFOS PRATIQUES</a></li>
<li><a href="http://www.maing.fr/AFFICHAGE/SOMMAIRE/AVANTFORUM/INDEX.php" class="mainlevel-nav" target="_top">FORUM</a></li>
<li><a href="http://www.maing.fr/AFFICHAGE/SOMMAIRE/CONTACT/INDEX.php" target="_top"><SCRIPT language="javascript" src="menu.js"></SCRIPT></a></li>
</ul><center><font color ="green" face = "arial" size="2" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<? $jour = array("Dimanche", "Lundi", "Mardi", "Mercredi", "Jeudi", "Vendredi", "Samedi");
$mois = array("Janvier", "Février", "Mars", "Avril", "Mai", "Juin", "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre");
 
echo $jour[date(w)]." ".date(j)." ".$mois[date(n)-1]." ".date(Y); ?></font></center></div></div></div>