Retour
Navbar Responsive et Menu Animé
Tutoriel pour créer une Navbar responsive avec HTML, CSS et Javascript.
La Navbar s'adaptera à la taille de l'écran, et affichera un bouton pour dérouler le menu pour petit écran.
0
Avant de commencer
Afin de pouvoir suivre le tutoriel, il est conseillé d'avoir des bases en HTML, CSS et Javascript.
1/ Structure du projet
Pour l'exemple, nous allons garder les choses simples. Nous aurons donc 3 fichiers:
📦Javascript-Navbar-Responsive-Tuto
┣ 📜index.css
┣ 📜index.html
┗ 📜index.js
2/ La page HTML
Dans notre page html index.html, nous allons mettre dans la balise head:
- Le lien du CDN des icônes de Bootstrap.
-
Le lien vers notre fichier CSS
index.css.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<!--CDN Bootstrap pour l'icône du menu-->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css"
/>
<!--Notre style-->
<link rel="stylesheet" href="index.css" />
<title>Javascript Navbar Responsive Tuto</title>
</head>
</html>
Puis dans dans la balise body nous allons ajouter:
-
La balise
navcontenant une icône et une liste de liens. -
Le lien vers notre fichier script
index.js:
<!DOCTYPE html>
<html lang="fr">
<!--... La balise head ...-->
<body>
<!--La Navbar-->
<nav>
<i id="menu-button" class="bi bi-list"></i>
<span class="brand">BRAND</span>
<ul id="menu-closed" class="menu">
<li>
<a class="link" href="index.html">Acceuil</a>
</li>
<li>
<a class="link" href="index.html">Contact</a>
</li>
<li>
<a class="link" href="index.html">A propos</a>
</li>
</ul>
</nav>
<!--Script pour l'interaction avec le bouton-->
<script src="index.js"></script>
</body>
</html>
3/ Le style CSS
Nous allons commencer par s'occuper du style pour grands écrans:
* {
list-style: none;
font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
"Lucida Sans Unicode", Geneva, Verdana, sans-serif;
margin: 0;
padding: 0;
}
header, main {
max-width: 800px;
margin: auto;
padding: 0.5em;
}
nav {
position: sticky;
top: 0;
height: 3.5em;
display: flex;
align-items: center;
justify-content: space-between;
background-color: rgb(4, 36, 84);
}
.menu {
position: relative;
display: flex;
}
.link {
color: whitesmoke;
padding: 0 0.5em;
}
/*Cacher le bouton */
#menu-button {
display: none;
}
.brand {
color: whitesmoke;
padding: 0 10px;
}
- Le bouton du menu
#menu-buttonest caché pour grands écrans. Dans l'étape suivante, nous allons changer son style et l'afficher pour les écrans inférieurs à 600px.
Pour pouvoir modifier le style des éléments suivant la taille de l'écran, nous allons utiliser le query @media:
1: Afficher le bouton#menu-button.2: Mettre le menu en position absolue, pour pouvoir changer sa position.3: Ajouter une transition quand l'une des propriétés est modifiée.4: Les selecteurs#menu-closedet#menu-openedsont responsables de la position du menu (ouvert ou fermé)
@media screen and (max-width: 600px) {
#menu-button {
/*1: Afficher le bouton*/
display: inline;
color: whitesmoke;
font-size: 2em;
padding: 0 0.5em;
cursor: pointer;
}
.menu {
/*2: Mettre le menu en position absolue */
position: absolute;
top: 3.6em;
background-color: rgba(4, 36, 84, 0.952);
flex-direction: column;
padding: 2em;
min-width: 50%;
/*3: Ajouter une transition*/
transition: all 0.5s ease-in-out;
}
/*4: Selecteurs pour changer la position*/
#menu-closed {
left: -100%;
}
#menu-opened {
left: 0;
}
}
4/ L'intéraction JS
Nous allons utiliser le Javascript dans le fichier index.js, pour ajouter de l'interaction avec notre page, et afficher ou cacher le menu:
1: Sélectionner l'élément HTML représentant le bouton avec son idmenu-button.2: Ajouter un observateur d'événements clique, qui exécute une fonction.
Dans la fonction qui s'éxecute lors du clique, nous allons:
3: Sélectionner l'élément HTML représentant notre menu avec sa classe.menu.4: Tester si son id est égal àmenu-closed:5: Nous lui affectons la valeurmenu-opened6: Sinon nous lui affectons la valeurmenu-closed
//1: Sélectionner l'élément HTML représentant le bouton du menu.
const menuButtonElement = document.getElementById("menu-button");
//2: Ajouter un observateur d'événements sur le bouton
menuButtonElement.addEventListener("click", () => {
//3: Sélectionner l'élément HTML ul représentant not menu
const menuElement = document.querySelector(".menu");
//4: Tester si le menu est fermé
if (menuElement.id == "menu-closed") {
//5: Changer l'id de l'élément pour l'afficher
menuElement.id = "menu-opened";
} else {
//6: Sinon changer l'id de l'élément pour le cacher
menuElement.id = "menu-closed";
}
});
