[Résolu]Structuration d'un menu vertical à 3 niveaux

Bonjour à tous.

Je réalise un menu dynamique vertical 3 niveaux pouvant présenter le cas suivant :

- menu1
> lien
- sous menu1
> lien
> lien
>lien
- menu 2
> lien
> lien
etc...

Quel serait la bonne structuration :

Mon premier jet est :

<div id="sommaire">
  <dl>
    <dt>> niv 1</dt>
    <dt>niv 1</dt>
    <dd>> niv 2</dd>
    <dd>> niv 2</dd>
    <dt>niv 2</dt>
    <dd><a href="#">> niv 3</a><br>
      <a href="#">> niv 3</a><br>
      <a href="#">> niv 3</a></dd>
    <dt>> niv 2</dt>
  </dl>
</div>

Comme on ne peut encapsuler les <dt> et <dd> dans une <dd> je n'arrive pas à marquer la différence entre niv2 attaché au niv1 et le niv3 attaché au niveau 2.

Je ne sais pas si je suis clair...
Modifié par vinzo (08 Mar 2005 - 13:44)

Tu pourrais créer des classes .niv1 et .niv2 et insérer un quelque chose devant dans le CSS.

Par exemple :

.niv1:before { content: "- " }
.niv2:before { content: "-- " }

Et remplace les "-" par ce que tu veux qui soit devant tes liens.


Le seul problème c'est que je crois que cette propriété ne fonctionne pas sous IE. Bien sur tu pourrais le mettre en brut dans le code XHTML mais je ne sais pas comment interpèteraient ça les navigateurs vocaux.
Modifié par ApOpH!s (07 Mar 2005 - 16:42)

Salut !

Pas partisan des listes de définition (dd, dt, dl, etc), voici ma proposition, à base de listes:

<ul>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a>
<ul>
<li><a href="#">Item 3.1</a></li>
<li><a href="#">Item 3.2</a>
<ul>
<li><a href="#">Item 3.2.1</a></li>
<li><a href="#">Item 3.2.2</a></li>
<li><a href="#">Item 3.2.3</a></li>
</ul>
</li>
<li><a href="#">Item 3.3</a></li>
</ul>
</li>
</ul>

Ensuite, pour accéder aux différents niveaux:

ul{
/* Contenant du premier niveau */
}
ul li{
/* Élement de premier niveau */
}
ul ul{
/* Contenant du deuxième niveau */
}
ul ul li{
/* Élement de deuxième niveau */
}
ul ul ul{
/* Contenant du troisième niveau */
}
ul ul ul li{
/* Élement de troisième niveau */
}

Etc.

@ApOpH!s> Attention ! Il faut être prudent avec les contenus générés: Ils ne sont pas pris en compte par IE, le navigateur le plus répandu sur l'internet !

@+, HoPHP

a écrit :
@ApOpH!s> Attention ! Il faut être prudent avec les contenus générés: Ils ne sont pas pris en compte par IE, le navigateur le plus répandu sur l'internet !

J'ai bien dis sous mon post :

a écrit :
Le seul problème c'est que je crois que cette propriété ne fonctionne pas sous IE.

Merci pour vos réponses.

Je n'ai pas trouver de solution simple, à part celle d'imbriquer des <ul> dans des <li>. Bref, bref... je crois que mon problème est plutôt du côté de la conception.
Je vous remercie et vais mettre un petit [résolu] en attendant.