Comment créer un menu responsive en HTML, CSS et JavaScript ?

Réponses rédigées par Antoine

Dernière mise à jour : 2022-10-03 12:38:31

Question

Bonjour je cherche à créer un menu responsive avec les fonctionnalités suivantes :

Affichage d'un menu type hamburger sur les petits écrans.
Changement de couleur de fond sur le menu actif.
Je ne dois pas utiliser jQuery.

Pouvez vous m'aider, merci.

Réponse

Vous pouvez vous baser sur l'exemple de menu responsive proposée par W3Schools.

Dans l'exemple ci-dessous on a ajouté un peu code JavaScript pour détecter le clic sur l'un des menus, et ainsi lui ajouter une CLASS CSS pour mettre en exergue la page active.

Le menu est responsive : une icône Font Awesome est utilisée pour le menu hamburger.

<!DOCTYPE html> 
<html> 
<head>
<meta charset="UTF-8">
<title>Comment faire un menu responsive en HTML, CCS et JavaScript ?</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<style>
nav {
  background-color: #333;
  overflow: hidden;
}

nav a {
  color: #fff;
  text-align: center;
  padding: 15px 15px;
  text-decoration: none;
  font-size: 15px;
  float: left;
  display: block;
}

nav a:hover {
  background-color: #ddd;
  color: black;
}

nav a.active {
  background-color: #000;
  color: white;
}

nav .icone {
  display: none;
}

@media screen and (max-width: 600px) {
  nav a:not(:first-child) {
    display: none;
}
  nav a.icone {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 600px) {
  nav.responsive {
    position: relative;
    }
  nav.responsive a.icone {
    position: absolute;
    right: 0;
    top: 0;
  }
  nav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}
</style>
</head>
<body>
<nav class="standard" id="menu">
  <a href="#" class="page active">Logo</a>
  <a href="#" class="page">Page 1</a>
  <a href="#" class="page">Page 2</a>
  <a href="#" class="page">Page 3</a>
  <a href="javascript:void(0);" class="icone" onclick="menuResponsive()">
    <i class="fa fa-bars"></i>
  </a>
</nav>
<script>
var menu = document.getElementById("menu");
var pages = document.getElementsByClassName("page");

menu.addEventListener('click', event => 
{
  if (event.target.classList.contains('page')) 
  {
    for (var i = 0; i < pages.length; i++) 
{
      pages[i].classList.remove("active");
    }  
    event.target.classList.add("active")
  }
})

function menuResponsive() 
{
  if (menu.className === "standard") 
  {
    menu.className += " responsive";
  } 
  else 
  {
    menu.className = "standard";
  }
}
</script>
</body>
</html>

Démo via cette page.