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

Hakkımızda

Bu site, website tasarımı yapılırken frontend(ön yüz) teknolojileri hakkında kısa anlatım ve örnekler paylaşmak amacıyla hazırlanmıştır.

Web tasarımda şu an için en sık kullanılan dil ve frameworkler HTML, CSS, JQUERY ve BOOTSTRAP olması sebebiyle bu alanların üzerinde örnekler ve çalışmalar olacaktır.

Son Yorumlar

İletişim

  • info@frontendokulu.com