Bootstrap Ders-11 Açılır Menü - DropDown
UstaDerslik Soru-Cevap Yararlı Araçlar
arama ikon
Diller
Türkçe Türkçe

bilgi UstaDerslik
Bu uyari kutusudur.
Tamam
Anasayfa
İletişim
Üyeler

Bootstrap Ders-11 Açılır Menü - DropDown

profil
cArleone
BEĞEN(0)
BEĞENME(0)
GÖRÜNTÜLENME(6068)
RAPOR ET
Bootstrap serimize devam ediyoruz.Bu derste dropdown yani açılır menü yapımını işleyeceğiz.Kullanımından başlayalım.

İncele : http://ustaderslik.com/ornek/bootstrap-DropDown/

İndir : http://ustaderslik.com/dosya/bootstrap-DropDown.zip

Dropdown menü için öncelikle classı dropdown olan bir div veya ul oluşturuyoruz.İçine data-toggle="dropdown" bir buton koyuyoruz.Bu butona tıklanınca menü açılacak.Dropdown classına ait alanımızın içine bir ul-li yapısı oluşturup ul a dropdown-menu veriyoruz.Lilerin içine a ile linklerimizi koyarak menümüzü tamamlıyoruz.En temel hali bu şekilde.
<div class="dropdown">
<button class="btn btn-default" type="button" data-toggle="dropdown">Menü <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Buton-1</a></li>
<li><a href="#">Buton-2</a></li>
<li><a href="#">Buton-3</a></li>
</ul>
</div>


Bazı özellikleri var.Şimdi bunları görelim.

1-Pozisyon


Açılan menüyü sağa ve sola olmak üzere 2 pozisyonda açabiliriz.Pozisyonu değiştirmek içi dropdown-menu classına ait ula sağ için dropdown-menu-right sol için dropdown-menu-left vermemiz yeterli.

2-Ekler


Açılır menünün içine başlık koyabiliriz yada aralara çizgi çekebiliriz.dropdown-menü nün içindeki lilerden birinin classına dropdown-header vererek başlık oluşturabiliriz.Çizgi için ise bir linin classına divider vermemiz yeterli.

3-Kitleme


Dropdown-menu içindeki butonu tıklanmaz yapmak istiyorsak,butonun classına disabled vermemiz yeterli.

Genel örnek :
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/bootstrap-theme.min.css" />
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<title>UstaDerslik.com</title>
<style type="text/css">
.ortala{width:100%;max-width:400px;margin:auto;margin-top:75px;}
</style>
</head>
<body>

<div class="ortala">

<div class="dropdown">
<button class="btn btn-default" type="button" data-toggle="dropdown">Menü <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Buton-1</a></li>
<li><a href="#">Buton-2</a></li>
<li><a href="#">Buton-3</a></li>
</ul>
</div>

<br />

<div class="dropdown">
<button class="btn btn-default" type="button" data-toggle="dropdown">Menü-2 <span class="caret"></span></button>
<ul class="dropdown-menu">
<li class="dropdown-header">Başlık</li>
<li class="divider"></li>
<li><a href="#">Buton-1</a></li>
<li><a href="#">Buton-2</a></li>
<li><a href="#">Buton-3</a></li>
<li class="divider"></li>
<li class="disabled"><a href="#">Buton-4</a></li>
<li class="disabled"><a href="#">Buton-5</a></li>
</ul>
</div>

<br />

<ul class="nav nav-pills">
<li><a href="#">Menü-1</a></li>
<li><a href="#">Menü-2</a></li>
<li class="dropdown active">
<a href="#" data-toggle="dropdown" class="dropdown-toggle">Menü-3 <b class="caret"></b></a>
<ul class="dropdown-menu dropdown-menu-right">
<li><a href="#">Buton-1</a></li>
<li><a href="#">Buton-2</a></li>
<li><a href="#">Buton-3</a></li>
<li><a href="#">Buton-4</a></li>
<li><a href="#">Buton-5</a></li>
</ul>
</li>
</ul>

</div>

</body>
</html>

Görüntüsü :
http://ustaderslik.com/resim/ders/df12s5fd0.png



Kod
Kalın
Vurgu
Resim
Video
Url
CEVAPLA
Tüm Hakları Saklıdır. ©Arleone 2013-2014 UstaDerslik






Giriş
Şifremi Unuttum...
Şifre Talep
  Kuralları Kabul Ediyorum.
Kaydol