Ein schnelleres und einfacheres Bootstrap-Menü

Ein blitzschnelles Bootstrap-Menü ohne Abhängigkeiten

Die meisten Webmaster, die wegen Core Web Vitals-Unterstützung zu mir kommen, verwenden jQuery in Kombination mit einem Framework wie Bootstrap. 

Um Bootstrap voll auszuschöpfen, müssen Sie nicht weniger als 3 Skripte hinzufügen. jQuery, Popper und Bootstrap. 

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

Diese Skripte benötigen Zeit zum Herunterladen und Auswerten. Dies geht praktisch immer auf Kosten der 'Time To Interactive' und, je nachdem wie die Seite aufgebaut ist, auch auf Kosten anderer Lighthouse-Metriken wie First Contentful Paint und Largest Contentful Paint. 

Ich werde Ihnen zeigen, wie Sie dies beheben können, indem Sie nur CSS und Vanilla JavaScript ohne Abhängigkeiten verwenden. Der Einfachheit halber habe ich die Beispiele vereinfacht, damit sie leichter zu befolgen sind.

Mobile Navigation

Bootstrap verwendet sein eigenes JavaScript für die mobile Navigation. Für mich schien das immer übertrieben. Sie können ein mobiles Navigations-Hamburger-Menü ohne JavaScript haben. Der Code ist eigentlich sehr einfach. Ich werde ein unsichtbares Checkbox-Element und den CSS subsequent-sibling combinator verwenden, um das Menüelement über CSS zu öffnen und zu schließen.   

Sobald Sie auf das Hamburger-Menü klicken, wird die Checkbox aktiv und das führt dazu, dass das Menü angezeigt wird.

Der 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;}

Das Ergebnis

Dropdown-Menüs

Dropdown-Menüs sind etwas kniffliger. Natürlich kann ich auch das versteckte Checkbox-Element verwenden. Aber das führt oft zu Schwierigkeiten in Ihrem CMS, wo Menüs automatisch erstellt werden. Deshalb werde ich dafür JavaScript verwenden. Nur der Code, den ich verwende, ist viel schneller und erfordert keine Abhängigkeiten wie jQuery. Sie können dieses Skript als Drop-in für Ihre aktuellen Skripte verwenden, wenn Sie möchten.

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

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

Das Ergebnis