Neredeyse bir web 2.0 standardı olan accordion menüler sayfalarımızında vazgeçilmezi haline geldi. Şimdi yazacağımız plugin ile accordion menü hazırlamak çok

kolay hala gelecek. Sizlerde üzerinde biraz değişiklikler yaparak istediğiniz yapıda menüleri kolaylıkla oluşturabilirsiniz.

Öncelikle menümüzün salt html halini oluşturalım;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
		<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-9" />
<title>Accordion Menü</title>
</head>
<body>
	<div class="accordion">
		<ul title="Baslık bir">
			<li><a href="#">Madde 1</a></li>
			<li><a href="#">Madde 2</a></li>
			<li><a href="#">Madde 3</a></li>
		</ul>
		<ul title="Baslık İki">
			<li><a href="#">Madde 2-1</a></li>
			<li><a href="#">Madde 2-2</a></li>
			<li><a href="#">Madde 2-3</a></li>
		</ul>
		<ul title="Baslık Üç">
			<li><a href="#">Madde 3-1</a></li>
			<li><a href="#">Madde 3-2</a></li>
			<li><a href="#">Madde 3-3</a></li>
		</ul>
	</div>
</body>
</html>

Sayfamıza jquery.js dosyamızı ekledikten sonra accordion.js adında bir javascript dosyası oluşturalım kendimize.Oluşturduğumuz accordion.js dosyasını

sayfamıza <link> etiketi ile ekledikten sonra kodlarımızı yazmaya başlayalım.

Öncelikle sabitlerimizi oluşturalım

var divClass = "accordion";//accorion uygulanacak ul'lerin bulunduğu divin classı
var menuHtml = "";//sayfadaki mevcut kodları temizledikten sorna kendi kodlarımızı ekleyeceğimiz değişken.
var sonAcikUl = -1;//en son açılan ul'un id'si.Eğer -1 ise henüz hiçbiri açılmamış demektir.

Buradaki değişkenlerimizin açıklaması zaten yanlarında mevcut ancak <strong>menuHtml</strong> üzerinde durmamız sanırım iyi olacaktır. Eğer

menümüzün üzerinde ekstra birşey yer almasını istiyorsak bu değişkene atayabiliriz. Örneğin menümüzün üzerinde menu.jpg adında bir grafik yer almasını

istiyorsak

var menuHtml = "<img src="menu.jpg" />";

şeklinde değiştirebiliriz.

Kodumuzun ilk bölümü hazırlandı. Şimdi sayfamız yüklendiğinde değiştirilecek alanı bularak gerekli işlemleri yapmaya başlamamız gerekmektedir. Bu işlemleri

jQuery’nin $(document).ready fonksiyonu ile başlatıyoruz ;

$(document).ready(function(){
	var us = $('div.'+divClass+'>ul').length;//işleme girecek ul sayısını alıyoruz
	//bunları bir for döngüsü ile spanolustur fonksiyonuna atıyoruz
	for(i=0;i<us;i++)
	{
		spanOlustur(i);
	}
//fonksiyonumuz gerekli işlemleri yaptıktan sonra bize işlevsel html kodlarımız dönüyor
//Bizde bunları en başta belirlediğimiz div'in içeriğine eklemeden önce
//div'imizin içindeki html kodlarını temizliyoruz
//daha sonrada fonksiyonumuzun oltuşturduğu kodları div'imize ekliyerek işlemlerimizi tamamlıyoruz
	$('div.'+divClass).empty().html(menuHtml);
//accordion menümüz artık hazır ve geriye kalan tek şey ul etiketlerinin bulunduğu divleri kapatmak
	$('div.acilanDiv').hide();
});

Evet işlemler bitti ve menümüz hazır hayırlı olsun demeyeceğim tabii ki. Burada çağırmış olduğumuz spanOlustur fonksiyonumuz tüm

işlevselliği sağlayor. Şimdi o fonksiyonumuzu yazalım.

Not:jQuery’nin en güzel seçicilerinden olan eq’nun burada güzel bir kullanımını göreceğiz.Bu seçicinin ne işe yaradığını kısaca anlatmak gerekirse :

eq ile istediğimiz bir etiketin istediğimiz sıradaki elemanını seçebiliriz. Biz burada menümüzü oluşturan ul’leri sırası ile seçerek

içerisindeki html kodlarını alıp istediğimiz hale getiriyoruz.

function spanOlustur(ulSayi)
{
//fonksiyonumuz ile gelen ulSayi'ncı sıradaki ul'u seçiyoruz
//bu elementi ul adında bir değişkene atıyoruz.
	var ul = $('div.'+divClass+'>ul:eq('+ulSayi+')');
//ulHtml değişkenine ul'e ait html'i atıyoruz
	var ulHtml = ul.html();
//menümüzün başlıklarını oluşturmak için ul'e ait title etiketinin değerini alıyoruz.
	var spanBaslik = ul.attr('title');
//şimdi ise menümüzü oluşturuyoruz.
//öncelikle bir div oluşturup class,id ve onclick özelliklerini ayarlıyoruz.
//onclick'de accordionAc diye bir fonksiyonu tetikliyoruz.
//En son olarak da menümüzün başlığını bu dive içerik olarak ekliyoruz.
	var menu = '<div class="accordionBaslik" id="menu'+ulSayi+'" onclick="accordionAc('+ulSayi+');">'+spanBaslik+'</div>';
//başlık divinin altına bir div daha ekleyerek onada menümüzü içerik olarak göstereceğiz.
//burada dikkatinizi çekmek istediğim bir nokta var;
//az önce hazırladığımız ulHtml, ul etiketlerinin içerisinde kalan li ve a etiketlerini alıyor sadece
//bu yüzden yeni bir ul etiketi yazmak zorundayız.
	menu    += '<div id="ul'+i+'" class="acilanDiv"><ul class="accordion">'+ulHtml+'</ul></div>';
//yeni bir menu elementimiz hazır olduğuna göre bunu menuHtml değişkenine ekleyebiliriz.
	menuHtml += menu;
}

Şu anda menümüz hazır ancak kullanılabilir değil. Sebebiyse tabii ki accordionAc fonksiyonunu henüz yazmamış olmamız. Bu fonksiyonumuzuda

yazarak pluginimizi tamamlayalım.

function accordionAc(id)
{
	if(sonAcikUl!=id)//eğer açık dive tıkladı ise herhangi bir işlem yapmıyoruz.
	{
		if(sonAcikUl==-1)//buradada menüye ilk defa tıklanıp tıklanmadığını kontrol ediyoruz
		{
			$('div#div'+id).slideDown(250);//eğer ilk tıklama ise sadece açma işlemi yapıyoruz
		}
		else
		{
			$('div#div'+sonAcikUl).slideUp(250);//son açık olan divi kapatıyoruz
			$('div#div'+id).slideDown(250);//tıklanan divi açıyoruz
		}
		sonAcikUl = id;
	}
}

Artık menümüz kullanıma hazır.

Örnek uygulama için buraya tıklayabilirsiniz.

Örneği indirmek içinde buraya tıklayabilirsiniz.

Bir sonraki yazıda görüşmek dileğiyle hoşçakalın.

Benzer Yazılar