11548 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Marges négatives dans un menu déroulant horizontal Javascript

Bonjour, j'ai mis ce sujet dans la partie consacrée au javascript mais il peut également aller dans la partie CSS.

Comme mon titre l'indique, je cherche une alternative ou bien tout ce qui pourra me faire avancer sur ma problématique :

Un menu déroulant horizontal (géré par du Javascript) pour lequel je n'arrive pas à positionner l'affichage du sous-menu.

Voici un exemple en ligne qui sera plus parlant : http://www.art-its.fr/menumenu/

Dans cet exemple, le sous menu pour la catégorie 1 et la catégorie 2 à le positionnement que je souhaite. C'est en utilisant les marges négatives que j'obtiens ce résultat (qui plus est bancal car selon les navigateurs et les OS il diffère de quelques pixels chose très génante).
Existe t'il un "autre" moyen que les marges négatives voire une solution différente au problème ?

Voici le code pour une meilleure compréhension.


<div id="menu>
<dl><dt><a href="#">Accueil</a></dt></dl>
	<dl><dt>|</dt></dl>	 
	<dl>			
	    <dt onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre('');"><a href="#">Catégorie 1</a></dt>

	    		
	            <dd id="smenu1" onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre('');">
	                
	                <ul>
	                    <li><a href="#" title="Sous-Catégorie 1">Sous-Catégorie 11</a></li>
	                    <li><a href="#" title="Sous-Catégorie 2">Sous-Catégorie 12</a></li>
	                </ul>
	                
	            </dd>
	</dl>

 	<dl><dt>|</dt></dl>
	<dl>			
	    <dt onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre('');"><a href="#">Catégorie 2</a></dt>

	    		
	            <dd id="smenu2" onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre('');">
	                
	                <ul>
	                    <li><a href="#" title="Sous-Catégorie 1">Sous-Catégorie 21</a></li>
	                    <li><a href="#" title="Sous-Catégorie 2">Sous-Catégorie 22</a></li>
	                    <li><a href="#" title="Sous-Catégorie 2">Sous-Catégorie 23</a></li>
	                    <li><a href="#" title="Sous-Catégorie 2">Sous-Catégorie 24</a></li>
	                    <li><a href="#" title="Sous-Catégorie 2">Sous-Catégorie 25</a></li>
	                </ul>
	                
	            </dd>
	</dl>
	<dl><dt>|</dt></dl>
	<dl><dt><a href="#">Catégorie 3</a></dt></dl>
	<dl><dt>|</dt></dl>
	<dl>			
	    <dt onmouseover="javascript:montre('smenu4');" onmouseout="javascript:montre('');"><a href="#">Catégorie 4</a></dt>

	    		
	            <dd id="smenu4" onmouseover="javascript:montre('smenu4');" onmouseout="javascript:montre('');">
	                
	                <ul>
	                    <li><a href="#" title="Sous-Catégorie 1">Sous-Catégorie 41</a></li>
	                    <li><a href="#" title="Sous-Catégorie 2">Sous-Catégorie 42</a></li>
	                    <li><a href="#" title="Sous-Catégorie 2">Sous-Catégorie 43</a></li>
	                    <li><a href="#" title="Sous-Catégorie 2">Sous-Catégorie 44</a></li>
	                    <li><a href="#" title="Sous-Catégorie 2">Sous-Catégorie 45</a></li>
	                    <li><a href="#" title="Sous-Catégorie 2">Sous-Catégorie 46</a></li>
	                    <li><a href="#" title="Sous-Catégorie 2">Sous-Catégorie 47</a></li>
	                    
	                </ul>
	                
	            </dd>
	</dl>
	<dl><dt>|</dt></dl>
	<dl>			
	    <dt onmouseover="javascript:montre('smenu5');" onmouseout="javascript:montre('');"><a href="#">Catégorie 5</a></dt>

	    		
	            <dd id="smenu5" onmouseover="javascript:montre('smenu5');" onmouseout="javascript:montre('');">
	                
	                <ul>
	                    <li><a href="#" title="Sous-Catégorie 1">Sous-Catégorie 51</a></li>
	                    <li><a href="#" title="Sous-Catégorie 2">Sous-Catégorie 52</a></li>
	                    <li><a href="#" title="Sous-Catégorie 2">Sous-Catégorie 53</a></li>
	                    <li><a href="#" title="Sous-Catégorie 2">Sous-Catégorie 54</a></li>
	                    <li><a href="#" title="Sous-Catégorie 2">Sous-Catégorie 55</a></li>
	                    <li><a href="#" title="Sous-Catégorie 2">Sous-Catégorie 56</a></li>
	                    <li><a href="#" title="Sous-Catégorie 2">Sous-Catégorie 57</a></li>
	                    
	                </ul>
	                
	            </dd>
	</dl>
	<dl><dt>|</dt></dl>
	<dl>			
	    <dt onmouseover="javascript:montre('smenu6');" onmouseout="javascript:montre('');"><a href="#">Catégorie 6</a></dt>

	    		
	            <dd id="smenu6" onmouseover="javascript:montre('smenu6');" onmouseout="javascript:montre('');">
	                
	                <ul>
	                    <li><a href="#" title="Sous-Catégorie 1">Sous-Catégorie 61</a></li>
	                    <li><a href="#" title="Sous-Catégorie 2">Sous-Catégorie 62</a></li>
	                    <li><a href="#" title="Sous-Catégorie 2">Sous-Catégorie 63</a></li>
	                    <li><a href="#" title="Sous-Catégorie 2">Sous-Catégorie 64</a></li>
	                    <li><a href="#" title="Sous-Catégorie 2">Sous-Catégorie 65</a></li>
	                    <li><a href="#" title="Sous-Catégorie 2">Sous-Catégorie 66</a></li>
	                    <li><a href="#" title="Sous-Catégorie 2">Sous-Catégorie 67</a></li>
	                    
	                </ul>
	                
	            </dd>
	</dl>
</div>





/* CSS Document */
/*********************** BODY ************************/
#menu, #menu ul, #menu dl, #menu dl a, #menu dl li, #menu dt, #menu dd, #menu dd li a, #menu dd ul a {margin:0;padding:0;}

#menu{padding:0 0 20px 0;background:white url(../images/bg-menu.jpg) no-repeat;height:20px;width:100%;float:left;}





#menu dl{margin:3px 0 0 0;}
#menu dl, #menu ul a{list-style-type:none;font-size:.8em;font-family:Arial,Helvetica,FreeSans,sans-serif;text-transform: uppercase;}

#menu dt a{color:white;text-decoration:none;padding:0 8px;height:20px;}
#menu dt a:hover{color:#C4121E;text-decoration:none;}

#menu dl {float: left;text-align:center;}
#menu dt {cursor: pointer;}


#menu dd {margin:0;padding:0px;position:absolute;width:926px;text-align:left;height:20px;}
#menu dd ul{list-style-type:none;width:926px;display:block;height:20px;}
#menu dd li{display:inline;padding:0 4px; }


/* Position des sous menus */

#smenu1 ul{margin:2px 0 0 -74px;list-style-type:none;background:yellow;}
#smenu2 ul{margin:2px 0 0 -179px;list-style-type:none;background:aqua;}
#smenu4 ul{margin:2px 0 0 -388px;list-style-type:none;background:green;}
#smenu5 ul{margin:2px 0 0 -492px;list-style-type:none;background:pink;}





<script type="text/javascript">
<!--
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>

Modifié par Nicozen (14 Oct 2009 - 15:06)
Après moultes essais, j'ai abandonné la construction du sous menu en dl>dt>dd pour le remplacer par une div contenant le sous menu.
Cela fonctionne, il n'y a plus de problème de décalage, et tous les navigateurs affichent correctement le menu (IE6/7, Firefox, Safari, Chrome, Opéra).

Je vous joint le code (le javascript ne change pas) :





<div id="menu">
 <dl><dt><a href="#">Accueil</a></dt></dl>
	
	<dl><dt>|</dt></dl>	 
	
	<dl><dt onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre('');"><a href="#">Catégorie 1</a></dt></dl>

 	<dl><dt>|</dt></dl>
	
	<dl><dt onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre('');"><a href="#">Catégorie 2</a></dt></dl>
	
	<dl><dt>|</dt></dl>
	
	<dl><dt><a href="#">Catégorie 3</a></dt></dl>
	
	<dl><dt>|</dt></dl>
	
	<dl><dt onmouseover="javascript:montre('smenu4');" onmouseout="javascript:montre('');"><a href="#">Catégorie 4</a></dt></dl>
	
	<dl><dt>|</dt></dl>
	
	<dl><dt onmouseover="javascript:montre('smenu5');" onmouseout="javascript:montre('');"><a href="#">Catégorie 5</a></dt></dl>
	
	<dl><dt>|</dt></dl>
	
	<dl><dt onmouseover="javascript:montre('smenu6');" onmouseout="javascript:montre('');"><a href="#">Catégorie 6</a></dt></dl>
	
	
	
	
	<!-- debut des sous menus -->
	
	<div id="smenu1" class="sous_menu" onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre('');">
		             
		                <ul>
		                    <li><a href="#" title="Sous-Catégorie 1">Sous-Catégorie 11</a></li>
		                    <li><a href="#" title="Sous-Catégorie 2">Sous-Catégorie 12</a></li>
		                </ul>
	
	</div>
	
	 <div id="smenu2" class="sous_menu" onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre('');">
	                
	                <ul>
	                    <li><a href="#" title="Sous-Catégorie 1">Sous-Catégorie 21</a></li>
	                    <li><a href="#" title="Sous-Catégorie 2">Sous-Catégorie 22</a></li>
	                    <li><a href="#" title="Sous-Catégorie 2">Sous-Catégorie 23</a></li>
	                    <li><a href="#" title="Sous-Catégorie 2">Sous-Catégorie 24</a></li>
	                    <li><a href="#" title="Sous-Catégorie 2">Sous-Catégorie 25</a></li>
	                </ul>
	                
	 </div>
	 
	 
	  <div id="smenu4" class="sous_menu" onmouseover="javascript:montre('smenu4');" onmouseout="javascript:montre('');">
	                
	                <ul>
	                    <li><a href="#" title="Sous-Catégorie 1">Sous-Catégorie 41</a></li>
	                    <li><a href="#" title="Sous-Catégorie 2">Sous-Catégorie 42</a></li>
	                    <li><a href="#" title="Sous-Catégorie 2">Sous-Catégorie 43</a></li>
	                    <li><a href="#" title="Sous-Catégorie 2">Sous-Catégorie 44</a></li>
	                    <li><a href="#" title="Sous-Catégorie 2">Sous-Catégorie 45</a></li>
	                    <li><a href="#" title="Sous-Catégorie 2">Sous-Catégorie 46</a></li>
	                    <li><a href="#" title="Sous-Catégorie 2">Sous-Catégorie 47</a></li>
	                    
	                </ul>
	                
	  </div>
	  
	  
	  
	   <div id="smenu5" class="sous_menu" onmouseover="javascript:montre('smenu5');" onmouseout="javascript:montre('');">
	                
	                <ul>
	                    <li><a href="#" title="Sous-Catégorie 1">Sous-Catégorie 51</a></li>
	                    <li><a href="#" title="Sous-Catégorie 2">Sous-Catégorie 52</a></li>
	                    <li><a href="#" title="Sous-Catégorie 2">Sous-Catégorie 53</a></li>
	                    <li><a href="#" title="Sous-Catégorie 2">Sous-Catégorie 54</a></li>
	                    <li><a href="#" title="Sous-Catégorie 2">Sous-Catégorie 55</a></li>
	                
	                    
	                </ul>
	                
	    </div>
	
		 <div id="smenu6" class="sous_menu" onmouseover="javascript:montre('smenu6');" onmouseout="javascript:montre('');">
	                
	                <ul>
	                    <li><a href="#" title="Sous-Catégorie 1">Sous-Catégorie 61</a></li>
	                    <li><a href="#" title="Sous-Catégorie 2">Sous-Catégorie 62</a></li>
	                    <li><a href="#" title="Sous-Catégorie 2">Sous-Catégorie 63</a></li>
	                    <li><a href="#" title="Sous-Catégorie 2">Sous-Catégorie 64</a></li>
	                    <li><a href="#" title="Sous-Catégorie 2">Sous-Catégorie 65</a></li>
	                    <li><a href="#" title="Sous-Catégorie 2">Sous-Catégorie 66</a></li>
	                    <li><a href="#" title="Sous-Catégorie 2">Sous-Catégorie 67</a></li>
	                   
	                </ul>
	                
	     </div>
</div>








/* Menu positionnement*/
#menu, #menu ul, #menu dl, #menu dl a, #menu dl li, #menu dt, #menu dd, #menu dd li a, #menu dd ul a {margin:0;padding:0;}

#menu{padding:0 0 20px 0;background:white url(../images/bg-menu.jpg) no-repeat;height:20px;width:100%;float:left;}




/*Menu principal */
#menu dl{margin:3px 0 0 0;}
#menu dl, #menu ul a{list-style-type:none;font-size:.8em;font-family:Arial,Helvetica,FreeSans,sans-serif;text-transform: uppercase;}

#menu dt a{color:white;text-decoration:none;padding:0 8px;height:20px;}
#menu dt a:hover{color:#C4121E;text-decoration:none;}

#menu dl {float: left;text-align:center;}
#menu dt {cursor: pointer;}



/* Sous menus */
#menu .sous_menu ul{list-style-type:none;width:926px;display:block;height:20px;}
#menu .sous_menu li{display:inline;padding:0 4px; }
#menu .sous_menu a{color:white;text-decoration:none;padding:0 8px;height:20px;}
#menu .sous_menu a:hover{color:#C4121E;text-decoration:none;}


#smenu1 {float:left;width:926px;background:yellow;height:20px;}
#smenu2 {float:left;width:926px;background:pink;height:20px;}
#smenu4 {float:left;width:926px;background:aqua;height:20px;}
#smenu5 {float:left;width:926px;background:purple;height:20px;}
#smenu6 {float:left;width:926px;background:olive;height:20px;}



Je profite de cette parution pour demander quelques conseils dans l'optimisation de ce code, des critiques aident souvent à progresser et à constater des "erreurs" que l'on ne voit pas quand on a trop la tête dans le guidon.
Sujet clos
Aller à