Een sneller en eenvoudiger bootstrap menu

Een bliksemsnel bootstrap menu zonder afhankelijkheden

De meeste webmasters die naar mij toe komen voor Core Web Vitals ondersteuning gebruiken jQuery in combinatie met een framework zoals Bootstrap. 

Om volledig gebruik te maken van bootstrap, zul je niet minder dan 3 scripts moeten toevoegen. jQuery, popper en bootstrap. 

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

Deze scripts kosten tijd om te downloaden en te evalueren. Dit gaat vrijwel altijd ten koste van de 'Time To Interactive' en, afhankelijk van hoe de pagina is opgebouwd, ook ten koste van andere Lighthouse metrics zoals First Contentful Paint en Largest Contentful Paint. 

Ik ga je laten zien hoe je dit kunt oplossen door alleen CSS en Vanilla JavaScript te gebruiken zonder afhankelijkheden. Voor jouw gemak heb ik de voorbeelden vereenvoudigd om ze makkelijker te volgen te maken.

Mobiele navigatie

Bootstrap gebruikt zijn eigen JavaScript voor mobiele navigatie. Voor mij leek dat altijd overkill. Je kunt een mobiel navigatie hamburger menu hebben zonder JavaScript. De code is eigenlijk heel simpel. Ik zal een onzichtbaar checkbox element gebruiken en de CSS subsequent-sibling combinator om het menu element via CSS te openen en sluiten.   

Zodra je op het hamburger menu klikt, wordt de checkbox actief en dat leidt ertoe dat het menu wordt weergegeven.

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>

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 kan ik ook het verborgen checkbox element gebruiken. Maar dat leidt vaak tot moeilijkheden in je CMS waar menu's automatisch worden aangemaakt. Daarom zal ik hiervoor JavaScript gebruiken. Alleen de code die ik gebruik is veel sneller en vereist geen afhankelijkheden zoals jQuery. Je kunt dit script als drop-in gebruiken voor je huidige scripts als je wilt.

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