Un menu bootstrap più veloce e semplice

Un menu bootstrap velocissimo senza dipendenze

La maggior parte dei webmaster che si rivolgono a me per il supporto Core Web Vitals utilizza jQuery in combinazione con un framework come Bootstrap. 

Per sfruttare appieno  bootstrap, dovrai aggiungere non meno di 3 script. jQuery, popper e bootstrap. 

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

Questi script richiedono tempo per essere scaricati e valutati. Questo va praticamente sempre a scapito del 'Time To Interactive' e, a seconda di come è costruita la pagina, anche a scapito di altre metriche Lighthouse come First Contentful Paint e Largest Contentful Paint. 

Ti mostrerò come risolvere questo problema utilizzando solo CSS e Vanilla JavaScript senza dipendenze. Per comodità, ho semplificato gli esempi per renderli più facili da seguire.

Navigazione mobile

Bootstrap utilizza il proprio JavaScript per la navigazione mobile. A me è sempre sembrato eccessivo. Puoi avere un menu hamburger per la navigazione mobile senza JavaScript. Il codice è in realtà molto semplice. Utilizzerò un elemento checkbox invisibile e il combinatore CSS di fratelli successivi per aprire e chiudere l'elemento menu tramite CSS.   

Non appena clicchi sul menu hamburger, la checkbox diventa attiva e il menu viene visualizzato.

Il codice HTML

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

Codice CSS

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

Il risultato

Menu a tendina

I menu a tendina sono un po' più complicati. Naturalmente posso anche utilizzare l'elemento checkbox nascosto. Ma questo spesso porta a difficoltà nel tuo CMS dove i menu vengono creati automaticamente. Ecco perché utilizzerò JavaScript per questo. Solo che il codice che sto usando è molto più veloce e non richiede dipendenze come jQuery. Puoi usare questo script come sostituto diretto dei tuoi script attuali, se vuoi.

Il codice HTML

<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>

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

Il risultato