Demande d'avis sur menu dynamique

Question

drix

6 Jun 2005 à 00:18

Je sais pas trop si c'est ici que je dois poster ça mais bon...

Voilà, j'ai fais un menu dynamique (mon premier) et j'aimerai savoir s'il est conforme aux standards et connaître sa compatibilité avec les navigateurs, et éventuellement réparer des bugs. Je sais en tout cas que les menus déroulants marchent qu'à partir IE5+ et N6+ puisque j'utilise le DOM javascript. Pour les autres navigateurs, je ne sais pas trop.

PS: je n'utilise que des "em" pour les dimensions du menu, je fais comment pour connaître la hauteur exacte du menu? (Pour le placement du texte de la div du dessous et aussi pour définir le height du div du menu, utile seulement pour N6 apparemment qui par défaut me met une hauteur nulle.). J'ai mis 2.1 un peu au pif, ça à l'air d'être ça (sauf pour opera 7 qui déborde un peu), mais j'aimerai savoir pourquoi...

Code html:


<?xml version="1.0" encoding="iso-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
	<title>test</title>
	<link rel="stylesheet" rev="stylesheet" href="style.css" type="text/css" media="screen" charset="iso-8859-1" />
	<script type="text/javascript" src="menu.js"></script>
</head>
<body onload="loadMenu();">
	<div id="global">
		<div id="header">
			<p>En-tête</p>
		</div>
		<div id="menu">
			<p>
				<a href="#">Accueil</a>
			</p>
			<p>
				<a href="#">Test</a>
			</p>
			<ul>
				<li><a href="#">test</a></li>
				<li><a href="#">test</a></li>
				<li><a href="#">test</a></li>
			</ul>
			<p>
				<a href="#">Test</a>
			</p>
			<ul>
				<li><a href="#">test</a></li>
				<li><a href="#">test</a></li>
				<li><a href="#">test</a></li>
				<li><a href="#">test</a></li>
				<li><a href="#">test</a></li>
				<li><a href="#">test</a></li>
				<li><a href="#">test</a></li>
				<li><a href="#">test</a></li>
				<li><a href="#">test</a></li>
			</ul>
			<p>
				<a href="#">Test</a>
			</p>
			<ul>
				<li><a href="#">test</a></li>
				<li><a href="#">test</a></li>
				<li><a href="#">test</a></li>
				<li><a href="#">test</a></li>
				<li><a href="#">test</a></li>
			</ul>
			<p>
				<a href="#">Test</a>
			</p>
			<ul>
				<li><a href="#">test</a></li>
				<li><a href="#">test</a></li>
				<li><a href="#">test</a></li>
				<li><a href="#">test</a></li>
				<li><a href="#">test</a></li>
				<li><a href="#">test</a></li>
			</ul>
		</div>
		<div id="content">
			<p>Contenu</p>
		</div>
	</div>
</body>
</html>

Code CSS:


*
{
	margin: 0;
	padding: 0;
	border: 0;
}

body
{
	font: 75%/1em Arial, Helvetica, sans-serif;
	text-align: center;
}

/*-----------------------------------------------
// Conteneur
//---------------------------------------------*/

#global
{
	position: relative;
	margin-left: auto;
	margin-right: auto;
	width: 90%;
	text-align: justify;
	border: 2px solid #000;
}

/*-----------------------------------------------
// En-tête
//---------------------------------------------*/

#header
{
	padding: 1em;
	background-color: #EEE;
}

/*-----------------------------------------------
// Menu
//---------------------------------------------*/

#menu
{
	position: absolute;
	height: 2.1em;
	width: 100%;
	font: 0.8em Verdana, sans-serif;
	background-color: #AAA;
}

#menu p
{
	float: left;
	width: 7em;
	text-align: center;
}

#menu p a
{
	display: block;
	height: auto;
	width: 100%;
	padding: 0.4em 0;
	border-right: 1px solid #8e9ba2;
}

#menu p a:link,
#menu p a:visited,
#menu p a:active
{
	color: #fff;
	text-decoration: none;
}

#menu p:hover,
#menu p a:hover,
#menu p a:focus
{
	color: #fff;
	text-decoration: none;
	background-color: #8e9ba2;
}

#menu ul
{
	position: absolute;
	display: none;
	width: 10em;
        top: 2.2em;
	padding: 0.3em 0.2em;
	border-top: 1px solid #666;
	border-right: 1px solid #333;
	border-bottom: 1px solid #333;
	border-left: 1px solid #666;
	list-style: none;
	background-color: #888;
	filter: alpha(opacity=80);
	-moz-opacity: 0.8;
	opacity: 0.8;
        z-index: 2;
}

#menu li a
{
	display: block;
	border: 0;
	/*margin: 0 0.2em;*/
	padding: 0.2em 0.4em;
}

/* Pour IE */
* html #menu li a
{
	width: 100%;
}


#menu li a:link,
#menu li a:visited,
#menu li a:active
{
	color: #fff;
	text-decoration: none;
}

#menu li:hover,
#menu li a:hover,
#menu li a:focus
{
	color: #fff;
	text-decoration: none;
	background-color: #8e9ba2;
	background-image: none;
}

/*-----------------------------------------------
// Contenu
//---------------------------------------------*/

#content
{
	padding: 2.6em 1em 1em 1em;
	background-color: #EEE;
}

Code Javascript:


// Déclaration des variables
var timeout;
var menu = new Array();
var subMenu = new Array();

function loadMenu()
{
	if( document.getElementById( "menu" ) )
	{
		var count = 0;
		var lastMenu;

		for( var elem = document.getElementById( "menu" ).firstChild; elem != null; elem = elem.nextSibling )
		{
			if( ( elem.nodeType == 1 ) && ( elem.tagName == 'P') )
			{
				menu[count] = elem;

				// Gestionnaire d'événements

				menu[count].onmouseover = displayMenu;
				menu[count].onmouseout = delayMenu;

				// Incrémentation du compteur

				count++;
			}
			else if( ( elem.nodeType == 1 ) && ( elem.tagName == 'UL') )
			{
				subMenu[count - 1] = elem;

				// Positionnement

				elem.style.left = ((count - 1) * 7) + "em";

				// Gestionnaire d'événements

				for( var node = menu[count - 1].firstChild; node != null; node = node.nextSibling )
				{
					if( ( node.nodeType == 1 ) && ( node.tagName == 'A' ) )
					{
						node.onmouseover = displayMenu;
					}
				}
				elem.onmouseover = cancelMenu;
				elem.onmouseout = delayMenu;
			}
		}
	}
}

function displayMenu(event)
{
	cancelMenu();
	hideMenu();

	for (var i = 0; menu[ i ] != null; i++)
	{
		for( var node = menu[ i ].firstChild; node != null; node = node.nextSibling )
		{
			if( ( node.nodeType == 1 ) && ( node.tagName == 'A' ) )
			{
				elem = node;
			}
		}

		if( this == menu[ i ] || this == elem )
		{
			if ( subMenu[ i ] != null )
			{
				subMenu[ i ].style.display = "block";
			}

			// On a trouvé à quoi correspondait this, on sort donc de la boucle
			i = -2;
		}
	}
}


function hideMenu(event)
{
	for (var i = 0; menu[ i ] != null; i++)
	{
		if ( subMenu[ i ] != null )
		{
			subMenu[ i ].style.display = "none";
		}
	}
}

function delayMenu(event)
{
	timeout = setTimeout('hideMenu()', 500);
}

function cancelMenu(event)
{
	clearTimeout(timeout);
}

Modifié par drix (06 Jun 2005 - 00:41)

Raphael

Administrateur

6 Jun 2005 à 09:58

Bonjour à toi aussi.

Puisque ce n'est pas une question d'ergonomie ou d'esthétique, ce sujet est en effet dans le mauvais salon.
Le déplace dans le salon Général.

Sujet clos