Menu d�roulant JS et CSS

**dlamo** · 20/07/2007, 10h19

Bonjour � tous,
Voici mon soucis :
J'ai un menu JS et CSS qui fonctionne parfaitement tant que la taille des polices dans les onglets (dt) est la m�me que celle dans le liens d�roulant (li)....Mais comme j'ai besoin de r�duire celle des liens d�roulants, alors l� le menu ne fonctionne plus correctement : il ouvre bien les choix dessous, mais impossible d'y aller cliquer, �a se referme aussit�t ...
Quelqu'un a t-il une id�e ? (important : optimisation uniquement pour IE5.5 et 6 pour des raisons des gestion interne � la soci�t�.... Oui je sais ! .... )
Voici la partie du JS + html :

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
<script type="text/javascript">
<!-- script du menu déroulant
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
	for (var i = 1; i<=10; i++) {
		if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
	}
if (d) {d.style.display='block';}
}
//-->
</script>
<!-- début tableau contenant menu déroulant -->
<style type="text/css">
<!--
@import url("css/menu_deroulant.css");
-->
</style>
 
<table width="100%" height="50" border="0" cellpadding="0" cellspacing="0" bgcolor="#FF3399">
  <tr>
    <td width="80%" nowrap>
<div id="menu_der">
   <table width="100%" border="0" cellspacing="0" cellpadding="0">
        <tr align="center">
		  <td nowrap>
				<dl>			
					<dt class="comite" onMouseOver="javascript:montre('smenu1');"><a href="#">Découvrir le CE</a></dt>
						<dd  class="comite" id="smenu1" onMouseOver="javascript:montre('smenu1');" onMouseOut="javascript:montre('');">
							<ul>
								<li><a href="role.php">&nbsp;Le rôle du CE</a></li>
								<li><a href="specificites.php">&nbsp;Ses spécificités</a></li>
								<li><a href="elections.php">&nbsp;Les élections</a></li>
								<li><a href="seances.php">&nbsp;Séances plénières</a></li>
								<li><a href="equipe.php">&nbsp;Notre équipe</a></li>
							</ul>
						</dd>
				</dl>
				<dl>	
					<dt class="offres" onMouseOver="javascript:montre('smenu2');"><a href="#">Nos offres</a></dt>
						<dd  class="offres" id="smenu2" onMouseOver="javascript:montre('smenu2');" onMouseOut="javascript:montre('');">
								<ul>
									<li><a href="role.php">&nbsp;Nos partenaires</a></li>
									<li><a href="specificites.php">&nbsp;La billetterie</a></li>
									<li><a href="elections.php">&nbsp;Les annoces</a></li>
								</ul>
				  </dd>
				</dl>
				<dl>	
					<dt class="formulaires" onMouseOver="javascript:montre('smenu6');"><a href="#">Les formulaires</a></dt>
						<dd class="formulaires" id="smenu6" onMouseOver="javascript:montre('smenu6');" onMouseOut="javascript:montre('');">
							<ul>
								<li><a href="sport.php">&nbsp;sports</a></li>
								<li><a href="creche.php">&nbsp;Crêche</a></li>
								<li><a href="balneo.php">&nbsp;Balnéothérapie</a></li>
								<li><a href="enfants.php">&nbsp;Enfants</a></li>
								<li><a href="prets.php">&nbsp;Prêts</a></li>
							</ul>
						</dd>
				</dl>
				<dl>	
					<dt class="activites" onMouseOver="javascript:montre('smenu7');" ><a href="#">Voir nos activités</a></dt>
						<dd class="activites" id="smenu7" onMouseOver="javascript:montre('smenu7');" onMouseout="javascript:montre('')";>
							<ul>
								<li><a href="budget.php">&nbsp;Budget</a></li>
								<li><a href="camping.php">&nbsp;Camping</a></li>
								<li><a href="cerebral.php">&nbsp;Cérabral club</a></li>
								<li><a href="chasse.php">&nbsp;Chasse</a></li>
								<li><a href="cinema.php">&nbsp;Chèques cinéma</a></li>
								<li><a href="culture.php">&nbsp;Culture</a></li>
								<li><a href="dessins.php">&nbsp;Dessins Noël</a></li>
								<li><a href="enfants.php">&nbsp;Enfants</a></li>
								<li><a href="fete_meres.php">&nbsp;Fêtes des mères</a></li>
								<li><a href="fin_annee.php">&nbsp;Fin d'année</a></li>
								<li><a href="participation.php">&nbsp;Part. financière</a></li>
								<li><a href="prets.php">&nbsp;Prêts</a></li>
								<li><a href="section_autonome.php">&nbsp;Sect. autonome</a></li>
								<li><a href="serrechevalier.php">&nbsp;Serre Chevalier</a></li>
								<li><a href="socios.php">&nbsp;Socios</a></li>
								<li><a href="soirees.php">&nbsp;Soirées</a></li>
								<li><a href="sporting.php">&nbsp;Sporting club</a></li>
								<li><a href="vac_ete.php">&nbsp;Vacances été</a></li>
								<li><a href="vac_hiver.php">&nbsp;Vacances hiver</a></li>
								<li><a href="voyages.php">&nbsp;Voyages</a></li>
								<li><a href="weekend.php">&nbsp;Week ends</a></li>
							</ul>
					  </dd>
				</dl>			
			</td>
     	</tr>
   </table>
 </div>
<div align="left"></div></td>
    <td rowspan="2" nowrap><?php include "retrouveznous.inc.php" ?></td>
  </tr>
  <tr>
    <td nowrap>&nbsp;</td>
  </tr>
</table>

**Bis�n�rs** · 20/07/2007, 10h42

Probl�me r�curent de l'utilisation de ce menu. Je ne peux que te conseiller de regarder les menus disponibles � cette adresse, voir si tu y trouves ton bonheur :

http://css.developpez.com/galerie/

Et pour te former : Cours et tutoriels CSS et FAQ CSS.

**dlamo** · 20/07/2007, 10h48

Merci, je vais voir �a
Ceci dit, j'ai trouv� une piste, rien � voir avec ce pauvre js... �a vient de la hauteur de
#menu_der li a {
height:15px;
}
�a fonctionne si je supprime la hauteur mais l� mon menu se d�roule jusqu'en bas de page.... je dois r�fl�chir.... lol
Merci encore pour le lien

**Bis�n�rs** · 20/07/2007, 13h16

Dans ton CSS tu as mis :

Code css :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
#smenu4 ul li ul {
display:none;
position:absolute;
width:125px;
border:1px solid #dddddd;
border-top:none;
top:22px;
left:0;
}

Ce n'est pas #smenu4 mais #menu qu'il faut mettre.

**dlamo** · 20/07/2007, 13h33

Merci pour ton aide et pardon d'avoir supprim� mon dernier message, mais j'ai fais un post sp�cial dans la rubrique css....
(sinon, j'ai mis #smenu4 pour ne modifier la couleur que de celui l�, mais j'ai modifier, �a fonctionne correctement pour mes couleurs, le soucis est dans le placement du menu dans la page, j'arrive pas � le mettre � gauche, cf mon nouveau post

Menu d�roulant JS et CSS

JavaScript

Discussions similaires

Partager

Partager