Jquery ile kolay (eklentisiz) akordion menü yapmak

06 / Temmuz / 2008 Author

İsa Engiz

JQuery

4 Yorum Yapilmis.

Javascript çatılarının hayatımızı oldukça kolaylaştırdığını inkar edemeyiz, normalde yapmak için çok uğraşacağınız bir efekti, bu hazır kütüphaneler ile tek satır kod yazarak yapabiliyorsunuz.

Akordion menü yapmak istediğinizde de aynı kolaylığı elde etmek istersiniz, en az satir kod ile en fazla işi yapmak istersiniz. Jquery ile hiç bir eklenti kurmadan böyle bir menü yapmak mümkün. Örneğe göz atmak için buraya, dosyaları indirmek için buraya tıklayın.

Adım 1: HTML yapısı

Html dosyamızın içeriği şu şekilde oluşmalı:

 
<div id="bolum1">
 
	<div class="ust_menu">
		<p id="bolum_adi">Koodla | Blog</p>
	</div>
 
 
	<div class="icerik" style="display:block;">
		<p>Koodla | Blog'a hoşgeldiniz.</p>
	</div>
 
</div>
 
<div id="bolum2">
 
	<div class="ust_menu">
		<p id="bolum_adi">PHP</p>
	</div>
 
 
	<div class="icerik">
		<p>Koodla | Blog sitesinde PHP ile ilgili pek çok örnek bulabilirsiniz.</p>
	</div>
 
</div>
 
...
...
...

Örnek sayfamıza göz attıysanız, bu bölümlerden 6 tane var, isteğimize göre sayısını arttırabilir veya azaltabiliriz.

Bölümlerin altında 2 tane daha div etiketi var, biri, ust_menu, diğeri ise icerik bolümü. İçerik bölümü tıklanınca gözükecek olan kısım. Yani tıklanmadan gözükmemesi lazım. Bunu da CSS kodu ile ayarlıyoruz:

Adım 2: CSS

Css kodumuz ise, görünüşleri ayarlayan diğer kodların dışında şu şekilde:

 
.icerik {
	display:none;
	background-color:#4096EE;
	width:470px;
	margin:5px;
}

İçerik bölümünün gözükmesini istemiyoruz ve bunu da bu ufak kod ile sağlıyoruz. Yalnız doküman yüklendiğinde bölüm1′in içeriğinin gözükmesini istiyorsak, html kodunda, sizinde farkedeceğiniz üzere “display:block” özelliği atadık. Bunu yapmazsak, doküman ilk yüklendiğinde bütün bölümler kapalı gelir. (çokbüyük bir sorun değil aslında…)

Adım 3: Jquery

Dokümanımıza şu kodu eklediğimizde akordionu yapmış olacağız:

 
$(document).ready(function()
{
	$("#bolum1, #bolum2, #bolum3, #bolum4, #bolum5, #bolum6").click(function()
    {
		$("div.icerik").slideUp("slow");
		$("div.icerik", this).slideDown(300).siblings("div.icerik").slideUp("slow");
	});
 
});

Akordion olacak bütün bölümlere tıklanma olayını ekliyoruz, tıklanınca bütün bölümlerin kapanmasını, yalnızca tıklanan bölümün açık kalmasını sağlıyoruz. İki satır kod ile kolaylıkla bunu yapmış oluyoruz.

Sonuç

Hiçbir eklenti kullanmadan ve yalnızca iki satır kod ile bunu yapmak çok hoş, ancak bazı dezavantajlar da bulunmakta.

Bu kodda, farkedeceğiniz üzere kapatılacak bölümleri yakalamak için siblings() metodu kullanılıyor, dolayısıyla dokümanınızda div hiyerarşisi, bu örnektekine benzer şekilde ayarlanmalı ve div etiketlerinin hepsi doğru şekilde kapatılmış olmalı.

Ama başka bir eklenti kullanmadan rahatlıkla akordion menü yapabilmekteyiz. Bir sonraki jquery yazımızda görüşmek üzere!

Not:Bu güzel kodun yazılmasında emeği geçen Mustafa Kırımlı’yı da burada anmak gerekir!

- Bu blogda yer alan yazıları RSS ile takip edebilirsiniz. RSS aboneliği için tıklayın.

- Ya da bu blogda yer alan bütün yazıları içindekiler sayfasında görüntüleyebilirsiniz. Tıklayın!