5

jQuery eklentisi: Akordiyon Menü

Share

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.