Een razendsnel bootstrap menu zonder afhankelijkheden

Veel webmasters die bij mij aankloppen voor Core Web Vitals ondersteuning maken gebruik van jQuery in combinatie met een framework zoals Bootstrap. 

Wanneer je bootstrap volledig wilt gebruiken dan zul je maar liefst 3 scripts toe moeten voegen. jQuery, popper en bootstrap. 

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

Het kost tijd om deze scripts te downloaden en het kost tijd om deze uit te voeren.  Dat gaat praktisch altijd ten koste van de 'Time To Interactive' en afhankelijk van hoe de pagina er verder uitziet ook ten kosten van andere metrics Zoals First Contentful Paint en Largest Contentful Paint. Ik ga je laten zien hoe dit vele malen sneller kan.  Voor jouw gemak heb ik de voorbeelden wat versimpelt zodat ze goed te volgen zijn.

Mobiele navigatie

Voor mobiele navigatie gebruikt bootstrap haar eigen JavaScript. Eigenlijk is dat nergens voor nodig. We kunnen dit prima af zonder JavaScript. De code is eigenlijk heel eenvoudig. We gebruiken hiervoor een onzichtbaar checkbox element en de CSS subsequent-sibling combinator om het menu element via CSS open en dicht te klappen. 

Zodra je op het hamburger menu klikt wordt de checkbox actief en dat zorgt er voor dat het menu getoond wordt.

De HTML code

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

De CSS code

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

Het resultaat

Dropdown menu's

Dropdown menu's zijn iets lastiger. Natuurlijk kunnen we ook gebruik maken van het verborgen checkbox element. Maar dat pas vaak lastig in jouw CMS waar menu's automatisch worden geplaatst. Daarom gebruik ik hier wel JavaScript voor. Je kunt dit script als een drop-in gebruiken voor jouw huide script.

Dropdown menu's zijn iets lastiger. Natuurlijk kunnen we ook gebruik maken van het verborgen radio element. Maar dat pas vaak lastig in jouw CMS. Daarom gebruik ik hier wel JavaScript voor.

De HTML code

<nav>
 <div>Logo</div>
 <ul class="navbar-nav">
  <li>
   <a href="#">Home</a>
  </li>
  <li>
   <a class="dropdown-toggle" href="#">
    Dropdown toggle
   </a>
   <div>
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
   </div>
  </li>
 </ul>
</nav>

De JavaScript code

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");
            }
        }
    });
}

Het resultaat