Besoin éclaircissement code html pour menu imbriqué

Auteur
jpv56	# 22 Mar 2010 - 15:27:31
68 Posts	Bonjour à tous, Je débute et j'avoue avoir un peu de mal à comprendre l'architecture qui permet d'imbriquer un sous menu dans un menu principal à partir de listes à puces. J'ai testé deux modèles sensiblement différents et a priori chacun fonctionne (l'affichage dans la page html parait correct). Le premier exemple (voir ci-dessous) met en œuvre un seul UL global tandis que le second décompose le code en plusieurs UL distincts (ce qui implique des retours à la ligne). Pouvez-vous me dire si l'une des deux solutions est mauvaise : je penche pour la première, mais j'aimerais avoir confirmation. Merci d'avance. jpv56 Exemple 1: <div class="menu"> <ul> <li><a href="...">bouton1</a></li><!--navigation simple--> <li><a href="...">bouton2</a></li><!--navigation simple--> <li><a href="...">bouton3</a><!--navigation imbriquée sur ce bouton--> <ul><!--début menu imbriqué--> <li><a href="...">sous-bouton3a</a></li> <li><a href="...">sous-bouton3b</a></li> <li><a href="...">sous-bouton3c</a></li> </ul><!--fin menu imbriqué--> </li><!--ne pas oublier de refermer le li--> <li><a href="...">bouton4</a></li><!--navigation simple--> <li><a href="...">bouton5</a></li><!--navigation simple--> <li><a href="...">bouton6</a><!--navigation imbriquée sur ce bouton--> <ul><!--début menu imbriqué--> <li><a href="...">sous-bouton6a</a></li> <li><a href="...">sous-bouton6b</a></li> <li><a href="...">sous-bouton6c</a></li> </ul><!--fin menu imbriqué--> </li> </ul><!--fermeture du ul global--> </div> Exemple 2 : <div class="menu"> <ul> <li><a href="...">bouton1</a></li><!--bouton normal--> <li><a href="...">bouton2</a><!--bouton avec sous menu--> <ul><!--ouverture sous menu--> <li><a href="...">SM 2.1</a></li> <li><a href="...">SM 2.2</a></li> </ul><!--fermeture sous menu--> </li><!--ne pas oublier de fermer le li--> </ul> <ul> <li><a href="...">bouton3</a><!--bouton avec sous menu--> <ul> <li><a href="...">SM 3.1</a></li> <li><a href="...">SM 3.2</a></li> <li><a href="...">SM 3.3</a></li> </ul> </li> </ul> <ul> </ul> </div>
68 Posts
julienw	# 22 Mar 2010 - 15:37:48
31 Posts	Ouaip, plutôt le 1er Je ne comprends pas trop le pourquoi de ton deuxième modèle. Par contre, à noter que dans une ancienne version de HTML (en tout cas, dans la version 4, c'est marqué comme "obsolète", et dans HTML 5 ils n'en parlent même pas), on pouvait imbriquer des UL sans forcément mettre de LI.
31 Posts
jpv56	# 22 Mar 2010 - 15:48:58
68 Posts	Bonjour Julien, Donc c'est le premier exemple la solution à retenir ? Tu confirmes ? En fait j'ai trouvé le deuxième dans un tutoriel et au début je ne me suis pas posé de question à son sujet. Mais en le décortiquant j'ai trouvé son architecture bizarre ! jpv56
68 Posts
Patidou	# 22 Mar 2010 - 16:31:27
2173 Posts	Ouais le premier aussi : <div class="menu"> <ul> <li><a href="...">bouton1</a></li> <!--navigation simple--> <li><a href="...">bouton2</a></li> <!--navigation simple--> <li><a href="...">bouton3</a> <!--navigation imbriquée sur ce bouton--> <ul> <!--début menu imbriqué--> <li><a href="...">sous-bouton3a</a></li> <li><a href="...">sous-bouton3b</a></li> <li><a href="...">sous-bouton3c</a></li> </ul> <!--fin menu imbriqué--> </li> <!--ne pas oublier de refermer le li--> <li><a href="...">bouton4</a></li> <!--navigation simple--> <li><a href="...">bouton5</a></li> <!--navigation simple--> <li><a href="...">bouton6</a> <!--navigation imbriquée sur ce bouton--> <ul> <!--début menu imbriqué--> <li><a href="...">sous-bouton6a</a></li> <li><a href="...">sous-bouton6b</a></li> <li><a href="...">sous-bouton6c</a></li> </ul> <!--fin menu imbriqué--> </li> </ul> <!--fermeture du ul global--> </div> C'est plus facile à lire avec une indentation. Avertissement : il est inutile de m'envoyer des mp pour demander de répondre à vos sujets sur le forum. Je répond si j'ai un élément de réponse et si j'ai le temps. Merci d'avance.
2173 Posts
jpv56	# 23 Mar 2010 - 15:28:05
68 Posts	Ok merci à tous les deux.
68 Posts