Menus, doublons html

Bonjour,

réaliser deux menus très différents, l'un horizontal pour les grandes résolutions, l'autre par exemple handburger pour les résolutions "smartphone" est une chose très courante, et même universelle sur les sites. Cependant, chaque fois, je me suis trouvé face à l'obligation de réaliser deux html (tout du moins la partie ul, li) différents pour chaque menu.

Exemple, sur un site, j'ai mis un menu horizontal déroulant pour le grandes résolutions et un menu "glissant" (en Anglais scrolling menu) pour les résolutions smartphones. Je n'ai cependant pas pu utiliser le même html pour les deux. Le poids des lignes supplémentaires est ridicule, mais je ne trouve pas ça très élégant. Surtout, ça m'oblige à ajouter un display:none; pour cacher l'un ou l'autre.

Voici, par exemple, le html du menu principal horizontal :

<div class="nav">
	<div id="menu">
	<li><a href="#">Menu1.html</a>
		<ul>
			<li><a href="SousMenu1.html">SousMenu1</a>
			<li><a href="SousMenu2.html">SousMenu2</a>	
		</ul>
	<li><a href="#">Menu2.html</a>
		<ul>
........... et plus

le html du "scrolling menu" :

<div class="topBar">
    <!-- Logo -->
</div>
<nav class="navBar">
    <div class="container">
        <ul class="nav">
        <li><a href="index.html" class="active">Accueil</a></li>
            <li><a href="Menu1.html">Menu1</a></li>
            <li><a href="Menu2.html">Menu2</a></li>
.......... et plus

le css de ce menu "scrolling" :

.topBar {
    background: white;
    color: rgba(255, 255, 255, 0.3);
    font-size: 22px;
    font-weight: bold;
    text-transform: uppercase;
    padding: 20px 0;
    text-align: center;
}
.container {
    margin: 0 auto;
    padding: 0 10px;
    max-width: 800px;
}
.navBar {
    background: blue;
}
.nav {
    margin: 0 -10px;
    padding: 0 10px;
    list-style: none;
    display: flex;
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
}
.nav > li > a {
    padding: 14px 16px;
    display: block;
    color: lightblue /* Couleur des liens */
    text-decoration: none;
    text-transform: uppercase;
    font-size: .8em;
}
.nav > li > a.active {
    border-bottom: 2px solid #E64A19;
}

La question est : Y-a-t-il une solution pour que le html d'un menu horizontal grandes résolutions puisse aussi servir pour les petites résolutions (handburger ou autres) ?
Merci pour les avis.

Tu peux le faire en utilisant les flexbox et les media queries: suivant la taille de l'écran, tu peux choisir si le menu est horizontal ou vertical (flex-direction), si tu affiches (ou pas) des sous menus, etc...

Bonjour et merci pour la réponse,

oui, alors que mon site est réalisé avec grid, des parties en flexbox et les @medias, je n'y avais pas pensé. Mais as-tu bien compris le problème que j'exposais ? Choisir un menu vertical ou horizontal suivant la taille des écrans n'était pas le problème. Le problème, c'est la partie html ul li qui n'est pas la même pour un menu horizontal et un menu "handburger". Le plus fort, c'est que j'ai réussi, sur un site beaucoup plus ancien, à résoudre ce problème, mais je n'arrive pas à le reproduire avec un autre style de menu! Sur ce site, le menu grandes résolutions était vertical et placé sur le côté de la page. Et en mode faibles résolutions, il devenait "handburger". J'avais pas mal bricolé, mais ça fonctionne. Je voulais juste savoir s'il y avait une méthode un peu universelle, que tout les sites utilisent.
A titre d'exemple, la partie html du menu du site dont je parle ci-dessus :

<! Menu pour les téléphones portables et autres>
	<div class="monmenu">
			<li><a href="#"><span class="nav" href="#">&#9776;&nbsp;Menu</a></span>
			<ul>
		<br>
			<li> <a href="index-en.html"><img src="Images/us.png" width="38px" height="auto" alt="Drapeau de traduction"></a>	
			<li> <a href="Folidouma.html">Discographie</a>
			<li> <a href="Mamoutou-France.html">Mamoutou en France </a>
			<li> <a href="Montage.html">Atelier de jemb&eacute;s et dununs </a>
			<li> <a href="Traditionnels.html"> F&ecirc;tes traditionnelles </a>
			<li> <a href="Piano.html">Jemb&eacute; et piano &eacute;lectrique</a>
			<li> <a href="Sonorisation.html"> Location de sonorisation </a>
			<li> <a href="Stages.html"> Stages de jemb&eacute; </a>
			<li> <a href="Videomois.html"> Vid&eacute;o du mois </a></li>
			</ul>
	</li>
	</div>

J'épargne la partie css, puisque ça fonctionne parfaitement. On lit bien "Menu pour les téléphones portables et les autres". Par contre, je ne peux éviter le display:none, dans cette configuration. Cette façon de faire est-elle correcte, ou est-ce du bricolage ?

J'aurais du mal à dire si c'est du bricolage ou pas, et si c'est la "bonne" façon de faire, vu que je suis autodidacte et dans le domaine depuis peu...
Mais en tous cas, j'ai un peu le même type de menu que toi, et j'ai juste une classe sur le <ul> des sous-menus qui passe en display:none avec les mobiles.
Désolé, mais je ne peux pas aider davantage...
A+ !

Moi aussi, je suis autodidacte dans cette branche. Ce n'est pas mon métier, mais ici, j'ai appris beaucoup. Je mets du temps pour faire un site au point et un employeur dans ce domaine m'aurait déjà éjecté depuis longtemps.
Bonne continuation.

Bonjour,

si la structure est vraiment différente tu vas avoir du mal à réutiliser ton menu. Il faut faire une structure avec pas mal de balises pour être sûr de pouvoir adapter dans l'un ou l'autre des cas. Personnellement la plupart des menus que j'ai fait l'était a partir du code de wordpress qui ressemble en gros à ça (sans toute les classes) :

<ul>
    <li><a href="#">Niveau 1</a>
        <ul>
             <li><a href="page.htm">Niveau 2</a></li>
             <li><a href="page.htm">Niveau 2</a></li>
             <li><a href="page.htm">Niveau 2</a></li>
        </ul>
    </li>
    <li><a href="page.htm">Niveau 1</a>
</ul>

Avec ce genre de code j'ai jamais eu de souci pour faire quelconque menu. Par contre parfois tu es obligé de changer de place au menu dans le code si le menu est contenu dans le header sur grandes résolutions puis doit venir sur le côté en poussant le site sur mobile. Pour faire ça je déplace le menu avec javascript passé une certaine résolution ou tu peux aussi répliquer ton menu au chargement de la page.

Pour que le menu reste ergonomique il faut faire attention a ce que les liens de premier niveau qui contiennent des enfants ne soient pas cliquable si on veut faire un système d'accordéon sur mobile car cela rendrait le lien alors inaccessible.

Les menus c'est loin d'être le truc le plus évident.

bacasable a écrit :
Bonjour,

Les menus c'est loin d'être le truc le plus évident.

Oh oui, et c'est pourtant la base des sites.
En tous cas, ça fonctionne chez moi, d'une façon ou d'une autre. Je pensais juste à une solution plus élégante.
Cordialement.