[RESOLU] Menu et sous menu horizontal avec 2 boutons "actifs"

Bonjour à tous,

J'ai un petit problème :

Pour la première fois, je réalise un site avec un menu et sous menu horizontal.
Mon problème est le suivant :
Pour plus de clarté, je souhaite avoir le bouton du menu et celui du sous menu qui soient actifs afin de permettre au visiteur de bien visualiser la structure le site et de se situer aisément.

J'ai donc un menu principal, en fonction du choix dans le menu principal, un sousmenu différent apparait juste en dessous et je définis un bouton "actif" dans le menu principal comme dans le sous-menu, ce qui ne semble pas poser de problème aux navigateurs mais bien au validateur XHTML.

Ma question est ... est ce que je laisse tout comme çà et tant pis pour les puristes ou y a t'il une solution plus "propre" ?

Pour être parfaitement clair voici le code qui pose problème :

<div id="menu1">
<ul id="navlist1">
<li><a href="#">Item1</a></li>
<li><a href="#">Item2</a></li>
<li><a href="#">Item3</a></li>
<li><a href="#">Item4</a></li>
<li id="active"><a href="#" id="current">Item5</a></li>
<li><a href="#">Item6</a></li>
</ul>
</div>

<div class="separateur">
</div>

<div id="menu2">
<ul id="navlist2">
<li><a href="#">Item5.1</a></li>
<li><a href="#">Item5.2</a></li>
<li id="active"><a href="#" id="current">Item5.3</a></li>
<li><a href="#">Item5.4</a></li>
</ul>
</div>

Merci d'avance pour vos conseils.
Modifié par titiv (22 Jul 2011 - 19:25)

Bonsoir à toutes et à tous,

si je ne me trompe pas, un identifiant id="active" ou encore id="current" doit être unique dans un script HTML. Or il se trouve dans ton exemple qu'ils apparaissent deux fois chacun.

Essaye de mette à la place class="active" et class="current.

Ne pas oublier de corriger le script CSS associé afin de corriger les "#active" et "#current" en ".active" et ".current".

@+

Hello,

Artemus24 a écrit :
si je ne me trompe pas, un identifiant id="active" ou encore id="current" doit être unique dans un script HTML.

On parlera de page ou code HTML plutôt que de script HTML (car HTML n'est pas un langage de script, idem pour CSS), mais sur le fond c'est ça. Pour ce type d'utilisation, il faut effectivement utiliser class plutôt que id.

Par ailleurs je recommanderais de ne pas utiliser "active" comme nom d'identifiant ou de classe. Techniquement ça ne pose pas de problème, mais autant éviter les confusions avec la pseudo-classe :active en CSS. Un class="current" sur le LI devrait suffire (pas besoin de classe ou identifiant sur le lien lui-même).

Enfin, la structure sémantiquement correct pour ce contenu serait plutôt:

<ul id="menu"> 
  <li><a href="#">Item1</a></li>
  <li><a href="#">Item2</a></li>
  <li><a href="#">Item3</a></li>
  <li><a href="#">Item4</a></li>
  <li class="current">
    <a href="#">Item5</a>
    <ul>
      <li><a href="#">Item5.1</a></li>
      <li><a href="#">Item5.2</a></li>
      <li class="current"><a href="#">Item5.3</a></li>
      <li><a href="#">Item5.4</a></li>
    </ul>
  </li>
  <li><a href="#">Item6</a></li>
</ul>

Un tout grand merci !

Un peu gêné !
Le passage de id>class ... j'aurais pu y penser tout seul !
N'étant pas dans le même menu et ayant défini menu1 et menu2 ... je n'ai pas pensé que le problème pouvait être là !

Bonne soirée à tous.