Un menu Bootstrap plus rapide et plus simple

Un menu Bootstrap ultra-rapide sans dépendances

La plupart des webmasters qui me contactent pour le support des Core Web Vitals utilisent jQuery en combinaison avec un framework tel que Bootstrap. 

Pour tirer pleinement parti de Bootstrap, vous devrez ajouter pas moins de 3 scripts : jQuery, popper et bootstrap. 

<script src="/js/jquery.js"></script>
<script src="/js/popper.js"></script>
<script src="/js/bootstrap.js"></script>

Ces scripts prennent du temps à télécharger et à évaluer. Cela se fait pratiquement toujours au détriment du 'Time To Interactive' et, selon la construction de la page, également au détriment d'autres métriques Lighthouse telles que le First Contentful Paint et le Largest Contentful Paint. 

Je vais vous montrer comment corriger cela en utilisant uniquement du CSS et du JavaScript Vanilla sans aucune dépendance. Pour votre commodité, j'ai simplifié les exemples pour les rendre plus faciles à suivre.

Navigation mobile

Bootstrap utilise son propre JavaScript pour la navigation mobile. Pour moi, cela a toujours semblé excessif. Vous pouvez avoir un menu hamburger de navigation mobile sans JavaScript. Le code est en fait très simple. J'utiliserai un élément case à cocher invisible et le combinateur de frères adjacents CSS pour ouvrir et fermer l'élément de menu via CSS.   

Dès que vous cliquez sur le menu hamburger, la case à cocher devient active et cela entraîne l'affichage du menu.

Le code HTML

<nav>
 <input type="checkbox" id="real-navbar-toggle">
 <label for="real-navbar-toggle">☰</label>
 <ul>
   <li>
    <a href="#">Accueil</a>
   </li>
 </ul>
</nav>

Code CSS

#real-navbar-toggle{display:none;}
#real-navbar-toggle:checked ~ ul{display:block;}

Le résultat

Menus déroulants

Les menus déroulants sont un peu plus délicats. Bien sûr, je peux aussi utiliser l'élément case à cocher caché. Mais cela entraîne souvent des difficultés dans votre CMS où les menus sont créés automatiquement. C'est pourquoi j'utiliserai JavaScript pour cela. Cependant, le code que j'utilise est beaucoup plus rapide et ne nécessite aucune dépendance telle que jQuery. Vous pouvez utiliser ce script en remplacement de vos scripts actuels si vous le souhaitez.

Le code HTML

<nav>
 <div>Logo</div>
 <ul class="navbar-nav">
  <li>
   <a href="#">Accueil</a>
  </li>
  <li>
   <a class="dropdown-toggle" href="#">
    Menu déroulant
   </a>
   <div>
    <a href="#">Lien 1</a>
    <a href="#">Lien 2</a>
   </div>
  </li>
 </ul>
</nav>

Le code JavaScript

var elements = document.getElementsByClassName("dropdown-toggle");
for (var i = 0; i < elements.length; i++) {
    elements[i].addEventListener("click", function(e) {
        e.preventDefault();
        for (var y = 0; y < elements.length; y++) {
            if (elements[y] == this) {
                elements[y].nextElementSibling.classList.toggle("show");
            } else {
                elements[y].nextElementSibling.classList.remove("show");
            }
        }
    });
}

Le résultat