W3Schools Tryit Éditeur

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {margin: 0;}

ul.sidenav {
list-style-type: none;
marge: 0;
padding: 0;
largeur: 25%;
couleur-de-fond: #f1f1f1;
position: fixe;
hauteur: 100%;
débordement: auto;
}

ul.sidenav li a {
afficher: bloc;
couleur: #000;
padding: 8px 16px;
text-decoration: none;
}
 
ul.sidenav li a.active {
couleur de fond: #4CAF50;
couleur: blanc;
}

ul.sidenav li a:hover:not(.active) {
couleur de fond: #555;
couleur: blanc;
}

div.content {
marge-gauche: 25%;
padding: 1px 16px;
hauteur: 1000px;
}

@media screen and (max-width: 900px) {
ul.sidenav {
largeur: 100%;
hauteur: auto;
position: relative;
}
  
ul.sidenav li a {
flottant: gauche;
padding: 15px;
}
  
div.content {margin-left: 0;}
}

@media screen and (max-width: 400px) {
ul.sidenav li a {
text-align: center;
float: none;
}
}
</style>
</head>
<body>

<ul class="sidenav">
  <li><a class="active" href="#home">Accueil</a></li>
  <li><a href="#news">Nouvelles</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">À propos</a></li>
</ul>

<div class="content">
  <h2>Exemple de barre de navigation responsive</h2>
  <p>Ici, nous utilisons des requêtes média pour transformer la barre de navigation verticale en une barre de navigation horizontale lorsque la taille de l'écran est de 900px ou moins.</p>
  <p>Une autre requête média concerne les écrans de 400px ou moins, qui empileront verticalement et centreront les liens de la barre de navigation.</p>
  <p>Vous en apprendrez davantage sur les media queries et le design web réactif plus tard dans notre tutoriel CSS.</p>
  <h3>Redimensionnez la fenêtre du navigateur pour voir l'effet.</h3>
</div>

</body>

</html>