Een razendsnel bootstrap menu

Arjen Karel Core Web Vitals Consultant
Arjen Karel
linkedin

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>

Critical request chain example

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

I help sites pass the Core Web Vitals:

lighthouse 100 score

A slow website is likely to miss out on conversions and revenue. Nearly half of internet searchers don't wait three seconds for a page to load before going to another site. Ask yourself: "Is my site fast enough to convert visitors into customers?" As a PageSpeed expert I will fix your PageSpeed problems once and for all. I can perform a page speed audit based on the Core Web Vitals guidelines, work with your team or fix your issues myself.

Core Web Vitals Consultancy

In-house Core Web Vitals support.

read more

Core Web Vitals site audits

Improve and fix your PageSpeed strategy

read more

Core Web Vitals training & workshops

Build in-house knowledge and empower your teams

read more

WordPress  optimization

Fix your WordPress Core web vitals issues

read more

Een sneller en simpeler bootstrap menuCore Web Vitals Een sneller en simpeler bootstrap menu