Modification d'un menu vertical HTML

Version imprimable

Voir 40 message(s) de cette discussion en une page

17/03/2008, 17h33
dudule0

C'est tout à fait ce qu'il me faut Auteur !
Deux petites modifications:
1°/ "Vous Recherchez un bien" lors du passage de la souris quatre sous-menus doivent s'afficher! "Bureaux", "Locaux Commerciaux", "Entrepôts" et "Terrains".
Ces quatre liens seront alors supprimés du menu vertical.
2°/ "Vous proposez un bien" lors du passage de la souris deux sous-menus doivent s'afficher! "Nos services de Location / Vente" et "Nos avis de valeur"
J'ai mieux compris le code que tu viens de me présenter car il correspond à ma requête. Le plus difficile reste à mes yeux d'insérer tout ce nouveau code dans une page existante.
M'enfin :) nous y arriverons ensemble :)

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
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
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">

<head>
<title>Menu deroulant</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="fr" />

<style type="text/css">
<!--
/******** Feuille de styles du menu ************/
.conteneurMenu{
 float: left;
 width: 170px; /** Tenir compte du width de titreMenu ;) **/
 border: none;
 padding: 0px;
 margin: 5px;
}

.menu{
 float: left;
 margin: 1px;
 padding: 2px;
 clear: both;
}

.titreMenu, .contenuMenu, .lienMenu{
 color: #000000;
}

.titreMenu, .contenuMenu{
 border: 2px outset #AAAAAA;
 width: 150px;
 text-align: center;
 margin: 0px;
 padding: 0px;
 float: left;
}

.titreMenu{
 z-index: 0;
}

.contenuMenu{
 display: none;
 background-color: #FFFFFF;
 position: absolute;
 z-index: 1;
}

.menuOverflow{
 overflow: auto;
 height: 200px;
}

.itemOver{
 background-color: #AAAAFF;
 /*font-weight: bold;*/
}

.itemOut{
 background-color: #FFFFFF;
}

.lienMenu{
 text-decoration: none;
}

.crlf{
 clear: both;
 visibility: hidden;
}

/******** Fin de la feuille de styles du menu ************/
//-->
</style>

<script type="text/javascript">
<!--
/******** Debut du script du menu ************/
var timer = null;
var objOut = null;

function mouseOut(obj)
{
   var elmt = document.getElementById(obj.id+"Item");
   elmt.style.display = "none";
   
   document.getElementById(obj.id+"Titre").className = "titreMenu itemOut";
   document.getElementById(obj.id+"Titre").style.borderStyle="outset";

   //instruction a placer a la fin de la fonction
   timer = null;
}

function fout(obj)
{
   objOut = obj;
   if (timer==null)
   {
      timer = setTimeout("mouseOut(objOut)","1000");
   }
}


function fover(obj)
{
   var elmt, elmtTitre;
   clearTimeout(timer);
   timer = null;

   elmt = document.getElementById(obj.id+"Item");
   elmt.style.display = "block";

   elmtTitre = document.getElementById(obj.id+"Titre");
   
   elmtTitre.className = "titreMenu itemOver";
   elmtTitre.style.borderStyle = "inset";
   
   if (document.all==null) //si on est sous IE pas besoin d'ajuster les positions
      elmt.style.left = elmtTitre.offsetLeft+elmtTitre.clientWidth+"px";

   if (objOut!=obj && objOut!=null)
   {
      mouseOut(objOut);
   }
}

//-->
</script>

</head>

<body>

<!-- Debut code HTML du menu -->
<div class="conteneurMenu">

<!-- Debut Menu 1 -->
<div class="menu" id="Menu1" onmouseout="fout(this)" onmouseover="fover(this)">
  <div class="titreMenu itemOut" id="Menu1Titre"><a href="mailto:xxxxx" class="lienMenu">ACIE</a></div>

  <div class="contenuMenu" id="Menu1Item" style="visibility: hidden">
  &nbsp;
  <!-- ne pas supprimer ce div et le laisser vide -->
  </div>

</div>
<!-- Fin Menu 1 -->

<!-- Debut Menu 2 -->
<div class="menu" id="Menu2" onmouseout="fout(this)" onmouseover="fover(this)">
  <div class="titreMenu itemOut" id="Menu2Titre"><a href="pages/chiffre.htm" class="lienMenu">Nous conna&icirc;tre</a></div>

  <div class="contenuMenu" id="Menu2Item" style="visibility: hidden">
  &nbsp;
  <!-- ne pas supprimer ce div et le laisser vide -->
  </div>

</div>
<!-- Fin Menu 2 -->

<!-- Debut Menu 3 -->
<div class="menu" id="Menu3" onmouseout="fout(this)" onmouseover="fover(this)">
  <div class="titreMenu itemOut" id="Menu3Titre">Vous recherchez un bien</div>

  <div class="contenuMenu" id="Menu3Item">
      <div class="itemOut" onmouseout="this.className='itemOut'" onmouseover="this.className='itemOver'"><a href="pages/bureaux.htm" class="lienMenu">Bureaux</a></div>
      <div class="itemOut" onmouseout="this.className='itemOut'" onmouseover="this.className='itemOver'"><a href="pages/locaux.htm" class="lienMenu">Locaux commerciaux</a></div>
      <div class="itemOut" onmouseout="this.className='itemOut'" onmouseover="this.className='itemOver'"><a href="pages/entrepots.htm" class="lienMenu">Entrep&ocirc;ts</a></div>
      <div class="itemOut" onmouseout="this.className='itemOut'" onmouseover="this.className='itemOver'"><a href="pages/terrains.html" class="lienMenu">Terrains</a></div>
 </div>

</div>
<!-- Fin Menu 3 -->

<!--  Menu 4 -->
<div class="menu" id="Menu4" onmouseout="fout(this)" onmouseover="fover(this)">
  <div class="titreMenu itemOut" id="Menu4Titre">Vous proposez un bien</div>

  <div class="contenuMenu" id="Menu4Item">
      <div class="itemOut" onmouseout="this.className='itemOut'" onmouseover="this.className='itemOver'"><a href="#" class="lienMenu">Nos services de Location / Vente</a></div>
      <div class="itemOut" onmouseout="this.className='itemOut'" onmouseover="this.className='itemOver'"><a href="#" class="lienMenu">Nos avis de valeur</a></div>
  </div>

</div>
<!-- Fin Menu 4 -->

<!--  Menu 5 -->
<div class="menu" id="Menu5" onmouseout="fout(this)" onmouseover="fover(this)">
  <div class="titreMenu itemOut" id="Menu5Titre"><a href="pages/gespatri.htm" class="lienMenu">Gestion de patrimoine immobilier</a></div>

  <div class="contenuMenu" id="Menu5Item" style="visibility: hidden">
  &nbsp;
  <!-- ne pas supprimer ce div et le laisser vide -->
  </div>

</div>
<!-- Fin menu 5  -->

<!--  Menu 6 -->
<div class="menu" id="Menu6" onmouseout="fout(this)" onmouseover="fover(this)">
  <div class="titreMenu itemOut" id="Menu6Titre"><a href="pages/estim.htm" class="lienMenu">Estimations</a></div>

  <div class="contenuMenu" id="Menu6Item" style="visibility: hidden">
  &nbsp;
  <!-- ne pas supprimer ce div et le laisser vide -->
  </div>

</div>
<!-- Fin menu 6  -->

<!--  Menu 7 -->
<div class="menu" id="Menu7" onmouseout="fout(this)" onmouseover="fover(this)">
  <div class="titreMenu itemOut" id="Menu7Titre"><a href="pages/info-conseil.htm" class="lienMenu">Informations</a></div>

  <div class="contenuMenu" id="Menu7Item" style="visibility: hidden">
  &nbsp;
  <!-- ne pas supprimer ce div et le laisser vide -->
  </div>

</div>
<!-- Fin menu 7  -->

<!--  Menu 8 -->
<div class="menu" id="Menu8" onmouseout="fout(this)" onmouseover="fover(this)">
  <div class="titreMenu itemOut" id="Menu8Titre"><a href="pages/formul.htm" class="lienMenu">Formulaire</a></div>

  <div class="contenuMenu" id="Menu8Item" style="visibility: hidden">
  &nbsp;
  <!-- ne pas supprimer ce div et le laisser vide -->
  </div>

</div>
<!-- Fin menu 8  -->


<div><br /><br /></div>
<hr class="crlf" />
</div>
<!-- Fin code HTML du menu -->

<div style="float: left; width: 70%">
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
</div>

</body>

</html>

:question:

Rappel : le code ne fonctionne que sous IE et Firefox.... (Je crois que sous Safari, Opera et Konqueror, il y a quelques soucis)

17/03/2008, 23h11
Auteur
Citation:

Envoyé par dudule0

je ne sais pas intégrer, le code que tu m'a gentiment fait, dans l'index du site. Je suis un débutant complet.

ce code est ton index :D

Fais un copier-coller de ce code dans un éditeur de texte (Notpad - le bloc-notes) et enregistre le fichier avec l'extention htm (index.htm par exemple). Ensuite ouvre cette page web avec ton navigateur ;)

Ce qu'il te reste à faire :
- Il y a des liens que je n'ai pas renseignés (<a href="#"....) il te faut donc les complèter ;
- Ajoute tes balises meta là où il faut... ;
- Renseigne le lien mailto ;
- Important : dans le code que tu as fourni précédemment il y a ce lien :
Code:

1 2 pages/entrepôts.htm
:fleche: ne mets pas de caractères accentués, d'espaces, ou de caractères spéciaux dans tes liens. Contente toi des 26 lettres et des chiffres pour créer une url (et du /) ;)
- Remplace le "bla bla" par le contenu de la page :ccool:

- Tu n'as pas à toucher au code javascript ;
- Tu peux modifier les feuilles de styles (tout ce qui est entre les balises style).
18/03/2008, 09h03
dudule0

Merci à tous de votre collaboration, bénéfique pour un débutant complet:) Des erreurs sont, bien entendu, toujours possibles je ferai en sorte, à l'avenir, d'être plus attentif (Erwan31... ) ou de mieux comprendre ;).

Sur ton aide précieuse AUTEUR, je pense pouvoir maintenant arriver convenablement à modifier cette page index.

Cordialement.

Un débutant.
18/03/2008, 10h47
Auteur

Comment casser le moral :mrgreen: :

Une chose : avant de mettre en ligne ton site, teste le (ou fais le tester) sur différents navigateurs et OS (Windows, Linux, Mac) pour éviter les mauvaises surprises au final... Tu peux faire tester ton site par les membres de dvp en créant une discussion dans le forum Mon Site

Par exemple, le script de ce menu déroulant fonctionne sous Internet Explorer et Firefox, mais il n'a pas été validé sur Opera, Konqueror (navigateur Linux) et Safari (navigateur Mac).
Donc prudence... Si le script ne fonctionne pas sur certains navigateurs, il faut palier au problème et proposer une autre solution, sinon tu prives des utilisateurs potentiels des fonctionnalités du site.
19/03/2008, 08h11
dudule0

Citation:

Envoyé par Auteur

Comment casser le moral :mrgreen:

Pas à ce niveau, mais!!!8O

J'ai inséré ton code AUTEUR, "à peu prés" comme tes indications le signifiaient;)

Il en ressort que ma page index n'a pas changé et que le code inséré est vert et souligné. que faut il faire ?
19/03/2008, 10h38
Auteur

Citation:

Envoyé par dudule0

Pas à ce niveau, mais!!!8O

Je veux simplement te dire qu'il faut tester ton site sous différentes configurations. En effet, certaines fonctions javascript ainsi que certaines feuilles de styles ont différents comportements selon le navigateur. ;)

Citation:

Envoyé par dudule0

J'ai inséré ton code AUTEUR, "à peu prés" comme tes indications le signifiaient;)

Il en ressort que ma page index n'a pas changé et que le code inséré est vert et souligné. que faut il faire ?

vide le cache de IE....
19/03/2008, 13h23
dudule0

Citation:

Envoyé par Auteur

Je veux simplement te dire qu'il faut tester ton site sous différentes configurations. En effet, certaines fonctions javascript ainsi que certaines feuilles de styles ont différents comportements selon le navigateur. ;)

J'avais bien compris le l’inflexion humoristique. :mrgreen:

Donc je viens de nettoyer le cache sous IE et le résultat est le même. Par contre je tente d'essayer sur mon portable et là tout apparaît, presque convenablement !!!

L'image background est un peu trop large, et superpose en partie le menu mais ce dernier est parfaitement en place sur la gauche. C'est déjà un avancement tangible et une satisfaction non dissimulée.

Questions :

1°/ Comment puis-je faire apparaître 1 cadre sous le menu afin que la couleur du sous-menu soit blanche ?

2°/ Est-ce la bonne méthode ou une bonne initiative ?

Merci de votre aide.;)
19/03/2008, 13h45
Auteur
Citation:

Envoyé par dudule0

L'image background est un peu trop large, et superpose en partie le menu mais ce dernier est parfaitement en place sur la gauche. C'est déjà un avancement tangible et une satisfaction non dissimulée.

Questions :

1°/ Comment puis-je faire apparaître 1 cadre sous le menu afin que la couleur du sous-menu soit blanche ?

2°/ Est-ce la bonne méthode ou une bonne initiative ?

1 : Visiblement le body a un background et comme le div contenant le menu (conteneurMenu) est transparent, il apparait sous le menu. Essaye ceci : ajoute dans la classe contenueurMenu un background-color blanc :
Code:

1 2 3 4 5 6 7 8 9 .conteneurMenu{ float: left; width: 170px; /** Tenir compte du width de titreMenu ;) **/ border: none; padding: 0px; margin: 5px; background-color: #FFFFFF; /* fond blanc */ }
2 : euh pas compris la question :oops:
19/03/2008, 15h07
dudule0
Citation:
Envoyé par Auteur

1 : Visiblement le body a un background et comme le div contenant le menu (conteneurMenu) est transparent, il apparait sous le menu. Essaye ceci : ajoute dans la classe contenueurMenu un background-color blanc :

Code:

1 2 3 4 5 6 7 8 9 .conteneurMenu{ float: left; width: 170px; /** Tenir compte du width de titreMenu ;) **/ border: none; padding: 0px; margin: 5px; background-color: #FFFFFF; /* fond blanc */ }

2 : euh pas compris la question :oops:
Merci de ton aide Auteur !;)
Tu as répondu aux deux questions la seconde concernait la méthode;)

J'ai appliqué "background-color: #FFFFFF; /* fond blanc */" et la couleur, sous le menu déroulant, ne devient pas blanche:(

Que faire ?
19/03/2008, 15h24
Auteur

je ne sais pas... montre moi ton code

par MP :
Citation:
Voici mon code complet ;)
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 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 .conteneurMenu{ float: left; width: 170px; /** Tenir compte du width de titreMenu ;) **/ border: none; padding: 0px; margin: 5px; background-color: #FFFFFF; /* fond blanc */ } .menu{ float: left; margin: 1px; padding: 2px; clear: both; } .titreMenu, .contenuMenu, .lienMenu{ color: #000000; } .titreMenu, .contenuMenu{ border: 2px outset #AAAAAA; width: 150px; text-align: center; margin: 0px; padding: 0px; float: left; } .titreMenu{ z-index: 0; } .contenuMenu{ display: none; background-color: #FFFFFF; position: absolute; z-index: 1; } .menuOverflow{ overflow: auto; height: 200px; } .itemOver{ background-color: #AAAAFF; /*font-weight: bold;*/ } .itemOut{ background-color: #FFFFFF; } .lienMenu{ text-decoration: none; } .crlf{ clear: both; visibility: hidden; } /******** Fin de la feuille de styles du menu ************/ //--> </style> <script type="text/javascript"> <!--
=> ça c'est la feuille de style du menu...

Tu as écrit précédemment :

Citation:

L'image background est un peu trop large, et superpose en partie le menu mais ce dernier est parfaitement en place sur la gauche. C'est déjà un avancement tangible et une satisfaction non dissimulée.

Quelle image background ? Elle définie dans la feuille de style de body ?

19/03/2008, 18h36
dudule0
J'ai résolu la dimension de l'image de fond en traitant
code HTML:
Code:

1 2 <img src="image/Couv.jpg" width="920" height="788" border="0" align="right" usemap="#Map">
Le nouveau menu déroulant vertical, intégré dans mon index, n'apparait pas. C'est toujours l'ancien qui se présente lors du contrôle avec IE ????:aie:

Je travaille sur plusieurs micros et j'ai bien nettoyé les caches.
Il m'est impossible de transmettre le code complet car il fait plus de 10 000 caractères:(
Que faire !
19/03/2008, 19h25
Auteur

Citation:

Envoyé par dudule0

Je travaille sur plusieurs micros et j'ai bien nettoyé les caches.
Il m'est impossible de transmettre le code complet car il fait plus de 10 000 caractères:(
Que faire !

tu peux le mettre en ligne ?
19/03/2008, 19h29
dudule0

Négatif, je ne peux pas le mettre en ligne, mais j'aimerai assez te le passer!!!
19/03/2008, 23h24
Auteur
img est le fond ? Pourquoi tu n'utilises pas la propriété CSS background-image ?
Code:

1 2 3 4 background-image : url("image/Couv.jpg"); background-repeat : no-repeat; background-position: 0 0;
20/03/2008, 13h08
dudule0
Citation:
Envoyé par Auteur

img est le fond ? Pourquoi tu n'utilises pas la propriété CSS background-image ?

Code:

1 2 3 4 background-image : url("image/Couv.jpg"); background-repeat : no-repeat; background-position: 0 0;
J'ai bien utilisé le code proposé;), mais rien ne change sur ma page, maintenant le menu déroulant se trouve centré au lieu d'être complètement à gauche.:(
25/03/2008, 14h37
Auteur

Avec des bouts de codes ici et là, on ne va pas avancer bien vite :? Et si une erreur est corrigée, un nouveau problème va arriver. :bug:

Peux-tu mettre ton site en ligne ? Ca sera plus simple pour nous de localiser les erreurs.

Tu peux jeter un oeil sur ces tutos :
http://xhtml.developpez.com/
http://css.developpez.com/
25/03/2008, 15h47
{F-I}

Ou bien au pire fais un multi post uniquement pour montrer le code source (de préférence regrouper un post / type de code HTML / CSS)
25/03/2008, 16h58
Auteur

faire un multipost :cfou:

On ne vas pas aller chercher dans le forum HTML son code HTML, dans le forum CSS son code CSS et dans le forum Javscript son code javascript 8O

Voir 40 message(s) de cette discussion en une page