Daha hızlı ve daha basit bir bootstrap menüsü

Bağımlılıksız, yıldırım hızında bir bootstrap menüsü

Core Web Vitals desteği için bana gelen web yöneticilerinin çoğu jQuery'yi Bootstrap gibi bir framework ile birlikte kullanır. 

Bootstrap'tan tam olarak yararlanmak için en az 3 script eklemeniz gerekir. jQuery, popper ve bootstrap. 

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

Bu scriptlerin indirilmesi ve değerlendirilmesi zaman alır. Bu neredeyse her zaman 'Time To Interactive' aleyhine olur ve sayfanın nasıl oluşturulduğuna bağlı olarak First Contentful Paint ve Largest Contentful Paint gibi diğer Lighthouse metrikleri aleyhine de olabilir. 

Size bunu yalnızca CSS ve Vanilla JavaScript kullanarak, hiçbir bağımlılık olmadan nasıl düzelteceğinizi göstereceğim. Kolaylığınız için örnekleri takip etmesi daha kolay olacak şekilde basitleştirdim.

Mobil navigasyon

Bootstrap, mobil navigasyon için kendi JavaScript'ini kullanır. Bu bana her zaman aşırı gelmiştir. JavaScript olmadan da bir mobil navigasyon hamburger menüsüne sahip olabilirsiniz. Kod aslında çok basittir. Menü öğesini CSS aracılığıyla açıp kapatmak için görünmez bir checkbox öğesi ve CSS subsequent-sibling combinator kullanacağım.   

Hamburger menüsüne tıkladığınızda checkbox aktif olur ve menü görüntülenir.

HTML kodu

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

CSS kodu

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

Sonuç

Dropdown menüler

Dropdown menüler biraz daha karmaşıktır. Elbette gizli checkbox öğesini de kullanabilirim. Ancak bu genellikle menülerin otomatik olarak oluşturulduğu CMS'nizde zorluklara yol açar. Bu yüzden bunun için JavaScript kullanacağım. Yalnızca kullandığım kod çok daha hızlıdır ve jQuery gibi herhangi bir bağımlılık gerektirmez. Dilerseniz bu scripti mevcut scriptleriniz yerine doğrudan kullanabilirsiniz.

HTML kodu

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

JavaScript kodu

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

Sonuç