Een razendsnel bootstrap menu

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

lighthouse 100 score

Perfect PageSpeed performance strategy

Een moderne website is een snelle website. Het is belangrijk om te blijven meten, optimalieren en controleren om snel te worden en te blijven.

Team up met de Core Web Vitals expert. Ik help de Core Web Vitals score van websites te verbeteren. Met meer dan 17 ervaring als technisch SEO consulent ken ik zorg ik voor een 'instant loading' website. Wil je dat ook? Laten we dan eens contact hebben!

PageSpeed services

gamerguides

⭐⭐⭐⭐⭐

"Arjen is an extremely talented Technical SEO Specialist. In just a matter of weeks he has worked hard to improve our Lighthouse scores to near perfect levels! We can't recommend him highly enough!"

Sophia Hayes, Founder & CEO at Gamer Guides

Erasmus MC

⭐⭐⭐⭐⭐

"Arjen really is the one and only PageSpeed wizard! He has helped us improve our Core Web Citals score where others could not help us. He is professional, helpfull, patient, kind and will get the job done"

Dr J.A.A Stoop at Erasmus MC

MGU

⭐⭐⭐⭐⭐

Arjen is truly a "PageSpeed Wizard". 🧙 With his incredible expertise at www.Corewebvitals.io, he has helped us improve the speed of our website tremendously. 🚀 Arjen has always been super nice and helpful and has gone the extra mile in every way. ⭐Top experience. Highly recommended.

Tobias Bargmann at MGU