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.
