Bootstrap 4 Dropdown (Açılır Menü)

Bootstrap 4 Açılır Menü (Dropdown)

Bootstrap 4 de açılır menülere dropdown adı verilir. Basit bir açılır menü oluşturmak için aşağıdaki kodları yazmak yeterlidir.

Button Açılır Menü (Button Dropdown)

         <div class="dropdown"> <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown"> Açılır Menü Button </button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">1. Eleman</a> <a class="dropdown-item" href="#">2. Eleman</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">3. Eleman (ayrılmış)</a> </div> </div>

Link Açılır Menü(Link Dropdown)

<div class="dropdown show"> <a class="btn btn-secondary dropdown-toggle" href="#" role="button" data-toggle="dropdown"> Açılır Menü link </a> <div class="dropdown-menu" > <a class="dropdown-item" href="#">1. Eleman</a> <a class="dropdown-item" href="#">2. Eleman</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">3. Eleman (ayrılmış)</a> </div> </div> Yukarıdaki kodlarda görüleceği gibi açılır menü de ayrı bir eleman oluşturmak istendiğinde <div class="dropdown-divider"></div> kodu kullanılmalıdır.
Ayrıca menü için kullandığımız butonları Bootstrap4'ün hazır renklerini kullanarak renklendirebiliriz.
Örnek: <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown"> Yukarıdaki butonda primary rengi kullanılmıştır, primary yazan bölümü diğer renk isimleri ile değiştirerek butonları renklendirebiliriz.

Butonların büyüklüğü için açılır menüdeki butona .btn-lg veya btn-sm özellikleri verilmesi yeterlidir.

Farklı Yönlere Açılır Menüler

Bootstrap4 ile farklı yönlere açılır menü oluşturmak çok basit hale getirildi.
Önemli Not: Bu kodların çalıştırılması için popper.js dosyasının sayfaya yüklenmiş olması gereklidir.
Farklı yönlere açılır menü yapmak için en dışta bulunan div'e dropdown özelliği kaldırılıp yerine
yukarı yön için => dropup,
sol yön için => dropleft,
sağ yön için => dropright,
özellikleri verilmelidir.
Örnek: <div class="dropup"> <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown"> Yukarı Açılır Menü </button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">1. Eleman</a> <a class="dropdown-item" href="#">2. Eleman</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">3. Eleman (ayrılmış)</a> </div> </div>


Yorumlar


Yorum yapabilmek ve kaynak kodları indirebilmek için lütfen üye girişi yapın