[resolu]Construire un menu

Bonjour à tous,

Je suis en train de refonder complètement un site, et je m'interroge sur la meilleure façon de construire un menu (pour info, le code html sera construit et mis en cache via php, les menus étant définis dans une interface admin).

en gros il y aurait un certains nombre de 'catégories' avec dans chacune un certain nombre de liens.

Pensez-vous qu'utiliser un <dl> pour faire ça serait une bonne façon de faire?

par exemple:

	<dl id="menu">
		<dt>menu1</dt>
		<dd>
			<ul class="submenu">
				<li><a href="/">option 1</a></li>
				<li><a href="/">option 2</a></li>
				<li><a href="/">option 3</a></li>			
			</ul>
		</dd>
		<dt>menu2</dt>
		<dd>
			<ul class="submenu">
				<li><a href="/">option 1</a></li>
				<li><a href="/">option 2</a></li>
				<li><a href="/">option 3</a></li>			
			</ul>
		</dd>		
	</dl>

ou bien est-ce se compliquer la vie et mieux vaut-il faire:

	<div id="menu">
		<p>menu1</p>	
		<ul class="submenu">
			<li><a href="/">option 1</a></li>
			<li><a href="/">option 2</a></li>
			<li><a href="/">option 3</a></li>			
		</ul>
		<p>menu2</p>			
		<ul class="submenu">
			<li><a href="/">option 1</a></li>
			<li><a href="/">option 2</a></li>
			<li><a href="/">option 3</a></li>			
		</ul>				
	</div>

ou peut-être encore autrement ?

J'essaye de partir directement sur une bonne base... (la version actuelle étant codée de façon affreuse...)

Merci d'avance,
Krams
Modifié par Krams (03 Sep 2007 - 11:33)

Salut Krams,

Comme ceci plutôt :

<h2>Menu</h2>
<ul class="menu">
    <li>Menu 1
        <ul>
            <li><a href="#">option 1</a></li>
            <li><a href="#">option 2</a></li>
            <li><a href="#">option 3</a></li>
        </ul>
    </li>
    <li>Menu 2
        <ul>
            <li><a href="#">option 1</a></li>
            <li><a href="#">option 2</a></li>
            <li><a href="#">option 3</a></li>
        </ul>
    </li>
</ul>

ou comme cela :

<h2>Menu</h2>
<ul class="menu">
    <li><h3>Menu 1</h3>
        <ul>
            <li><a href="#">option 1</a></li>
            <li><a href="#">option 2</a></li>
            <li><a href="#">option 3</a></li>
        </ul>
    </li>
    <li><h3>Menu 2<h3>
        <ul>
            <li><a href="#">option 1</a></li>
            <li><a href="#">option 2</a></li>
            <li><a href="#">option 3</a></li>
        </ul>
    </li>
</ul>

Le dl n'est pas adapté car les listes incluses dans tes dd ne sont pas des descriptions des dt.
Modifié par koala64 (20 Aug 2007 - 13:25)

Salut koala64 j'avais oublié que tu étais par ici également...

Oui en fait je n'avais pas pensé à imbriquer des <ul>, je ne pensais pas qu'on pouvait avoir un <ul> dans un <li>...

en fait j'avais pensé à un <dl> car cette technique est utilisée dans un des totoriels de menu déroulant sur alsacreations... (balise que je n'avais d'ailleurs jamais utilisée...)

@+
Krams

Oui, c'était une erreur et le tutoriel se fait un peu vieux. On est en train de le remettre à jour.

ok merci, je vais partir sur cette base-là...

ah tiens, je n'avais pas vu l'edit de ton post avec l'utilisation des <h2> et <h3>

Penses-tu que c'est une bonne idée d'utiliser ces balises ? car ce ne sont pas réellements des niveaux de titre du contenu réel qui sera sur la page. Ca ne rique pas d'influencer la topologie du contenu de la page qui utilise des <h1> et <h2> pour ce contenu ?

Le plus important, c'est garder une certaine cohérence dans les niveaux de titre de tes pages et de là, tu fais ce que tu veux. Tu n'es pas obligé d'en mettre mais ils sont susceptibles de fournir une aide à la navigation (des navigateurs tel qu'Opera ou encore les lecteurs d'écran permettent par exemple de passer de titre en titre).

En général, c'est le titre au-dessus du menu qui gêne le plus souvent car il s'intègre mal... visuellement parlant. Du coup, pour conserver l'aide sans que ça ne perturbe le design, on a tendance à le planquer en utilisant cette technique.

OK je vais maintenant réfléchir à tout ça... (je passe plus de temps à réfléchir qu'à coder pour l'instant...)

On peut encore améliorer sensiblement la proposition de koala64:

<h2>Menu</h2>

<h3>Menu 1</h3>
<ul>
    <li><a href="#">option 1</a></li>
    <li><a href="#">option 2</a></li>
    <li><a href="#">option 3</a></li>
</ul>

<h3>Menu 2<h3>
<ul>
    <li><a href="#">option 1</a></li>
    <li><a href="#">option 2</a></li>
    <li><a href="#">option 3</a></li>
</ul>

Voilà, c'est tout de suite beaucoup mieux... car beaucoup plus lisible (code plus lisible, contenu plus lisible par un lecteur d'écran ou avec les styles par défaut du navigateur, etc.).

La structure des titres suffit à hiérarchiser les éléments. Rajouter une liste englobante, c'est poser une hiérarchisation redondante.
Modifié par Florent V. (20 Aug 2007 - 22:25)

mmm, oui, mais sans avoir un élément de type block qui englobe le menu, ça risque de ne pas être évident à positionner, idem pour ajouter une bordure globale au menu et une couleur de fond non ?

ou alors, il faut englober le menu dans un div comme je proposais (en remplaçant mes <p> par des <h2-3> ?

Krams a écrit :
mmm, oui, mais sans avoir un élément de type block qui englobe le menu, ça risque de ne pas être évident à positionner, idem pour ajouter une bordure globale au menu et une couleur de fond non ?

Ben oui. Mais tu prends le code que je propose ci-dessus, tu englobes le tout dans une div avec un attribut id qui va bien, et voilà.

L'élément div présente justement l'avantage d'être (notamment) un support de mise en forme, sans avoir de «poids» sémantique particulier.

ok, merci à tous 2 pour vos conseils!