Série : Symfony 7
Fichiers : https://github.com/NouvelleTechno/OpenBlog
Dans ce tutoriel, nous allons travailler sur le projet OpenBlog pour créer une barre de navigation responsive incluant un menu burger pour la version mobile. Nous allons aussi explorer l’utilisation de SVG pour créer le bouton burger et manipuler le DOM avec du JavaScript pour ouvrir et fermer le menu de manière dynamique. Tout cela sans utiliser de framework CSS.
Objectifs du tutoriel
- Créer une barre de navigation responsive.
- Implémenter un bouton burger avec SVG.
- Ajouter du CSS mobile-first pour gérer l'affichage du menu sur les petits écrans.
- Utiliser JavaScript pour basculer l’affichage du menu lors d’un clic sur le bouton burger.
Structure de la barre de navigation
Nous allons d'abord modifier le fichier navbar.html.twig
qui contient la barre de navigation. L'idée est d'ajouter un bouton burger et de préparer la structure pour qu'elle soit réactive en version mobile.
HTML de la barre de navigation
Voici la structure modifiée du fichier de la barre de navigation. Nous ajoutons un bouton burger en utilisant une balise <span>
et un SVG qui représente les trois lignes typiques d'un menu burger.
<nav class="navbar" id="main-navbar">
<div class="navbar-container">
<a href="{{ path('app_main') }}" class="nav-logo"><img src="{{ asset('assets/images/logo.png') }}" alt="Logo OpenBlog"></a>
<span class="nav-button">
<svg viewbox="0 0 100 80" width="40" height="40">
<rect width="100" height="15" rx="8"></rect>
<rect y="35" width="100" height="15" rx="8"></rect>
<rect y="70" width="100" height="15" rx="8"></rect>
</svg>
</span>
<ul class="nav-menu">
<li class="nav-item active">
<a href="#">Accueil</a>
</li>
<li class="nav-item">
<a href="#">Articles</a>
</li>
<li class="nav-item">
<a href="#">Catégories</a>
</li>
<li class="nav-item">
<a href="#">Auteurs</a>
</li>
<li class="nav-item">
<a href="#">Contact</a>
</li>
<li class="nav-item">
<a href="#">Recherche</a>
</li>
</ul>
</div>
</nav>
<nav>
: Contient l’ensemble de la barre de navigation.<ul>
: Liste des éléments de navigation, chaque lien est un<li>
.<span class="nav_button">
: Bouton burger avec l'icône créée en SVG.
Styles CSS et SCSS
Nous adoptons une approche mobile-first dans nos styles CSS, en commençant par les petits écrans avant d’adapter l’affichage pour les écrans plus larges.
Styles de base pour la navigation
Dans le fichier app.scss
, nous commençons par définir les styles de base de la navigation.
body{
background-color: white;
margin: 0;
font-family: "Roboto", system-ui;
}
.navbar{
background-color: white;
box-shadow: 0 3px 3px lightgrey;
.navbar-container{
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
margin: 0 15px;
height: 80px;
.nav-menu{
display: none;
position: absolute;
top: 80px;
left: 0;
right: 0;
background-color: #fff;
list-style: none;
padding: 0;
box-shadow: 0 3px 3px lightgrey;
&.show{
display: initial;
}
.nav-item{
padding: 10px 20px;
&:hover{
background-color: rgba(101, 123, 231, 0.3);
}
}
}
a{
color: #000;
text-decoration: none;
font-size: 1rem;
}
.nav-button{
cursor: pointer;
}
}
}
.nav-container
: Utilisation de flexbox pour aligner le contenu de la navigation de manière fluide..nav-menu
: Initialement, le menu est caché en version mobile grâce àdisplay: none
..nav-button
: Définit un curseur pointer pour le bouton burger.
Styles responsive
Nous utilisons une media query pour adapter l’affichage du menu sur des écrans plus grands (au-delà de 768 pixels de largeur).
@media screen and (min-width: 768px) {
.navbar{
.navbar-container{
max-width: 700px;
margin: auto;
.nav-button{
display: none;
}
.nav-menu{
display: initial;
position: static;
box-shadow: unset;
.nav-item{
display: inline-block;
line-height: 78px;
border-bottom: 2px solid transparent;
&:hover, &.active{
background-color: unset;
border-bottom: 2px solid #657be7;
}
}
}
}
}
}
@media screen and (min-width: 992px) {
.navbar{
.navbar-container{
max-width: 900px;
}
}
}
@media screen and (min-width: 1200px) {
.navbar{
.navbar-container{
max-width: 1100px;
}
}
}
@media screen and (min-width: 1500px) {
.navbar{
.navbar-container{
max-width: 1400px;
}
}
}
@media screen and (min-width: 1900px) {
.navbar{
.navbar-container{
max-width: 1700px;
}
}
}
.nav-menu
: Le menu passe endisplay: flex
pour être visible en version desktop..nav-button
: Le bouton burger est masqué en version desktop.
JavaScript pour le menu burger
Le bouton burger doit permettre d'afficher ou masquer le menu en version mobile. Nous allons écrire un petit script JavaScript pour gérer cette interaction.
Fichier navbar.js
Créez un fichier navbar.js
dans le dossier assets/js/
et ajoutez le code suivant :
window.onload = () => {
const navButton = document.querySelector("#main-navbar .nav-button");
// Si on clique sur le bouton on ouvre le menu
navButton.addEventListener("click", function(event){
// On stoppe la propagation
event.stopPropagation();
// On ajoute la classe show ou on l'enlève
this.nextElementSibling.classList.toggle("show");
});
// Si on clique n'importe où, on ferme le menu
document.addEventListener("click", function(){
navButton.nextElementSibling.classList.remove("show");
})
}
navButton.addEventListener('click')
: Ajoute un événement qui bascule la classeshow
sur le menu pour l'afficher ou le masquer.document.addEventListener('click')
: Ferme le menu lorsque l'utilisateur clique en dehors de celui-ci.
Appel du script dans le HTML
N'oubliez pas d'inclure votre script dans le fichier importmap.php
'navbar' => [
'path' => './assets/js/navbar.js',
'entrypoint' => true,
],
Résultat final
- En version mobile : Le bouton burger est visible, et le menu est masqué jusqu'à ce que l'utilisateur clique dessus.
- En version desktop : Le menu est affiché sous forme de liens horizontaux, et le bouton burger est caché.
Conclusion
Ce tutoriel vous a montré comment créer une barre de navigation responsive sans utiliser de framework. Nous avons utilisé du SVG pour le bouton burger, SCSS pour les styles responsive, et du JavaScript pour contrôler l’affichage dynamique du menu.
N'hésitez pas à personnaliser ces éléments pour adapter la navigation à vos besoins !
Obtenir de l'aide
Pour obtenir de l'aide, vous pouvez accéder au serveur Discord pour une entraide par chat.