28217 sujets

CSS et mise en forme, CSS3

Menu vertical : un mauvais rendu

Bonjour,

J'essaie d'utiliser un menu javascript/CSS vertical. Mais le rendu (que l'on peut voir ici), n'est pas bon : sous Firefox, au passage de la souris, il y a un effet de clignotement ; les sous-menus peuvent ne pas s'effacer correctement.

Voici le code java :



function montre(id) {
   if (document.getElementById) {
    document.getElementById(id).style.display="block";
  } else if (document.all) {
    document.all[i d].style.display="block";
  } else if (document.layers) {
    document.layers[i d].display="block";
  } } 
 
 function cache(id) {
   if (document.getElementById) {
    document.getElementById(id).style.display="none";
  } else if (document.all) {
    document.all[i d].style.display="none";
  } else if (document.layers) {
    document.layers[i d].display="none";
  }
  }


Le CSS :

	.menu {
		border: 1px solid gray;
		float:left;
		position: relative;
		width:170px;
		}

	.menu DL {
		margin-left:auto;
		margin-right:auto;
		width:160px;
		z-index:1;
		}

	.menu DT {
		background:#CDCDCD;
		border:1px solid gray;
		cursor:pointer;
		height:20px;
		line-height: 20px;
		margin:2px 0;
		padding:0 0 0 3px;
		z-index:1;
		}

	.menu DD {
		background:#CDCDCD;
		border:1px solid gray;
		display:none;
		left:100px;
		margin-top:-7px;
		position: absolute;
		width:160px;
		z-index: 100;
		}

	.menu UL {
		list-style-type: none;
		margin: 0;
		padding: 2px;
		}

	.menu LI {
		height: 18px;
		line-height: 18px;
		margin:0 3px 0 3px;
		}

	.menu LI A, .menu DT A {
		font-style:normal;
		text-decoration: none;
		}

	.menu FORM{
		background-color: #f2f2f2;
		border: 1px solid #909090;
		color: #505030;
		font-family: Verdana;
		font-weight: normal;
		margin-top:5px;
		width:160px;
		}


Le HTML simplifié (avec boucle SPIP [type PHP]) :

<div class="menu">
<dl>
	<BOUCLE_menu_rubrique(RUBRIQUES){meme_parent}{par num titre}>
	<dt onmouseover="javascript:montre('smenu[(#ID_RUBRIQUE)]');" onmouseout="javascript:cache('smenu[(#ID_RUBRIQUE)]');"><a href="[(#URL_RUBRIQUE)]">[(#TITRE|supprimer_numero)]</a></dt>
	<dd id="smenu[(#ID_RUBRIQUE)]" onmouseover="javascript:montre('smenu[(#ID_RUBRIQUE)]');" onmouseout="javascript:cache('smenu[(#ID_RUBRIQUE)]');">
		<ul>
		<BOUCLE_menu_ssrubrique(RUBRIQUES){id_parent}>				
			<li><a href="[(#URL_RUBRIQUE)]">[(#TITRE|supprimer_numero)]</a></li>
		</BOUCLE_menu_ssrubrique>
		</ul>
	</dd>
	</BOUCLE_menu_rubrique>
</dl>
<form action="recherche.php3" method="get">
	<input type="text" name="recherche" size="15" maxlength="50">
	<input type="submit" value="ok">
</form>
</div>


J'ai réalisé pas mal de tests. Rien de bien concluant.

Des idées pour améliorer ?

Cordialement,

GS.
Modifié le 26 Nov 2004 - 09:29
Re-Bonjour,
Je prends le risque de faire remonter ce "post" dans la pile. Une petite idée sur mon problème ? Faut-il que j'ajoute un complément d'information ?

Cordialement,

GS.
Bon... je cross-post sur "DOM, JavaScript, ECMAScript". Est-ce une procédure tolérée sur Alsacréation ?
Sujet clos
Aller à