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.
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…
@ Göktürk
Fırsat bulduğumda incelemeyi yapıp bu konuda bir yazı hazırlamaya çalışacağım.
süpersin emeğine sağlık bende çalıştı
ancak renkler çıkmadı (mavi yeşil)
o da temadan dolayı sanırım
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.
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