Un menú bootstrap más rápido y sencillo

Un menú bootstrap ultrarrápido sin dependencias

La mayoría de los webmasters que acuden a mí para soporte de Core Web Vitals utilizan jQuery en combinación con un framework como Bootstrap. 

Para aprovechar al máximo bootstrap, tendrá que añadir no menos de 3 scripts. jQuery, popper y bootstrap. 

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

Estos scripts toman tiempo para descargarse y evaluarse. Esto es prácticamente siempre a expensas del 'Time To Interactive' y, dependiendo de cómo esté construida la página, también a expensas de otras métricas de lighthouse como First Contentful Paint y Largest Contentful Paint. 

Voy a mostrarle cómo solucionar esto usando solo CSS y Vanilla JavaScript sin dependencias. Para su comodidad, he simplificado los ejemplos para que sean más fáciles de seguir.

Navegación móvil

Bootstrap utiliza su propio JavaScript para la navegación móvil. Para mí eso siempre pareció exagerado. Puede tener un menú hamburguesa de navegación móvil sin JavaScript. El código es en realidad muy simple. Usaré un elemento checkbox invisible y el CSS subsequent-sibling combinator para abrir y cerrar el elemento del menú vía CSS.   

Tan pronto como haga clic en el menú hamburguesa, la casilla de verificación se activa y eso lleva a que se muestre el menú.

El código HTML

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

Código CSS

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

El resultado

Menús desplegables

Los menús desplegables son un poco más complicados. Por supuesto, también puedo usar el elemento checkbox oculto. Pero eso a menudo conlleva dificultades en su CMS donde los menús se crean automáticamente. Es por eso que usaré JavaScript para esto. Solo que el código que estoy usando es mucho más rápido y no requiere ninguna dependencia como jQuery. Puede usar este script como un reemplazo directo para sus scripts actuales si lo desea.

El código HTML

<nav>
 <div>Logo</div>
 <ul class="navbar-nav">
  <li>
   <a href="#">Inicio</a>
  </li>
  <li>
   <a class="dropdown-toggle" href="#">
    Alternar desplegable
   </a>
   <div>
    <a href="#">Enlace 1</a>
    <a href="#">Enlace 2</a>
   </div>
  </li>
 </ul>
</nav>

El código 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");
            }
        }
    });
}

El resultado