Source

açılır menüler

Bootstrap açılır eklentisi ile bağlantı listelerini ve daha fazlasını görüntülemek için bağlamsal bindirmeleri açın.

genel bakış

Açılır listeler, bağlantı listelerini ve daha fazlasını görüntülemek için değiştirilebilir, bağlamsal bindirmelerdir. Dahil edilen Bootstrap açılır JavaScript eklentisi ile etkileşimli hale getirilirler. Fareyle üzerine gelinerek değil, tıklatılarak değiştirilirler; bu kasıtlı bir tasarım kararıdır.

Açılır listeler , dinamik konumlandırma ve görünüm alanı algılaması sağlayan Popper.js adlı üçüncü taraf kitaplığı üzerine kuruludur. Popper.min.js dosyasını Bootstrap'ın JavaScript'inden önce eklediğinizden veya Popper.js içeren bootstrap.bundle.min.js/ öğesini kullandığınızdan emin olun . bootstrap.bundle.jsPopper.js, dinamik konumlandırma gerekli olmadığı için gezinme çubuklarındaki açılır menüleri konumlandırmak için kullanılmaz.

JavaScript'imiziutil.js kaynaktan oluşturuyorsanız, .

Ulaşılabilirlik

WAI ARIA standardı, gerçek bir pencere öğesi tanımlar , role="menu"ancak bu, eylemleri veya işlevleri tetikleyen uygulama benzeri menülere özeldir. ARIA menüleri yalnızca menü öğelerini, onay kutusu menü öğelerini, radyo düğmesi menü öğelerini, radyo düğmesi gruplarını ve alt menüleri içerebilir.

Bootstrap'in açılır listeleri ise genel olacak ve çeşitli durumlara ve işaretleme yapılarına uygulanabilir olacak şekilde tasarlanmıştır. Örneğin, arama alanları veya oturum açma formları gibi ek girdiler ve form kontrolleri içeren açılır menüler oluşturmak mümkündür. Bu nedenle Bootstrap, gerçek ARIA menüleri için gerekli roleand aria-özniteliklerinin hiçbirini beklemez (veya otomatik olarak eklemez) . Yazarların bu daha spesifik özellikleri kendilerinin dahil etmesi gerekecektir.

.dropdown-itemAncak Bootstrap , imleç tuşlarını kullanarak tek tek öğeler arasında hareket etme ve tuşla menüyü kapatma gibi çoğu standart klavye menüsü etkileşimi için yerleşik destek ekler ESC.

Örnekler

Açılır menünün geçişini (düğmeniz veya bağlantınız) ve içindeki açılır menüyü .dropdownveya bildiren başka bir öğeyi sarın position: relative;. Potansiyel ihtiyaçlarınıza daha iyi uyması için açılır öğeler <a>veya öğelerden tetiklenebilir .<button>

Tek düğmeli açılır menüler

Herhangi bir single .btn, bazı biçimlendirme değişiklikleriyle açılır bir geçişe dönüştürülebilir. Bunları her iki öğeyle de nasıl çalıştırabileceğiniz aşağıda açıklanmıştır <button>:

Action Another action Something else here 
<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>

Ve <a>elemanlarla:

Action Another action Something else here 
<div class="dropdown show">
  <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown link
  </a>

  <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>

En iyi yanı, bunu herhangi bir düğme varyantıyla da yapabilmenizdir:

Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link 
<!-- Example single danger button -->
<div class="btn-group">
  <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Separated link</a>
  </div>
</div>

Bölme düğmesi açılır menüleri

Benzer şekilde, tek düğmeli açılır menülerle hemen hemen aynı işaretlemeyle, ancak .dropdown-toggle-splitaçılır düzeltme işaretinin etrafına uygun boşluk eklenmesiyle bölünmüş düğme açılır listeleri oluşturun.

Bu ekstra sınıfı padding, düzeltme işaretinin her iki tarafındaki yatay çizgiyi %25 oranında azaltmak ve margin-leftnormal düğme açılır menüleri için eklenenleri kaldırmak için kullanıyoruz. Bu ekstra değişiklikler, düzeltme işaretini bölme düğmesinin ortasında tutar ve ana düğmenin yanında daha uygun boyutta bir vuruş alanı sağlar.

Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link 
<!-- Example split danger button -->
<div class="btn-group">
  <button type="button" class="btn btn-danger">Action</button>
  <button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Separated link</a>
  </div>
</div>

boyutlandırma

Düğme açılır menüleri, varsayılan ve bölünmüş açılır düğmeler dahil olmak üzere tüm boyutlardaki düğmelerle çalışır.

<!-- Large button groups (default and split) -->
<div class="btn-group">
  <button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Large button
  </button>
  <div class="dropdown-menu">
    ...
  </div>
</div>
<div class="btn-group">
  <button class="btn btn-secondary btn-lg" type="button">
    Large split button
  </button>
  <button type="button" class="btn btn-lg btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    ...
  </div>
</div>

<!-- Small button groups (default and split) -->
<div class="btn-group">
  <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Small button
  </button>
  <div class="dropdown-menu">
    ...
  </div>
</div>
<div class="btn-group">
  <button class="btn btn-secondary btn-sm" type="button">
    Small split button
  </button>
  <button type="button" class="btn btn-sm btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    ...
  </div>
</div>

Açılan varyasyon

.dropupAna öğeye ekleyerek öğelerin üzerindeki açılır menüleri tetikleyin .

Action Another action Something else here
Separated link
Action Another action Something else here
Separated link 
<!-- Default dropup button -->
<div class="btn-group dropup">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropup
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>

<!-- Split dropup button -->
<div class="btn-group dropup">
  <button type="button" class="btn btn-secondary">
    Split dropup
  </button>
  <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>

Dropright varyasyonu

.droprightAna öğeye ekleyerek öğelerin sağındaki açılır menüleri tetikleyin .

Action Another action Something else here
Separated link
Action Another action Something else here
Separated link 
<!-- Default dropright button -->
<div class="btn-group dropright">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropright
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>

<!-- Split dropright button -->
<div class="btn-group dropright">
  <button type="button" class="btn btn-secondary">
    Split dropright
  </button>
  <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropright</span>
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>

Dropleft varyasyonu

.dropleftAna öğeye ekleyerek öğelerin solundaki açılır menüleri tetikleyin .

Action Another action Something else here
Separated link
Action Another action Something else here
Separated link 
<!-- Default dropleft button -->
<div class="btn-group dropleft">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropleft
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>

<!-- Split dropleft button -->
<div class="btn-group">
  <div class="btn-group dropleft" role="group">
    <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      <span class="sr-only">Toggle Dropleft</span>
    </button>
    <div class="dropdown-menu">
      <!-- Dropdown menu links -->
    </div>
  </div>
  <button type="button" class="btn btn-secondary">
    Split dropleft
  </button>
</div>

Tarihsel olarak açılır menü içerikleri bağlantılar olmak zorundaydı , ancak artık v4'te durum böyle değil. Artık, açılır listelerinizde yalnızca s <button>yerine öğeleri isteğe bağlı olarak kullanabilirsiniz .<a>

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenu2">
    <button class="dropdown-item" type="button">Action</button>
    <button class="dropdown-item" type="button">Another action</button>
    <button class="dropdown-item" type="button">Something else here</button>
  </div>
</div>

Varsayılan olarak, bir açılır menü otomatik olarak üst öğesinin üst kısmından ve sol tarafında %100 olarak konumlandırılır. .dropdown-menu-righta'ya ekle .dropdown-menuaçılır menüyü sağa hizalayın.

Önüne bak! Açılır listeler Popper.js sayesinde konumlandırılır (bir gezinme çubuğunda bulunmaları dışında).

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Right-aligned menu
  </button>
  <div class="dropdown-menu dropdown-menu-right">
    <button class="dropdown-item" type="button">Action</button>
    <button class="dropdown-item" type="button">Another action</button>
    <button class="dropdown-item" type="button">Something else here</button>
  </div>
</div>

Herhangi bir açılır menüde eylemlerin bölümlerini etiketlemek için bir başlık ekleyin.

Açılır başlık
Eylem Başka bir eylem 
<div class="dropdown-menu">
  <h6 class="dropdown-header">Dropdown header</h6>
  <a class="dropdown-item" href="#">Action</a>
  <a class="dropdown-item" href="#">Another action</a>
</div>

Bir bölücü ile ilgili menü öğelerinin ayrı grupları.

Eylem Başka bir eylem Burada başka bir şey
Ayrılmış bağlantı 
<div class="dropdown-menu">
  <a class="dropdown-item" href="#">Action</a>
  <a class="dropdown-item" href="#">Another action</a>
  <a class="dropdown-item" href="#">Something else here</a>
  <div class="dropdown-divider"></div>
  <a class="dropdown-item" href="#">Separated link</a>
</div>

Açılır menüye bir form koyun veya bir açılır menüye dönüştürün ve ihtiyacınız olan negatif alanı vermek için kenar boşluğu veya dolgu yardımcı programlarını kullanın.

Buralarda yeni misin? Üye olmak Parolanızı mı unuttunuz? 
<div class="dropdown-menu">
  <form class="px-4 py-3">
    <div class="form-group">
      <label for="exampleDropdownFormEmail1">Email address</label>
      <input type="email" class="form-control" id="exampleDropdownFormEmail1" placeholder="[email protected]">
    </div>
    <div class="form-group">
      <label for="exampleDropdownFormPassword1">Password</label>
      <input type="password" class="form-control" id="exampleDropdownFormPassword1" placeholder="Password">
    </div>
    <div class="form-check">
      <input type="checkbox" class="form-check-input" id="dropdownCheck">
      <label class="form-check-label" for="dropdownCheck">
        Remember me
      </label>
    </div>
    <button type="submit" class="btn btn-primary">Sign in</button>
  </form>
  <div class="dropdown-divider"></div>
  <a class="dropdown-item" href="#">New around here? Sign up</a>
  <a class="dropdown-item" href="#">Forgot password?</a>
</div>
<form class="dropdown-menu p-4">
  <div class="form-group">
    <label for="exampleDropdownFormEmail2">Email address</label>
    <input type="email" class="form-control" id="exampleDropdownFormEmail2" placeholder="[email protected]">
  </div>
  <div class="form-group">
    <label for="exampleDropdownFormPassword2">Password</label>
    <input type="password" class="form-control" id="exampleDropdownFormPassword2" placeholder="Password">
  </div>
  <div class="form-check">
    <input type="checkbox" class="form-check-input" id="dropdownCheck2">
    <label class="form-check-label" for="dropdownCheck2">
      Remember me
    </label>
  </div>
  <button type="submit" class="btn btn-primary">Sign in</button>
</form>

Aktif menü öğeleri

Etkin olarak stil.active vermek için açılır menüdeki öğelere ekleyin .

Normal bağlantı Aktif bağlantı Başka bir bağlantı 
<div class="dropdown-menu">
  <a class="dropdown-item" href="#">Regular link</a>
  <a class="dropdown-item active" href="#">Active link</a>
  <a class="dropdown-item" href="#">Another link</a>
</div>

Devre dışı bırakılmış menü öğeleri

Devre dışı bırakılmış olarak.disabled biçimlendirmek için açılır menüdeki öğelere ekleyin .

Normal bağlantı Devre dışı bırakılmış bağlantı Başka bir bağlantı 
<div class="dropdown-menu">
  <a class="dropdown-item" href="#">Regular link</a>
  <a class="dropdown-item disabled" href="#">Disabled link</a>
  <a class="dropdown-item" href="#">Another link</a>
</div>

kullanım

.showVeri öznitelikleri veya JavaScript aracılığıyla, açılır eklenti, sınıfı üst liste öğesinde değiştirerek gizli içeriği (açılır menüler) değiştirir . Bu data-toggle="dropdown"öznitelik, uygulama düzeyinde açılır menüleri kapatmak için kullanılır, bu nedenle her zaman kullanmak iyi bir fikirdir.

Dokunmatik özellikli cihazlarda, bir açılır listenin açılması, öğenin en yakın alt öğelerine boş ( $.noop) mouseoverişleyiciler ekler <body>. Bu kuşkusuz çirkin hack, iOS'un olay delegasyonundaki bir tuhaflığı gidermek için gereklidir; aksi takdirde, açılır listenin dışındaki herhangi bir yere dokunmanın, açılır menüyü kapatan kodu tetiklemesini engeller. Açılır menü kapatıldığında, bu ek boş mouseoverişleyiciler kaldırılır.

Veri öznitelikleri aracılığıyla

data-toggle="dropdown"Bir açılır liste arasında geçiş yapmak için bir bağlantıya veya düğmeye ekleyin .

<div class="dropdown">
  <button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown trigger
  </button>
  <div class="dropdown-menu" aria-labelledby="dLabel">
    ...
  </div>
</div>

JavaScript aracılığıyla

JavaScript aracılığıyla açılır listeleri arayın:

$('.dropdown-toggle').dropdown()
data-toggle="dropdown"hala gerekli

Açılır listenizi JavaScript aracılığıyla aramanıza veya bunun yerine data-api'yi kullanmanıza bakılmaksızın, açılır data-toggle="dropdown"listenin tetikleyici öğesinde her zaman bulunması gerekir.

Seçenekler

Seçenekler, veri öznitelikleri veya JavaScript aracılığıyla iletilebilir. Veri öznitelikleri için, seçenek adını olduğu data-gibi ekleyin data-offset="".

İsim Tip Varsayılan Tanım
telafi etmek sayı | dize | işlev 0 Açılan listenin hedefine göre ofseti. Daha fazla bilgi için Popper.js'nin ofset belgelerine bakın .
çevirmek boole doğru Referans öğesinde çakışma olması durumunda Açılır Menünün çevrilmesine izin verin. Daha fazla bilgi için Popper.js'nin flip docs'ına bakın .
sınır dize | eleman 'kaydırmaEbeveyn' Açılır menünün taşma kısıtlaması sınırı. 'viewport', 'window', 'scrollParent', veya bir HTMLElement başvurusunun değerlerini kabul eder (yalnızca JavaScript). Daha fazla bilgi için Popper.js'nin önlemeOverflow belgelerine bakın .

boundarydışında herhangi bir değere ayarlandığında 'scrollParent', stilin kaba position: staticuygulandığına dikkat edin ..dropdown

yöntemler

Yöntem Tanım
$().dropdown('toggle') Belirli bir gezinme çubuğunun veya sekmeli gezinmenin açılır menüsünü değiştirir.
$().dropdown('update') Bir öğenin açılır listesinin konumunu günceller.
$().dropdown('dispose') Bir öğenin açılır menüsünü yok eder.

Olaylar

Tüm açılır olaylar, .dropdown-menu'nin üst öğesinde tetiklenir ve relatedTargetdeğeri, geçiş yapan bağlantı öğesi olan bir özelliğe sahiptir.

Etkinlik Tanım
show.bs.dropdown Bu olay, gösteri örneği yöntemi çağrıldığında hemen tetiklenir.
shown.bs.dropdown Bu olay, açılır menü kullanıcıya görünür hale getirildiğinde tetiklenir (CSS geçişlerinin tamamlanmasını bekler).
hide.bs.dropdown Bu olay, örnek gizleme yöntemi çağrıldığında hemen tetiklenir.
hidden.bs.dropdown Bu olay, açılır listenin kullanıcıdan gizlenmesi bittiğinde tetiklenir (CSS geçişlerinin tamamlanmasını bekler). 
$('#myDropdown').on('show.bs.dropdown', function () {
  // do something…
})