Pourquoi devrait-on utiliser une liste pour créer un menu ?

Bonjour,

Je me pose une question : compte tenu des difficultés que j'ai à créer un menu dynamique qui fonctionne comme je le veux (les menus d'Alsa ne prennent pas en compte le fait que IE se moque du display block dans les listes, et les astuces trouvées de ci de là me semblent fragiles, en terme de perrenité : un hack fonctionnera t-il toujours sur les prochaines versions de navigateurs...), et compte tenu du fait que la non utilisation d'une liste résoud tous mes problèmes, je me demande pourquoi ma solution ne serait-elle pas correcte ?

Qui a décrété qu'il fallait créer les menus sous forme de liste ? Surtout que dans mon cas, mon menu ne contient qu'un seul niveau, je n'ai donc pas besoins de hierarchiser les données.

A priori, et dites-moi si je me trompe, mais des liens placés les uns sous les autres ne me semblent pas moins accessibles qu'une liste.

Voici comment je pourrais faire mon menu :

<div id="menu"><p><strong>Menu 1</strong><br />
<a href="">Sous-menu 1</a><br />
<a href="">Sous-menu 2</a><br />
<a href="">Sous-menu 3</a></p>
<p><strong>Menu 2</strong><br />
<a href="">Sous-menu 2.1</a><br />
<a href="">Sous-menu 2.2</a><br />
<a href="">Sous-menu 2.3</a></p>
</div>

La sémantique est-elle mauvaise, et pourquoi ?

Edition :

En fait, comme je veux pouvoir afficher dynamiquement les sous-menu au passage de la souris sur les menus, les sous-menus devraient être dans un div, ou un p, indépendant du menu lui-même.
Modifié par Francois-Pierre (22 May 2006 - 15:25)

En fait, je me demande (et ce n'est pas une provocation ! ), si un tableau n'est pas adapté à ce type d'utilisation...

Il permet de regrouper des données liées, qui ne devraient aucunement être divisées les unes des autres.

Que le menu soit horizontal (1 tableau d'une ligne et plusieurs colonnes) ou vertical (1 colonne et plusieurs lignes), on voit bien ici que le tableau permet un affichage conforme avec ce que l'on a pour habitude de voir, en terme d'apparence, de structuration des différents liens que compose un menu.

Sémantiquement, j'ai tout faux ou pas, d'après vous ?

Des sites sont construits comme cela, et ils fonctionnent toujours, après avoir vu passer plusieurs génératuions de navigateurs. Qu'en sera t-il des solutions proposées aujourd'hui ?

Et même si sémantiquement, on est un p'tit peu moin bon, la pérennité ne justifie t-elle pas l'emploi d'une solution peut-être plus robuste, à partir du moment où l'accessibilité n'est pas remise en cause ?
Modifié par Francois-Pierre (22 May 2006 - 15:53)

Un tableau à une seule colonne, ou une seule ligne, j'appelle ça une liste

Sérieusement, un tableau est un dispositif à double entrée, ce qui n'est pas le cas d'un menu, qui est plutôt hierarchisé (où est mon dictionnaire ?).

La liste (ou plutôt plusieurs listes imbriquées) est ce qui se rapprochent le plus de l'arborescence (mais où est ce put*** de dico ???) d'un site web. Sémantiquement, c'est bien plus logique d'utiliser une liste qu'un tableau.

Maintenant, si, pour des raisons techniques, l'emploi des listes est impossible, utilise autre chose ! Mais les tableaux ne sont pas la meilleure solution, ni la seule. Quid des listes de définition, par exemple ?

Merci pour ta réponse.

En fait, si je me pose la question, c'est qu'on s'entête tous à utiliser des listes, alors qu'il semble impossible de créer un menu "parfait" compatible avec l'ensemble des navigateurs.

Et j'en ai lu, des articles :

ibilab
Michel Deboom
Alsa

Mais au prix de bidouilles que je ne préfère pas insérer dans mes pages. Pourquoi ne pas attendre que tout cela mûrisse davantage, et utiliser d'autres structures, comme les tableaux, ou de simples div...
Modifié par Francois-Pierre (22 May 2006 - 16:15)

Bonjour Francois Pierre, alors
pour moi, une enumération d'items, qu'ils soient ordonnés ou non, comme c'est le cas pour un menu, c'est lister ces éléments. C'est pourquoi une liste est à mon sens logique.

a écrit :
je n'ai donc pas besoins de hierarchiser les données.

D'ou l'utilité des listes non ordonnés <ul> (unordened list)

a écrit :
La sémantique est-elle mauvaise, et pourquoi ?

Pour moi oui, puisque tu fais un retour a la ligne, ce qui s'apparente a de la mise en page alors que tu proposes ici un contenu. Et si du jour au lendemain ton menu doit etre horizontal ?

a écrit :
Il permet de regrouper des données liées, qui ne devraient aucunement être divisées les unes des autres.

D'ou l'utilité d'une liste

a écrit :
Que le menu soit horizontal (1 tableau d'une ligne et plusieurs colonnes) ou vertical (1 colonne et plusieurs lignes), on voit bien ici que le tableau permet un affichage conforme avec ce que l'on a pour habitude de voir, en terme d'apparence, de structuration des différents liens que compose un menu.

Et comment tu transformes le menu en vertical vers horizontal sans toucher à ce qui sert a afficher les informations sans les mettre en forme ? Tu peux pas, tu devras modifié ton tableau, ce qui est sémantiquement illogique.

a écrit :
Des sites sont construits comme cela, et ils fonctionnent toujours, après avoir vu passer plusieurs génératuions de navigateurs

Oui mais en raisonnant comme ça, on se retrouve avec 95% de sites tablefull, validité nulle, accessibilité aucune, etc etc, c'est vrai que c'est pas loin de la vérité, mais ce forum a aussi pour but de la changer non ?

Et même si sémantiquement, on est un p'tit peu moin bon, la pérennité ne justifie t-elle pas l'emploi d'une solution peut-être plus robuste, à partir du moment où l'accessibilité n'est pas remise en cause ?

Et la maintenabilité, la légereté et la souplesse ?

Tu devrais nous montrer ton menu qu'on voit ce qu'il t'empeche de faire une liste.

A+
Modifié par broadcastor (22 May 2006 - 16:26)

Je suis bien d'accord avec toi : je n'aime pas non plus utiliser des hacks & autres bricolages.

Seulement, ce n'est pas la sémantique l'origine du problème, ce sont les navigateurs. On ne peut pas changer le sens de nos pages parce qu'IE6- est un navigateur pourri (laissons le bénéfice du doute à IE7 ). Si on laisse tous tomber les listes en attendant d'avoir un support correct de tous les navigateurs, c'est pas demain la veille qu'on obtiendra quoi que ce soit

Si je devais me passer de toutes les propriétés & balises qui ne sont pas correctement interprétées par TOUS les navigateurs, qu'est-ce qu'il me reste ? Le HTML 3e du nom, et les mises en page full table. Bienvenue à l'âge du bouton fluo clignonant !

En général, on boycotte les méchants, pas les gentils.

Sopo a écrit :
En général, on boycotte les méchants, pas les gentils.

Oui, mais il se trouve que le méchant est, de loin, le plus utilisé

Effectivement, le côté séparation de la mise en forme et du contenu est un vrai argument en faveur de l'emploi des liste.

Ce que je n'arrive pas à faire ?

----------
   test   
----------
   test   
----------
   test   
----------
   test   
----------

Ci-dessus, un menu. Avec IE, si je place la souris à droite de "test", rien ne se passe. IE "trouve" le lien que si le curseur pase sur le mot "test".

Autrement dit, il se moque de :

li a{
display:block;
}

Le hover n'est pris en compte qu'au survol du texte du lien.

Les menus proposés par Alsa ne tiennent pas compte de cela. Et les autres liens mentionnés plus haut se servent de subterfuges que je ne souhaite pas utiliser...
Modifié par Francois-Pierre (22 May 2006 - 16:39)

Et si tu entoures ton "lien" par <li><a><span>lien</span></a></li>
en spécifiant une largeur de 100% pour le span ?

Et non, malheureusement... Cela ne change rien sous IE

écris simplement

li a {
    display: block;
    width: 100%;
}

et ça devrait passer sous IE aussi.

Francois-Pierre a écrit :

Ci-dessus, un menu. Avec IE, si je place la souris à droite de "test", rien ne se passe. IE "trouve" le lien que si le curseur pase sur le mot "test".

Autrement dit, il se moque de :

li a{
display:block;
}

Le hover n'est pris en compte qu'au survol du texte du lien.

Les menus proposés par Alsa ne tiennent pas compte de cela. Et les autres liens mentionnés plus haut se servent de subterfuges que je ne souhaite pas utiliser...

Un commentaire conditionnel n'est pas un subterfuge .
Les problèmes de layout peuvent aussi apparaitre dans un tableau

Sopo > non, cela ne fonctionne toujours pas....

chmel > désolé, je ne voulais vexer personne !

Ton lien est intéressant, je ne le connaissait pas.

Pour ce qui est des menus verticaux avec tableaux, j'en ai vue fonctionner sans problème

montre ton code, parce qu'avec un width ou un height, ça doit marcher.

Ca marche chez moi pourtant !

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
	<head>
		<title>Liste</title>
		<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
	</head>
	<body>
		<ul id="navigation">
			<li><a href="test.html" title="test">Test</a></li>
			<li><a href="test.html" title="test">Test</a></li>
			<li><a href="test.html" title="test">Test</a></li>
			<li><a href="test.html" title="test">Test</a></li>
			<li><a href="test.html" title="test">Test</a></li>
			<li><a href="test.html" title="test">Test</a></li>
			<li><a href="test.html" title="test">Test</a></li>
		</ul>
	</body>
</html>

ul {
	width: 200px;
	margin: 0;
	padding: 0;
	list-style: none;
	}
li {
	text-align: center;
	border: 1px solid black;
	margin: 2px 0;
	}
li a {
	display: block;
	width: 100%;
	}
li a:hover {
	color: red;
	}

Je fais un copier coller du script présent ici (tuto Alsa), puisque je suis partis du même :

<!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>Menu déroulant horizontal</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<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>


<style type="text/css">
<!-- 
/* CSS issu des tutoriels  http://css.alsacreations.com  */
body {
margin: 0;
padding: 0;
background: white;
font: 80% verdana, arial, sans-serif;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
position: absolute;
top: 0;
left: 0;
z-index:100;
width: 100%;
}
#menu dl {
float: left;
width: 12em;
margin: 0 1px;
}
#menu dt {
cursor: pointer;
text-align: center;
font-weight: bold;
background: #ccc;
border: 1px solid gray;
}
#menu dd {
border: 1px solid gray;
}
#menu li {
text-align: center;
background: #fff;
}
#menu li a, #menu dt a {
color: #000;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
}
#menu li a:hover, #menu dt a:hover {
background: #eee;
}

#site {
position: absolute;
z-index: 1;
top : 70px;
left : 10px;
color: #000;
background-color: #ddd;
padding: 5px;
border: 1px solid gray; 
}

a {text-decoration: none;
color: black;
color: #222;
}
-->
</style>
</head>

<body>

<div id="menu">
	<dl>
		<dt onmouseover="javascript:montre();"><a href="" title="Retour à l'accueil">Accueil</a></dt>
	</dl>
	
	<dl>			
		<dt onmouseover="javascript:montre('smenu1');">Menu 1</dt>
			<dd id="smenu1">
				<ul>
					<li><a href="#">Sous-Menu 1.1</a></li>

					<li><a href="#">Sous-Menu 1.2</a></li>
					<li><a href="#">Sous-Menu 1.3</a></li>
					<li><a href="#">Sous-Menu 1.4</a></li>
					<li><a href="#">Sous-Menu 1.5</a></li>
					<li><a href="#">Sous-Menu 1.6</a></li>
				</ul>

			</dd>
	</dl>
	
	
	<dl>	
		<dt onmouseover="javascript:montre('smenu2');">Menu 2</dt>
			<dd id="smenu2">
				<ul>
					<li><a href="#">Sous-Menu 2.1</a></li>
					<li><a href="#">Sous-Menu 2.2</a></li>

					<li><a href="#">Sous-Menu 2.3</a></li>
					<li><a href="#">Sous-Menu 2.4</a></li>
				</ul>
			</dd>
	</dl>
	
	<dl>	
		<dt onmouseover="javascript:montre('smenu3');">Menu 3</dt>
			<dd id="smenu3">

				<ul>
					<li><a href="#">Sous-Menu 3.1</a></li>
					<li><a href="#">Sous-Menu 3.2</a></li>
					<li><a href="#">Sous-Menu 3.3</a></li>
					<li><a href="#">Sous-Menu 3.4</a></li>
					<li><a href="#">Sous-Menu 3.5</a></li>

				</ul>
			</dd>
	</dl>
	
	<dl>	
		<dt onmouseover="javascript:montre('smenu4');">Menu 4</dt>
			<dd id="smenu4">
				<ul>
					<li><a href="#">Sous-Menu 4.1</a></li>

					<li><a href="#">Sous-Menu 4.2</a></li>
					<li><a href="#">Sous-Menu 4.3</a></li>
				</ul>
			</dd>
	</dl>
	
</div>


<div id="site">

	<h1>Menu horizontal déroulant en CSS</h1>
	<p>Testé sous (tested under) Internet Explorer, Netscape, Mozilla, Opera et Firebird</p>
  <p>Il vous suffit d'adapter le code source de cette page à vos besoins. </p>
<p>Raphaël GOETTER<br />
  <a href="http://www.alsacreations.com">Alsacréations</a><br />
  <a href="http://css.alsacreations.com/Construction-de-menus-en-CSS/Un-menu-deroulant-en-CSS-et-XHTML-vertical-et-horizontal">Explications / Explanations</a></p>

</div>

</body>
</html>

pour résumer, je rappelle que le but est que, dans IE, les sous-menus soient receptifs à la souris, sans nécessairement que le curseur se trouve au-dessus des textes.

Dans cet exemple, cela peut sembler "titilleux", mais c'est parce que tous les liens des sous-menus ont la même largeur (puisqu'il est écrit à chaque fois "Sous-Menu XX"). Imaginez, au milieu, un lien appelé "test", et cela change tout...

chmel a écrit :
montre ton code, parce qu'avec un width ou un height, ça doit marcher.

+1

Je comprends pas que ça marche pas. Moi d'habitude quand je fais ce genre de choses, ça marche.
Hmm… je sens venir le bug de HasLayout qui traîne, moi (en même temps, à force d'en voir je commence à être un peu parano)…

Le cas n'est pas vraiment le même.

Dans le cas mentionné ci-dessus, j'ai 3 menus.

une liste doit donc apparaître non plus verticalement, mais horizontalement.

Sur le tuto de Raphaël, arrivez-vous à y remédier ? Parce là, vraiment, je souffre !

Je ne pense pas que cela soit si simple, puisque les solutions pour y rémédier sont basées sur des hacks...
Modifié par Francois-Pierre (22 May 2006 - 17:24)

Je pense que ceci fonctionne :

#menu li {
text-align: center;
background: #fff;
width: 100%
}
#menu li a, #menu dt a {
color: #000;
text-decoration: none;
display: block;
width: 100%;
border: 0 none;
}