Prendre RDV calendar
Recevoir mon devis

Comment créer un menu vertical dans WordPress ?

Créer un menu vertical WordPress sans Elementor Pro, c’est simple : il suffit d’utiliser deux extensions gratuites, Royal Addons et ElementsKit pour concevoir une sidebar moderne qui s’ouvre et se referme au clic. En quelques étapes, vous pouvez intégrer un menu fluide, responsive et entièrement personnalisable, sans recourir à Elementor Pro.

Que vous souhaitiez optimiser l’ergonomie d’un site vitrine, d’un blog ou d’une boutique en ligne, cette méthode fonctionne à merveille. Et si vous préférez gagner du temps, vous pouvez configurer votre devis de création de site WordPress : en quelques clics, estimez le coût de votre projet et obtenez une solution clé en main, adaptée à vos besoins.

Code CSS à ajouter dans votre conteneur

				
					:root{
  --sidebar-width: 320px;
  --sidebar-narrow: 72px;
}

.sidebar{
  position: fixed; top: 0; left: 0;
  height: 100vh; width: var(--sidebar-width);
  overflow: hidden auto;
  -webkit-overflow-scrolling: touch;
  z-index: 1000;
  transition: width .3s ease, transform .3s ease, padding .3s ease;
  padding: 32px 28px;
  will-change: width, transform, padding;
  backface-visibility: hidden;
}

body.nav-collapsed .sidebar{
  width: var(--sidebar-narrow);
  padding: 24px 10px;
}

.sidebar .elementor-icon-list-text,
.sidebar .elementor-heading-title,
.sidebar .elementor-widget-text-editor,
.sidebar .elementor-button-text,
.sidebar .logo-text{
  white-space: nowrap;
  overflow: hidden;
  transition: opacity .2s ease, max-width .2s ease, margin .2s ease;
}

body:not(.nav-collapsed) .sidebar .elementor-icon-list-text,
body:not(.nav-collapsed) .sidebar .elementor-heading-title,
body:not(.nav-collapsed) .sidebar .elementor-widget-text-editor,
body:not(.nav-collapsed) .sidebar .elementor-button-text,
body:not(.nav-collapsed) .sidebar .logo-text{
  opacity: 1; max-width: 600px;
}

body.nav-collapsed .sidebar .elementor-icon-list-text,
body.nav-collapsed .sidebar .elementor-heading-title,
body.nav-collapsed .sidebar .elementor-widget-text-editor,
body.nav-collapsed .sidebar .elementor-button-text,
body.nav-collapsed .sidebar .logo-text{
  opacity: 0; max-width: 0; margin: 0; pointer-events: none;
}

body.nav-collapsed .sidebar .logo,
body.nav-collapsed .sidebar .cta{
  display: none !important;
}

.sidebar .menu-toggle{
  cursor: pointer; position: absolute; top: 22px; right: 18px; z-index: 2;
}

@media (max-width: 767px){
  body.nav-collapsed .sidebar{
    transform: translateX(-100%);
    width: var(--sidebar-width);
    padding: 32px 28px;
  }
  body:not(.nav-collapsed) .sidebar{
    transform: translateX(0);
  }
}

@media (prefers-reduced-motion: reduce){
  .sidebar, .sidebar *{ transition: none !important; }
}

Code à ajouter dans le widget HTML

				
					<script>
document.addEventListener('DOMContentLoaded', () => {
  const d = document, b = d.body;

  d.addEventListener('click', e => {
    const btn = e.target.closest('.menu-toggle');
    if (!btn) return;
    b.classList.toggle('nav-collapsed');
  });

  const links = Array.from(d.querySelectorAll('.sidebar a[href^="#"]'))
    .filter(a => a.getAttribute('href').length > 1);

  const map = new Map();
  links.forEach(a => {
    const id = a.getAttribute('href').slice(1);
    const li = a.closest('.elementor-icon-list-item') || a.parentElement;
    map.set(id, li);
  });

  const sections = Array.from(map.keys())
    .map(id => d.getElementById(id))
    .filter(Boolean);

  const clearActive = () => {
    map.forEach(li => li && li.classList.remove('is-active'));
  };

  const setActive = id => {
    clearActive();
    const li = map.get(id);
    if (li) li.classList.add('is-active');
  };

  const obs = new IntersectionObserver(entries => {
    const visible = entries
      .filter(e => e.isIntersecting)
      .sort((a, b) => b.intersectionRatio - a.intersectionRatio)[0];
    if (visible && visible.target && visible.target.id) {
      setActive(visible.target.id);
    }
  }, {
    root: null,
    threshold: [0.5],
    rootMargin: '0px 0px -20% 0px'
  });

  sections.forEach(sec => obs.observe(sec));

  links.forEach(a => {
    a.addEventListener('click', () => {
      const id = a.getAttribute('href').slice(1);
      if (!id) return;
      const target = d.getElementById(id);
      if (!target) return;
      setActive(id);
    }, { capture: false });
  });

  setTimeout(() => {
    let current = sections[0], top = Infinity;
    sections.forEach(sec => {
      const rect = sec.getBoundingClientRect();
      if (rect.top >= 0 && rect.top < top) { top = rect.top; current = sec; }
    });
    if (current && current.id) setActive(current.id);
  }, 300);
});
</script>

Code à ajouter dans le CSS de votre liste d'icônes

				
					selector{
  --radius: 100px;
  --pad-y: 12px;
  --pad-x: 18px;
  --label-min: 140px;
  --text: #ffffff;
  --text-active: #C76647;
  --pill: #ffffff;
  --stroke: .5px;
  --stroke-active: 1px;
  --scroll-offset: 80px;
}

selector .elementor-icon-list-icon{
  color: var(--text);
  text-align: center;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke-width: var(--stroke);
  -webkit-text-stroke-color: currentColor;
  transition: -webkit-text-stroke-width .2s ease, color .2s ease, transform .2s ease;
  will-change: transform;
}
selector .elementor-icon-list-icon i{
  color: var(--text);
  transition: color .2s ease, transform .2s ease;
}
selector .elementor-icon-list-icon svg path{
  fill: var(--text);
  transition: fill .2s ease, transform .2s ease;
}

selector .elementor-icon-list-item a{
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: var(--pad-y) var(--pad-x);
  border-radius: var(--radius);
  text-decoration: none;
  outline: none;
  transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
  -webkit-tap-highlight-color: transparent;
}

selector .elementor-icon-list-text{
  min-width: var(--label-min);
  color: var(--text);
  transition: color .2s ease, opacity .2s ease;
}

selector .elementor-icon-list-item:hover a,
selector .elementor-icon-list-item.active a,
selector .elementor-icon-list-item.is-active a{
  background: var(--pill);
  box-shadow: 0 2px 10px rgba(0,0,0,.08);
}

selector .elementor-icon-list-item:hover .elementor-icon-list-text,
selector .elementor-icon-list-item.active .elementor-icon-list-text,
selector .elementor-icon-list-item.is-active .elementor-icon-list-text{
  color: var(--text-active);
}

selector .elementor-icon-list-item:hover .elementor-icon-list-icon,
selector .elementor-icon-list-item.active .elementor-icon-list-icon,
selector .elementor-icon-list-item.is-active .elementor-icon-list-icon{
  -webkit-text-stroke-width: var(--stroke-active);
  color: var(--text-active);
}
selector .elementor-icon-list-item:hover .elementor-icon-list-icon i,
selector .elementor-icon-list-item.active .elementor-icon-list-icon i,
selector .elementor-icon-list-item.is-active .elementor-icon-list-icon i{
  color: var(--text-active);
}
selector .elementor-icon-list-item:hover .elementor-icon-list-icon svg path,
selector .elementor-icon-list-item.active .elementor-icon-list-icon svg path,
selector .elementor-icon-list-item.is-active .elementor-icon-list-icon svg path{
  fill: var(--text-active);
}

selector .elementor-icon-list-item:hover .elementor-icon-list-icon{
  transform: translateX(1px);
}

selector .elementor-icon-list-item a:focus-visible{
  box-shadow: 0 0 0 3px rgba(255,255,255,.6), 0 0 0 6px rgba(0,0,0,.25);
  background: var(--pill);
  color: var(--text-active);
}

html{ scroll-behavior: smooth; }
[id]{ scroll-margin-top: var(--scroll-offset); }

@media (prefers-reduced-motion: reduce){
  selector .elementor-icon-list-item a,
  selector .elementor-icon-list-text,
  selector .elementor-icon-list-icon,
  selector .elementor-icon-list-icon i,
  selector .elementor-icon-list-icon svg path{
    transition: none !important;
  }
}

Code CSS à ajouter dans le conteneur pour mobile

				
					selector{
    height: 0;
}

Installer les bonnes extensions avant de commencer

Pour ce tutoriel, vous n’aurez pas besoin d’Elementor Pro, mais de deux extensions gratuites :

  • Royal Addons : pour pouvoir ajouter du CSS personnalisé.

  • ElementsKit : pour créer un header et un footer gratuitement.

Ces deux outils suffisent largement pour concevoir votre menu vertical WordPress.
Une fois les extensions installées et activées, rendez-vous dans votre tableau de bord WordPress, puis créez un nouveau template dans ElementsKit.
Donnez-lui un nom, par exemple “Test YouTube”, et désactivez-le temporairement avant d’éditer le contenu.

Créer la structure de base du menu

Commencez par ajouter une section pleine largeur (250px de large environ) et appliquez-lui une couleur d’arrière-plandans l’onglet Style → Superposition.
Dans le champ Classe CSS, ajoutez :
sidebar

➡️ Le code correspondant à cette étape est disponible en haut de l’article.

Désactivez ensuite la marge interne de la section pour un rendu propre, puis insérez le premier code CSS fourni en haut de la page.

Configurer les premiers éléments visuels

À l’intérieur de cette section, ajoutez un conteneur en affichage horizontal.
Placez-y :

  • une image (votre logo) à gauche ;

  • une icône (menu hamburger) à droite.

Ajustez leur taille (environ 33px pour l’icône), alignez-les au centre et mettez-les en blanc. Vous obtenez déjà la première ligne de votre menu.

Ensuite, ajoutez un nouveau conteneur vertical pour les éléments de navigation.
Si vous rencontrez un problème pour l’ajouter, dupliquez simplement le conteneur précédent, puis changez son orientation en vertical.

Créer la liste des liens du menu

Dans ce nouveau conteneur, insérez une liste d’icônes.
Chaque élément du menu doit correspondre à une section de votre page “one page”. Par exemple :

  • Accueil

  • Programme

  • À propos

  • Témoignages

  • Contact

Choisissez des icônes simples et reconnaissables (ex. balle, personne, bulle de discussion, enveloppe).
Ajustez leur taille (20px), l’espacement (30px), et la couleur (blanc pour le texte et les icônes).

Ajoutez ensuite un bouton d’appel à l’action (CTA) en bas du menu, comme “Prendre rendez-vous”.
Mettez-le avec un fond transparent et une bordure colorée.

Ajouter la section contact et les réseaux sociaux

Pour terminer la structure, dupliquez la dernière partie du menu et transformez-la en une section contact.
Ajoutez-y :

  • une icône d’e-mail avec un lien mailto:

  • une icône de téléphone avec un lien tel:

  • un titre “Contact”

  • vos icônes de réseaux sociaux (en cercle, de petite taille).

➡️ Le code CSS correspondant à cette section est disponible en haut de l’article.

Astuce : choisissez des icônes “pleines” pour pouvoir gérer plus facilement les effets au survol.

Appliquer les classes CSS et le code d’interaction

À présent, pour rendre votre menu vertical WordPress dynamique, il faut relier les différents éléments avec les bonnes classes CSS :

  • Logo → logo

  • Bouton CTA → cta

  • Icône hamburger → menu-toggle

  • Liste de navigation → navigation

➡️ Copiez à ce stade le second et le troisième code présents en haut de la page.

Ces scripts permettent notamment de :

  • faire apparaître ou disparaître le menu au clic sur l’icône hamburger,

  • masquer certains éléments selon les tailles d’écran,

  • appliquer les bons styles de survol et de transitions.

Relier les sections du menu aux ancres de votre page

Pour que chaque lien du menu redirige vers la bonne section, vous devez :

  1. Ouvrir votre page principale avec Elementor.

  2. Sélectionner chaque section et lui attribuer une ID CSS claire :

    • accueil

    • programme

    • propos

    • avis

    • contact

  3. Dans votre menu, associez à chaque élément un lien d’ancre :

    • #accueil

    • #programme

    • #propos

    • #avis

    • #contact

Ainsi, lorsqu’un visiteur clique sur “Programme”, il sera automatiquement redirigé vers la section correspondante.

Adapter le menu vertical pour le format mobile

Sur mobile, votre menu doit s’afficher et disparaître proprement.
Pour cela :

  • Créez une nouvelle section horizontale avec 10px de hauteur.

  • Ajoutez une icône de menu centrée, avec un fond coloré et des bords arrondis.

  • Donnez-lui la classe menu-toggle et appliquez-lui le code CSS mobile disponible plus haut.

  • Masquez cette section sur ordinateur et tablette, et inversement, masquez le menu latéral sur mobile.

Vous obtenez un menu entièrement responsive :
sur ordinateur, il reste visible sur le côté ;
sur mobile, il s’affiche uniquement au clic sur le bouton hamburger.

Finaliser et tester votre menu vertical WordPress

Une fois toutes les étapes terminées :

  • publiez votre header personnalisé,

  • activez le template sur l’ensemble du site,

  • testez les interactions et les liens d’ancrage.

Rechargez votre page : le menu vertical WordPress s’affiche à gauche, se déploie en un clic et vous permet de naviguer entre les sections sans rechargement de page.
Simple, propre et efficace.

Ce qu’il faut retenir

Créer un menu vertical WordPress sans Elementor Pro n’a rien de compliqué.
Avec un peu de logique et les bons réglages CSS, vous pouvez :

  • obtenir un design moderne et fluide,

  • améliorer l’expérience utilisateur,

  • conserver une totale liberté de personnalisation.

C’est une solution légère et élégante, idéale pour les sites “one page” ou les portfolios.
Et surtout, elle ne nécessite aucune version payante d’Elementor !

Sommaire

Découvre mes autres vidéos Youtube
Voir mes vidéos
Audit gratuit de votre site internet
Demander un audit
Victor Mailloux
Facebook Youtube Linkedin Instagram Tiktok
Qui se cache derrière Web armor ?
Expert WordPress

Je me suis d’abord lancé comme freelance, créant mes premiers sites WordPress en 2022 et me formant progressivement au SEO et au design web. Fin 2023, j’ai fondé Agence web armor, pour accompagner les entreprises dans leur présence en ligne. Aujourd’hui, je conçois des sites simples, rapides et bien référencés, pensés pour attirer des visiteurs qualifiés et générer des résultats concrets.

Prendre RDV avec moi calendar
Découvre d’autres articles similaires
Charger plus