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ü :
UstaDerslik
