21 Aralık 2024
kodyazan

Bootstrap Açılır Menü

Semih
20 Ağustos 2015 Perşembe
5

Açılır menüyü işlevsel olarak kullanabilmemiz için projemize jquery ve bootstrap javascript dosyalarını eklememiz gerekir.

(Bootstrap css dosyasını her durumda projemize ekliyoruz zaten)

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>

 

Örnek:

caret sınıfı ile ucu aşağı bakan üçgen simgesi oluşturulur.

dropdown-menu sınıfı ile açılır liste oluşturulur.

dropdown-header sınıfı açılan listede başlıklar oluşturmamızı sağlar. 

divider sınıfı ile araya bir çizgi atmış oluruz. (Ayırıcı vazifesini görür.)

disabled sınıfı ile bileşenin kullanılması engellenir. 

<div class="dropdown">
<button type="button" class="btn btn-success btn-lg dropdown-toggle" data-toggle="dropdown">Açılır Menü <span class="caret"></span></button>

<ul class="dropdown-menu">
	<li class="dropdown-header">Makaleler</li>

	<li><a href="#">Bootstrap</a></li>
	<li><a href="#">C#</a></li>
	<li><a href="#">SQL</a></li>

	<li class="divider"></li>
			
	<li class="dropdown-header">Yazarlar</li>

	<li><a href="#">Semih FERİK</a></li>
	<li><a href="#">Fatma Nur BİÇER</a></li>

	<li class="disabled"><a href="#">Devre Dışı Öğe</a></li>
</ul>
</div>


İlgili makaleler

Bootstrap Buton Gruplama

20 Ağustos 2015 Perşembe
0

Bootstrap Yukarı Açılır Menü

20 Ağustos 2015 Perşembe
0

Bootstrap Dikey Açılır Menü

20 Ağustos 2015 Perşembe
0
yorumlar
64x64

mehmet

23 Ocak 2017 Pazartesi

hocam selamlar öncelikle,

projemde yaptığım açılır menüm mobil de çalışmıyor. örnek vermek gerekirse "AÇILIR MENÜ " tıkladığımda liste aşağı iniyor lakin yazarlar dan "SEMİH FERİK " tıklamıyor açılmıyor :(

lütfen yardım eder misiniz kafayı yiyeceğim neden böyle olur bu.

64x64

Semih

24 Ocak 2017 Salı

Merhaba Mehmet,

Kaynak kodlarını mail olarak atabilir misin? ( feriksemih@gmail.com )

Sorunun nereden kaynaklandığına bakayım. Sadece ilgili sayfanın kodlarını atman yeterli.

Bunun dışında bootstrap css ve js dosyalarını sayfaya dahil ettiğinden emin ol.

 

Örnek Sayfa

<!DOCTYPE html>
<html lang="tr-TR">
<head>
	<meta charset="UTF-8">
	<title>Bootstrap Sample</title>
    
    <meta name="viewport" content="width=device-width, initial-scale=1">

	<!-- Bootstrap Css begin -->
	<link rel="stylesheet" href="/bootstrap.min.css">
	<!-- Bootstrap Css end -->
</head>
<body>
	<!-- JavaScript Files begin -->
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
	<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
	<!-- JavaScript Files end -->
</body>	
</html>
64x64

Oktay

14 Temmuz 2017 Cuma

Allah razı olsun hocam. Hiç bir yerde bulamadım şu javascript kodlarını. 

64x64

birol yılmaz

12 Kasım 2017 Pazar

javascript ve css dosyalarını sayfaya yükledim. ekrandaki menü çıkıyor ama tıklayınca açılmıyor. 

64x64

Erkan

25 Ağustos 2018 Cumartesi

Teşekkürler

Yorum yaz