4991 sujets

Sémantique web et 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.