5568 sujets

Sémantique web et HTML

Besoin éclaircissement code html pour menu imbriqué

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>
Ouaip, plutôt le 1er Smiley smile

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.
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
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. Smiley smile
Sujet clos
Aller à