Discussion :

[navis84]

Bonjour,

Sur un de mes sites, j'ai le menu disponible sur ce site : http://iubito.free.fr/prog/menu.php.
Or dans certaines parties du menu, il y a en dessous un système d'onglets sur lesquels il y a des liens.

Mais lorsque je déroule un partie du menu, et que cette partie recouvre un ou plusieurs onglets, une fois sortie du menu principal, j'ai beau cliquer sur l'onglet, rien ne se passe ! C'est comme si ce n'était que du texte.

Une idée sur ce que ce conflit pourrait être ?
Merci d'avance,
@+

[ythierrin]

Salut,

J'ai essayé de reproduire ton défaut mais sans succès.

J'utilise IE6 et apparement tout fonctionne. Donne moi une manipulation à faire pour que je puisse essayer à nouveau.

A+

[trotters213]

Tout simplement : tu n'aurais pas oublié les balises <a> dans tes balises <li> ?

[navis84]

Merci de t'être penché sur mon problème.

Voici des captures d'écran pour aider à comprendre la situation :

1 : Avant le survol


2 : Au survol


Lorsque je survole en allant du sens Menu 2 à Sous-menu 2.4, si je continue selon cet axe, je ne peux plus cliquer sur le lien de l'onglet 3.

Voici le code des onglets au cas où : (je ne mets pas tout le code du tableau)
<tr>
<th align='center' class='select' ><a href=''>Accueil</a>
<th align='center' ><a href=''>Onglet 1</a>
<th align='center' ><a href=''>Onglet 2</a>
<th align='center' ><a href=''>Onglet 3</a>

Merci pour ton aide.
Pourrais-tu poster ton code si cela marche pour toi ? Je pourrai ainsi faire plus de comparaisons...

[MasterOfChakhaL]

salut,

le problème pourrait simplement venir de tes attributs href

Tu leur donne comme valeur la chaine vide...

Si c'est pour des tests, tu peux mettre:

Code html :

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

<a href="#">lien</a>

[navis84]

Tout simplement : tu n'aurais pas oublié les balises <a> dans tes balises <li> ?

Non, elles y sont.

le problème pourrait simplement venir de tes attributs href
Tu leur donne comme valeur la chaine vide...
Si c'est pour des tests, tu peux mettre:

Code html :

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

<a href="#">lien</a>

En fait, j'ai mis le contenu vide sur le forum, mais sur le site, il y a le nom d'une page...

[MasterOfChakhaL]

Re,

Alors, le problème doit venir du css...
Vérifie d'abord ton menu sans mettre le css, si tu vois que l'html est correcte (liste et sous listes de liens...) Alors, le problème vient certainement du css.

Vu ce que tu décris, je vérifierais que tu ne t'es pas planté dans les z-index. Par exemple, un menu déroulé doit avoir un z-index supérieur à ses voisins, sinon, s'il ya recouvrement, et ben les côtés de ton menu déroulé son masqués par les voisins (parfois maqués par une zone transparente, mais quand même bien masqués aux yeux de la souris......).

Donc voilà... pour d'autres idées, un bout de ton code pourrait être utile

[navis84]

Apparemment, mes z-index sont bons. Celui du menu est 100.

Par contre, j'avais adapté le menu (surtout en utilisant les fonctions JS) par rapport au menu existant.

Voici le code du menu :

Code HTML :

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
<div id="menu">
 <table border="0" cellpadding="0" cellspacing="0" width="800">
  <tbody><tr>
   <td>
    <dl style="display: block;" class="dl_accueil" id="smenu0">
     <dt onmouseover="javascript:montre('smenu0');">
     <a href="index.php" title="Retour à l'accueil">
     Accueil</a>
     </dt>
    </dl>
 
    <dl>
     <dt onmouseover="montre('smenu1');MontrerMenu('smenu1');" onmouseout="CacherDelai();" onclick="montre('smenu1');">Menu 1</dt>
      <dd style="display: none; visibility: hidden;" id="smenu1" onmouseover="AnnulerCacher();" onmouseout="CacherDelai();">
       <ul>
        <li><a href="#"><img src="menu_1_fichiers/puce.gif" border="0"> Sous-menu 1.1</a></li>
        <li><a href="#"><img src="menu_1_fichiers/puce.gif" border="0"> Sous-menu 1.2</a></li>
        <li><a href="#"><img src="menu_1_fichiers/puce.gif" border="0"> Sous-menu 1.3</a></li>
       </ul>
      </dd>
    </dl>
 
 
    <dl>
     <dt onmouseover="montre('smenu2');MontrerMenu('smenu2')" onmouseout="CacherDelai();" onclick="montre('smenu2');">Menu 2</dt>
      <dd style="display: none; visibility: hidden;" id="smenu2" onmouseover="AnnulerCacher();" onmouseout="CacherDelai();">
       <ul>
       	<li><a href="#"><img src="menu_1_fichiers/puce.gif" border="0"> Sous-menu 2.1</a></li>
       	<li><a href="#"><img src="menu_1_fichiers/puce.gif" border="0"> Sous-menu 2.2</a></li>
       	<li><a href="#"><img src="menu_1_fichiers/puce.gif" border="0"> Sous-menu 2.3</a></li>
       	<li><a href="#"><img src="menu_1_fichiers/puce.gif" border="0"> Sous-menu 2.4</a></li>
        	<li><a href="#"><img src="menu_1_fichiers/puce.gif" border="0"> Sous-menu 2.5</a></li>
       	<li><a href="#"><img src="menu_1_fichiers/puce.gif" border="0"> Sous-menu 2.6</a></li> </ul>
      </dd>
    </dl>
 
 
    <dl>
     <dt onmouseover="montre('smenu3');MontrerMenu('smenu3')" onmouseout="CacherDelai();" onclick="montre('smenu3');">Menu 3</dt>
      <dd style="display: none; visibility: hidden;" id="smenu3" onmouseover="AnnulerCacher();" onmouseout="CacherDelai();">
       <ul>
       </ul>
      </dd>
    </dl>
 
  		</td>
  		</tr>
 </tbody>
</table>
  </div>

Et voici le code JS que j'ai repris de l'ancienne version :

Code JS :

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
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';}
 
	}

Cela vous aidera surement pour voir mon problème.
Merci d'avance.

PS : je descends les onglets, je n'ai aucun souci...

[MasterOfChakhaL]

Est-ce que les visibility:hidden; sont nécessaires?

J'ai l'impression que non et que c'est ca qui pose problème...
Si tu en as vraiment besoin pour d'autres raisons, alors il faut quand même que dans ton javascript, tu rendes la zone visible.
Ton display block permet de voir la zone occupé, mais puisque visibility est à hidden, les éléments ne sont pas affichés.

[navis84]

J'ai du mal à comprendre ton explication en fonction de mon code...

Parles-tu du visibility:hidden dans la propriété style de la balise <dd> ? Car si je l'enlève, ça ne me change rien...

[MasterOfChakhaL]

oui, je parle bien des balises dd.

Je ne comprends pas bien l'interêt de le mettre, tu empêches l'affichage avec le display:block, ca devrait suffire...
Quand j'ai testé chez moi, le fait de les enlever a quand même modifié l'affichage...

Si j'ai raté un truc... dis-moi...

[navis84]

Je les ai enlevé mais ça ne change rien...

Je me permet de te faire un récapitulatif car je ne vois pas ce qu'il te manque.

1. Le fichier html

Le menu :

Code HTML :

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
<div id="menu">
	 <table border="0" cellpadding="0" cellspacing="0" width="800">
	  <tbody><tr>
	   <td>
	    <dl style="display: block;" class="dl_accueil" id="smenu0">
	     <dt onmouseover="javascript:montre('smenu0');">
	     <a href="index.php" title="Retour à l'accueil">
	     Accueil</a>
	     </dt>
	    </dl>
 
	    <dl>
	     <dt onmouseover="montre('smenu1');MontrerMenu('smenu1');" onmouseout="CacherDelai();" onclick="montre('smenu1');">Menu 1</dt>
	      <dd style="display: none;" id="smenu1" onmouseover="AnnulerCacher();" onmouseout="CacherDelai();">
	       <ul>
	        <li><a href="#"><img src="menu_1_fichiers/puce.gif" border="0"> Sous-menu 1.1</a></li>
	        <li><a href="#"><img src="menu_1_fichiers/puce.gif" border="0"> Sous-menu 1.2</a></li>
	        <li><a href="#"><img src="menu_1_fichiers/puce.gif" border="0"> Sous-menu 1.3</a></li>
	       </ul>
	      </dd>
	    </dl>
 
 
		 <dl>
	     <dt onmouseover="montre('smenu2');MontrerMenu('smenu2')" onmouseout="CacherDelai();" onclick="montre('smenu2');">Menu 2</dt>
	      <dd style="display: none;" id="smenu2" onmouseover="AnnulerCacher();" onmouseout="CacherDelai();">
	       <ul>
	       	<li><a href="#"><img src="menu_1_fichiers/puce.gif" border="0"> Sous-menu 2.1</a></li>
	       	<li><a href="#"><img src="menu_1_fichiers/puce.gif" border="0"> Sous-menu 2.2</a></li>
	       	<li><a href="#"><img src="menu_1_fichiers/puce.gif" border="0"> Sous-menu 2.3</a></li>
	       	<li><a href="#"><img src="menu_1_fichiers/puce.gif" border="0"> Sous-menu 2.4</a></li>
	        	<li><a href="#"><img src="menu_1_fichiers/puce.gif" border="0"> Sous-menu 2.5</a></li>
	       	<li><a href="#"><img src="menu_1_fichiers/puce.gif" border="0"> Sous-menu 2.6</a></li> 
	       </ul>
	      </dd>
	    </dl>
 
	    <dl>
	     <dt onmouseover="montre('smenu3');MontrerMenu('smenu3')" onmouseout="CacherDelai();" onclick="montre('smenu3');">Menu 3</dt>
	      <dd style="display: none;" id="smenu3" onmouseover="AnnulerCacher();" onmouseout="CacherDelai();">
	       <ul>
	       </ul>
	      </dd>
	    </dl>
 
	  		</td>
	  		</tr>
	 </tbody>
	</table>
</div>

Les onglets (dans un tableau en dessous) :

Code HTML :

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

1
2
3
4
5
6
<tr>
		<th class="select" align="center"><a href="#">Accueil</a></th>
		<th align="center"><a href="#">Onglet 1</a></th>
		<th align="center"><a href="#">Onglet 2</a></th>
		<th align="center"><a href="#">Onglet 3</a></th>
</tr>

2. Le Javascript

La fonction montre() :

Code JS :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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';}
	}

Le fichier menu.js : pris du site http://iubito.free.fr/prog/menu.php. J'ai juste mis en commentaire l'appel de la fonction SelectVisible() dans MontrerMenu() et CacherMenus(). Et le délai est de 50 ms.

En espérant que ça t'éclaire...