jQuery eklentisi: Akordiyon Menü

jQuery eklentileri katkılarıyla websitelerinin görselli bir adım daha ilerlerken tasarımcıların ihtiyaç duydukları özellikler hazırladıkları websitelerine kazandırmak için daha az çaba sarf ediyor olmaları sanırım özellikle kodlama safhasıyla  ilgilenenler için büyük nimet olsa gerek.

Başlıktan da anlaşılacağı gibi şimdi bahsedeceğim eklenti sayesinde sitenize akordiyon menü yapabilirsiniz. Beş çeşit akordiyon menünün kodlarını elde edebilirsiniz. Jörn Zaefferer‘in yazısında gördüğüm bu jQuery eklentisini inceledim ve daha önce görmediğim sıra dışı akordiyon menülerin olduğunu gördüm. Hatta beğendiğim bir tanesinini kodlarını ayırıp WordPress “Default” temasında denedim. “#list2” olarak adlandırılan akordiyon menünün bahsettiğim temanın sidebar.php dosyasına uygun hale getirdim.

jQuery akordiyon menü eklentisini indirmek için şuradaki sayfayı ziyaret edebilirsiniz.

Şimdi gelelim WordPress’in “Default” taması için uyarladığım #list2 olarak adlandırılan menünün kodlarına ve sayfaya yerleştirilmesine;

Önelikle yukarıda belittiğim sayfadan gerekli dosyaları indirin ve .zipli dosyadan çıkarın.

Klasörün içindeki “lib” klasörünü ve “jquery.accordion.js” dosyasını temanın içine atın.( gerekli .js dosyalarımızı elde ettik)

Şimdi de gerekli kodlara sıra geldi.

Bir metin editörü açın ve içine aşağıdaki kodları yapıştırıp menu.css olarak kaydedin.


fieldset { padding: 0px; }
legend { font-weight: bold; }

pre { margin-bottom: 1em; }
li { list-style-type: none; }
#list2 { width:195px; }

#list2 {
height: 210px;
border: 1px solid #eee;
overflow: hidden;
}
#list2 .red {
height:25px;
font-size:20px;
width:195px;
color: #ffffff;
background-color: red;
}
#list2 .green {
height:25px;
font-size:20px;
width:195px;
color: #ffffff;
background-color: green;
}
#list2 .blue {
height:25px;
font-size:20px;
width:195px;
color: #ffffff;
background-color: blue;
}
#list2 dd { height: 130px; overflow: hidden; }

}

Evet gerekli stil dosyamızıda oluşturduk. Bu dosyayıda tema klasörünün içine atıyoruz.

Şimdi de dosyalarınımı çapırmaya geldi. Tema klasöründeki head.php dosyasını açıpyoruz ve <head> </head> taglerinin arasına aşağıdaki kodu yapıştırıyoruz.


<!-- Akordiyon Menü -->
	<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/lib/jquery.js"></script>
	<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/lib/chili-1.7.pack.js"></script>
	<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/lib/jquery.easing.js"></script>
	<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/lib/jquery.dimensions.js"></script>
	<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/jquery.accordion.js"></script>
	<script type="text/javascript">
	jQuery().ready(function(){
		// highly customized accordion
		jQuery('#list2').accordion({
			event: 'mouseover',
			active: '.selected',
			selectedClass: 'active',
			animated: "bounceslide",
			header: "dt"
		}).bind("change.ui-accordion", function(event, ui) {
			jQuery('<div>' + ui.oldHeader.text() + ' hidden, ' + ui.newHeader.text() + ' shown</div>').appendTo('#log');
		});
		// bind to change event of select to control first and seconds accordion
		// similar to tab's plugin triggerTab(), without an extra method
		var accordions = jQuery('#list2');
		jQuery('#switch select').change(function() {
			accordions.accordion("activate", this.selectedIndex-1 );
		});
		jQuery('#close').click(function() {
			accordions.accordion("activate", -1);
		});
		jQuery('#switch2').change(function() {
			accordions.accordion("activate", this.value);
		});
		jQuery('#enable').click(function() {
			accordions.accordion("enable");
		});
		jQuery('#disable').click(function() {
			accordions.accordion("disable");
		});
		jQuery('#remove').click(function() {
			accordions.accordion("destroy");
			wizardButtons.unbind("click");
		});
	});
	</script>
<!-- Akordiyon Menü-->

Bu işlemi de tamamladıktan sonra temamızda görüntüleme işi kaldı. Bunun için sidebar.php dosyamızı açıyoruz ve yan menüden sonra görüntülemek istiyorsak oryada aşağıdaki kodları yağıştırıyoruz.


<!-- Akordiyon Menü -->
	<fieldset>
		<legend>Akordiyon deneme</legend>
		<dl id="list2">
			<dt class="red">Kırmızı</dt>
			<dd>
				Buraya ekleme yapın. <BR>
				Buraya ekleme yapın. <BR>
				Buraya ekleme yapın. <BR>
				Buraya ekleme yapın. <BR>
				Buraya ekleme yapın. <BR>
			</dd>
			<dt class="green selected">Yeşil</dt>
			<dd>
				Buraya ekleme yapın. <BR>
				Buraya ekleme yapın. <BR>
				Buraya ekleme yapın. <BR>
				Buraya ekleme yapın. <BR>
				Buraya ekleme yapın. <BR>
				Buraya ekleme yapın. <BR>
				Buraya ekleme yapın. <BR>
			</dd>
			<dt class="blue">Mavi</dt>
			<dd>
				Buraya ekleme yapın. <BR>
				Buraya ekleme yapın. <BR>
				Buraya ekleme yapın. <BR>
				Buraya ekleme yapın. <BR>
				Buraya ekleme yapın. <BR>
			</dd>
		</dl>
	</fieldset>
<!-- Akordiyon Menü -->

İşte menümüz hazır. yukarıda belirttiğim ” Buraya ekleme yapın.” yerine isterseniz metin girebilir yada göstermek istediğiniz menün kodlarını yapıştırabilirsiniz. Mesela arşivinizi aylara göre görüntülemek istiyorsanız bu cümllerin yerine aşağıdaki kodu girebilirsiniz.

<?php wp_get_archives('type=monthly'); ?>

Çalışmamızın sonunda elde edeceğimiz çıktı aşağıdaki gibi olması gerekiyor.

Mümkün oldukça basite indirgeyerek anlatmaya çalıştım umarım faydalı olmuştur. Kolay gelsin.

Veysel

Veysel

Sosyal Medya ve İnternetteki gelişmeleri inceleyen, Web Tasarım Araçları, CMS(İçerik Yönetim Sistemi)leri, özellikle WordPress üzerine haberleri araştıran, 2007 yılında yayın hayatına başlayan SanalDuvar.Com'un yöneticisidir. Ana Bilim Dalı Elektrik-Elektronik Mühendisliği olan bir Sistem Mühendisidir.

İlginizi çekebilir...

5 Responses

  1. Avatar Göktürk dedi ki:

    Gerçekten emeğinize sağlık
    nedense türkçe anlatım bulmakta çok zorluk çekiyoruz
    sizden bir ricam var
    bu konudan anladığınız belli
    Outside the Box jquery adında bir menu buldum
    gerçekten süper ama ingilizce bilmediğim için editlemeyi çözemedim
    bunu anlatan türk sitede yok eğer yardımcı olursanız ilk olacaksınız.
    hem sizin hitini hemde sayenizde bizim bilgimiz artacak
    http://net.tutsplus.com/tutorials/javascript-ajax

    Umarım Dileğim Yerine Gelir.
    Dua ve Selametle…

  2. Avatar ismka dedi ki:

    süpersin emeğine sağlık bende çalıştı
    ancak renkler çıkmadı (mavi yeşil)
    o da temadan dolayı sanırım

  3. Veysel Veysel dedi ki:

    Bende bir önceki temamda bazı js sorunları almıştım ki bu sorunlarla localhostum karşılaşmamıştım. Fakat dosyalarımı hosta gönderince çıkan sorunu çözmeye çalıştım. Öncelikle belirtmediğim js dosyasının olduğunu düşündüm, ancak herşey düzgündü. Daha sonra üst menü ikonlarımdan biri silince soeun çözülmüştü.
    Sendeki sorunu önce header.php dosyasında aramalısın ki zaten senin menün tema ile geliyor. O zaman eklediğin videoların ortaya çıkrdığı bir sorun olabilir diye düşünüyorum. Ne alaka şimdi diyeceksin ama dedim ya yukarıda benim başıma gelen olayda biraz garip.

  4. Avatar belgeseller dedi ki:

    arkadaşım gerçekten güzel bir anlatım.sitemin birinde uygulamaya çalışacağım.ellerine sağlık
    bir sorum olacak.http://themes.wordpress.net/?s=scary
    buradaki temayı kullanıyordum.1 gün sorunsuz kullandım.ertesi gün açılır kapanır menü kendi kendine açılı vaziyette sabit kaldı.sorunu bir türlü çözemedim.2.5.1 kullanıyorum.2.6.2 beta dada denedim sonuç alamadım.bu sorunu nasıl aşabilirim.ne yapmalıyım.teşekkürler

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir