"Enter"a basıp içeriğe geçin

Bootstrap 4’de Hover Dropdown Menü Yapmak

Genelde projelerde Bootstrap’ı sıkça kullanmaktayız. Bundan dolayı bazı durumlarda web sitelerine alt menü eklemek istediğimizde aşağıdaki yöntemi uyguluyoruz. Oldukça basit ve hızlı bir şekilde Bootstrapın resmi sitesindeki dökümantasyonlarda gördüğünüz dropdown’ı olan navbar örneklerinde  bu css kodu sorunsuz çalışmaktadır.

.dropdown {
      &:hover {
        &>.dropdown-menu {
          display: block;
        }
      }
      &>.dropdown-toggle{
        &:active{
          pointer-events: none;
        }
      }
    }

Bildiğiniz gibi mobil cihazlarda hover özelliği olmadığı için bu css kodunu @media CSS kullanarak ekliyorum sadece desktop ölçülerinde kullanırsanız mobil cihazlarda dropdown menü normal bootstrap varsayılandaki gibi çalışır.

Kaynaklar;

https://getbootstrap.com/docs/4.0/components/navbar/ 

https://stackoverflow.com/questions/42183672/bootstrap-v4-navbar-dropdown-hover