11548 sujets

JavaScript, DOM et API Web HTML5

[Résolu] À la recherche du menu vertical parfait...

Après de nombreux topics, de nombreuses erreurs de débutant (tout ceci est visible : ici, ici, ici, ici, ici, ici, et ici, par exemple), et pas mal de sueur, je reste toujours à la recherche du menu vertical parfait. Mes contraintes étaient au fond assez simples :
- un menu largement compatible (surtout FF et IE) ;
- qui puisse s'insérer dans une composition dynamique (SPIP, un PHP-like) ;
- et qui ne génère ni problème de recouvrement (du menu par le sous-menu), ni problème de clignotement (sous FF, lorsque l'on passe sur les éléments du sous-menu).

En essayant de créer quelque chose répondant à toutes ces exigences, et en puisant ici et là dans différents morceaux de codes, j'ai pondu : ce truc là. Mais tout cela reste assez imparfait sous IE (ce n'est pas très "propre", mais bon) et, surtout, cela ne fonctionne pas comme je l'aimerai sous Firefox (menu décalé vers le bas ; pas de sortie du sous-menu vers le bas... ce qui est beaucoup plus gênant).

Bref, une fois de plus -- et avant de faire appel à un extraterrestre pour me sortir de cette usine à gaz --, je cherche quelques conseils pour améliorer le résultat. Ils seront très chaleureusement accueillis.

GS.

p.s. Dans la mesure où je ne sais pas si mon problème est JS ou CSS, je cross-post mon envoi.

p.p.s. Au final, les onmouse... seront "placés" grâce à une fonction.

Annexe : le code.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>
	<head>
		<title>Test menu</title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<script language="javascript">
		<!--
		function faire(disp,evnt)
		{
		objTextA = document.getElementsByTagName('textarea');
		if (evnt.target)
			{
			if (disp == 'block')
				{
				text =	disp
						+ "\t | J'arrive sur : " + evnt.target.className
						+ " | Je viens de : " + evnt.relatedTarget.className
						+ "\n\t | J'arrive sur : " + evnt.target.nodeName
						+ " | Je viens de : " + evnt.relatedTarget.nodeName
						+ "\n";
				var_numero_obj_a_montrer = evnt.target.className.split('_');
				var_id_obj_a_montrer = 'menu_' + var_numero_obj_a_montrer[1];
				var_style_obj_a_montrer = document.getElementById(var_id_obj_a_montrer).style;
					var_style_obj_a_montrer.display = disp;
					var_style_obj_a_montrer.left = '50px';
				objTextA[0].value = objTextA[0].value + "\n" + text;
				}
			if (disp == 'none') 
				{
				text =	disp
						+ "\t | Je sors de : " + evnt.target.className
						+ " | J'arrive sur " + evnt.relatedTarget.className
						+ "\n\t | Je sors de : " + evnt.target.nodeName
						+ " | J'arrive sur : " + evnt.relatedTarget.nodeName
						+ "\n";
				var_numero_obj_sortie = evnt.target.getAttribute('class').split('_');
				var_numero_obj_entree = evnt.relatedTarget.getAttribute('class').split('_');
				if (var_numero_obj_sortie[1] != var_numero_obj_entree[1])
					{
					document.getElementById('menu_' + var_numero_obj_sortie[1]).style.display = disp;
					}
				objTextA[0].value = objTextA[0].value + "\n" + text;
				}
			}
		if (evnt.fromElement)
			{
			if (disp == 'block')
				{
				text =	disp
				+ "\t | Je viens de : " + evnt.fromElement.className
				+ " | J'arrive sur " + evnt.toElement.className
				+ "\n\t | Je viens de : " + evnt.fromElement.nodeName
				+ " | J'arrive sur : " + evnt.toElement.nodeName
				+ "\n";
				var_numero_obj_a_montrer = evnt.toElement.className.split('_');
				var_id_obj_a_montrer = 'menu_' + var_numero_obj_a_montrer[1];
				var_style_obj_a_montrer = document.getElementById(var_id_obj_a_montrer).style;
					var_style_obj_a_montrer.display = disp;
					var_style_obj_a_montrer.left = '50px';
				objTextA[0].value = objTextA[0].value + "\n" + text;
				}
			if (disp == 'none')
				{
				text =	disp
				+ "\t | Je sors de : " + evnt.fromElement.className
				+ " | J'arrive sur " + evnt.toElement.className
				+ "\n\t | Je sors de : " + evnt.fromElement.nodeName
				+ " | J'arrive sur : " + evnt.toElement.nodeName
				+ "\n";
				var_numero_obj_sortie = evnt.fromElement.className.split('_');
				var_numero_obj_entree = evnt.toElement.className.split('_');
				if (var_numero_obj_sortie[1] != var_numero_obj_entree[1])
					{
					document.getElementById('menu_' + var_numero_obj_sortie[1]).style.display = disp;
					}
				objTextA[0].value = objTextA[0].value + "\n" + text;
				}
			}
		}
		-->
		</script>
		<style type="text/css">
		div.menu {
		border:1px solid gray;
		width:200px;
		}
		div.menu div{
		border:1px solid gray;
		display:block;
		margin:0px;
		margin-bottom:3px;
		width:100px;
		}
		div.menu div ul {
		background-color:#00FFFF;
		border:1px solid black;
		display:none;
		list-style-type:none;
		margin:0 0 0 0;
		position:absolute;
		width:170px;
		}
		div.menu div ul li {
		display:block;
		margin:0 0 0 0;
		}
		</style>
</head>

<body>
	<div class="menu">
	
		<div class="menu_11" onMouseOver="faire('block',event)" onMouseOut="faire('none',event)">L&#8217;Institut
		<ul id="menu_11" class="menu_11" onMouseOver="faire('block',event)" onMouseOut="faire('none',event)">		
		
			<li class="menu_11" onMouseOver="faire('block',event)" onMouseOut="faire('none',event)"><a href="#" class="menu_11">Accueil</a></li>
		
			<li class="menu_11" onMouseOver="faire('block',event)" onMouseOut="faire('none',event)"><a href="#" class="menu_11">Annuaire</a></li>
		
		</ul>
		</div>
	
		<div class="menu_1" onMouseOver="faire('block',event)" onMouseOut="faire('none',event)">Les Centres
		<ul id="menu_1" class="menu_1" onMouseOver="faire('block',event)" onMouseOut="faire('none',event)">		
		
			<li class="menu_1" onMouseOver="faire('block',event)" onMouseOut="faire('none',event)"><a href="#" class="menu_1">CHNA</a></li>

		
			<li class="menu_1" onMouseOver="faire('block',event)" onMouseOut="faire('none',event)"><a href="#" class="menu_1">CHRALMI</a></li>
		
			<li class="menu_1" onMouseOver="faire('block',event)" onMouseOut="faire('none',event)"><a href="#" class="menu_1">CHRIC</a></li>
		
			<li class="menu_1" onMouseOver="faire('block',event)" onMouseOut="faire('none',event)"><a href="#" class="menu_1">CRHECC</a></li>
		
			<li class="menu_1" onMouseOver="faire('block',event)" onMouseOut="faire('none',event)"><a href="#" class="menu_1">CRHS</a></li>
		
		</ul>
		</div>
	
		<div class="menu_18" onMouseOver="faire('block',event)" onMouseOut="faire('none',event)">Le Bulletin
		<ul id="menu_18" class="menu_18" onMouseOver="faire('block',event)" onMouseOut="faire('none',event)">		
		
			<li class="menu_18" onMouseOver="faire('block',event)" onMouseOut="faire('none',event)"><a href="#" class="menu_18">Derniers articles</a></li>

		
			<li class="menu_18" onMouseOver="faire('block',event)" onMouseOut="faire('none',event)"><a href="#" class="menu_18">Tous les bulletins</a></li>
		
			<li class="menu_18" onMouseOver="faire('block',event)" onMouseOut="faire('none',event)"><a href="#" class="menu_18">Thèmes</a></li>
		
		</ul>
		</div>
	
		<div class="menu_14" onMouseOver="faire('block',event)" onMouseOut="faire('none',event)">Outils
		<ul id="menu_14" class="menu_14" onMouseOver="faire('block',event)" onMouseOut="faire('none',event)">		
		
			<li class="menu_14" onMouseOver="faire('block',event)" onMouseOut="faire('none',event)"><a href="#" class="menu_14">Annuaire</a></li>
		
			<li class="menu_14" onMouseOver="faire('block',event)" onMouseOut="faire('none',event)"><a href="#" class="menu_14">Rech. biblio</a></li>

		
			<li class="menu_14" onMouseOver="faire('block',event)" onMouseOut="faire('none',event)"><a href="#" class="menu_14">Sites internet</a></li>
		
		</ul>
		</div>
	
		<div class="menu_22" onMouseOver="faire('block',event)" onMouseOut="faire('none',event)">Actualité
		<ul id="menu_22" class="menu_22" onMouseOver="faire('block',event)" onMouseOut="faire('none',event)">		
		
			<li class="menu_22" onMouseOver="faire('block',event)" onMouseOut="faire('none',event)"><a href="#" class="menu_22">Brèves</a></li>
		
			<li class="menu_22" onMouseOver="faire('block',event)" onMouseOut="faire('none',event)"><a href="#" class="menu_22">Colloques</a></li>
		
		</ul>

		</div>
	
		<div class="menu_7" onMouseOver="faire('block',event)" onMouseOut="faire('none',event)">Le DEA
		<ul id="menu_7" class="menu_7" onMouseOver="faire('block',event)" onMouseOut="faire('none',event)">		
		
			<li class="menu_7" onMouseOver="faire('block',event)" onMouseOut="faire('none',event)"><a href="#" class="menu_7">Présentation</a></li>
		
			<li class="menu_7" onMouseOver="faire('block',event)" onMouseOut="faire('none',event)"><a href="#" class="menu_7">Informations</a></li>
		
			<li class="menu_7" onMouseOver="faire('block',event)" onMouseOut="faire('none',event)"><a href="#" class="menu_7">Enseignements</a></li>
		
		</ul>
		</div>

	
	</div>
	<br><br>
	<TEXTAREA cols="70" rows="20">Résultat</TEXTAREA>
</body>
</html>

Modifié le 12 Dec 2004 - 15:26
Administrateur
gsaunier a écrit :
je reste toujours à la recherche du menu vertical parfait.

Très simple : le menu vertical parfait n'est pas déroulant Smiley cligne
Avoir un comportement d'affichage dynamique sur un menu implique toujours un minimum de problèmes d'ergonomie et d'accessibilité.
Raphaël,

Tu me fends le coeur...

Sérieusement (le pire c'est que je pense que tu es sérieux, vu les difficultés que j'ai rencontrées), qu'est-ce qui cloche ? Pourquoi, sous FF, la sortie du sous-menu est-elle aussi mauvaise ?

GS.
Sujet clos
Aller à