1- Dock and Stack – jQuery

Demo – İndir

2- Vertical Sliding Menu – jQuery

Demo – İndir

3- Professional DropDown

Demo – İndir

4- MenuMatic

Demo1 – Demo2 – İndir

5- Perfect Signin Dropdown Box Likes Twitter with jQuery

Demo -İndir

6- jQuery Drop Line Tabs

Demo – Kodlar

7- A Different Top Navigation

Demo – İndir

8- Fancy Sliding Menu For Mootools

Demo – İndir

9- Sexy Drop Down Menu w/ jQuery & CSS

Demo – Kodlar

10- Cut & Paste jQuery Mega Menu

Demo – Kodlar

Bilgi vermeden önce size bu çalışmanın demosunu görmenizi tavsiye edeceğim, o zaman neden bahsettiğimi anlayacaksınız.

Zoomer Gallery Demo

Zoomer Gallery İndir

Evet, şimdi kaynağımızı indirmiş arkadaşlar için kurulumu anlatmaya başlayalım.

İndirdiğimiz dosyada resimler ve bunlarında yanında 3 adet dosya var. Bunlar zoomer.html , zoomer.css ve zoomer.js dosyaları.

Zoomer.HTML

Bu dosyadaki kodların açıklamaları şu şekildedir.

$.fn.Zoomer=function(b){

var c=$.extend({

speedView:200,    //Resimlerim büyüme zamanı

speedRemove:400,  //Üzerine gelip büyüttüğünüz resmin küçülme zamanı

altAnim:false,  //Başlığın gösterilip gösterilmeyeceği (false:göstermez, true: gösterir)

speedTitle:400, //Başlığın kayma süresi

debug:false},b);  //Yapılan ayarları onaylama seçeneği(gibi birşey)

var d=$.extend(c,b);

Zoomer.CSS

Stil dosyası ile resimlerin çerçevesini ve arka planında değişiklik yapabilirsiniz.

ul.thumb li img {

width: 100px;

height: 100px;

border: 1px solid #ddd;

padding: 5px;

background: #f0f0f0;

position: absolute;left: 0; top: 0;

-ms-interpolation-mode: bicubic;

}

ul.thumb li img.hover

{

margin-top:15px;

background:url(thumb_bg.png) no-repeat center center;

border: none;

}

Şimdi gelelim sayfamızda çalışmayı çağırmaya geldi.

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="zoomer.js"></script>
<script type="text/javascript">
$(document).ready(function(){
     $(’ul.thumb li’).Zoomer({speedView:200,speedRemove:400,altAnim:true,speedTitle:400,debug:false});
});
</script>

Resimlerimizi sayfaya yerleştirmek için aşağıdaki kodları kullanmamız gerekiyor.

<ul class="thumb">
                <li><a href="#"><img src="image1.jpg" alt="Title 1" /></a></li>
                <li><a href="#"><img src="image2.jpg" alt="Title 2/></a></li>
                <li><a href="#"><img src="image3.jpg" alt="Title 3" /></a></li>

</ul>

Kısaca anlatmaya çalıştım. İngilizce kaynak için burayı ziyaret edebilirsiniz.

Sözü daha fazla uzatmadan karşılaştığım ve beğenmiş olduğum tooltiplere geçelim.

1. Dynamic tooltip

2. Coda Popup Bubble

3. TipTip

4. jQuery Ajax Tooltip

5. Awesomeness

6. (mb)Tooltip

7. jGrowl

8. tipsy

9. Easiest jQuery Tooltip Ever

10. Create a Simple CSS + Javascript Tooltip with jQuery

]]> http://www.sanalduvar.com/10-adet-jquery-tooltip-eklentisi-jquery-ile-balon-icinde-aciklama-ornekleri-1052.html/feed 4 http://www.sanalduvar.com/javascript-eklentiler-icin-10-muhtesem-ornek-826.html http://www.sanalduvar.com/javascript-eklentiler-icin-10-muhtesem-ornek-826.html#comments Wed, 16 Sep 2009 19:48:18 +0000 Veysel http://www.sanalduvar.com/?p=826 Artık ihtiyaçlardan dolayı yapmış olduğum araştırmalarda bulmuş olduğum kaynakları arşivleyip sizlerle paylaşmayı planlıyorum. Böylelikle özellikle webmasterlara faydalı kaynak sunmuş olabileceğimi düşünüyorum. Kendi temalarımda da kullanmaktan büyük zevk aldığım ve kullanınlan heryerde de oldukça hoşuma giden kodlama dili javascript sayesinde web sayfaları daha dinamik bir görümün kazanarak kullanıcının işlemini hızlandırması ziyaretçide olumlu bir etki bıraktığını düşünmemek içten değil. Özellikle de bu gibi sistemlerin ziyaretçinin hızlı işlem yapmasını gerektiren sitelerde olması daha da önem az etmektedir. Buna en büyük örnepi ise alış-veriş siteleri ile vermek mantık olacaktır.

Şimdi geçelim beğendiğim ve kullanılmasını tavsiye edebileceğim eklentilere. Aşağıda kısa bilgisini vermiş olduğum eklentilerin ayrıntılarını sayfalarından edinebilirtsiniz.

FancyBox

Faklı bir ThickBox çeşididir. Hoş efekler içermektedir. Eklentinin sayfasına buradan ulaşabilirsiniz.

Unobtrusive Slider Control V2

Websayfanızda dinamik bir sayfa değiştirme paneli oluştumanıza yarar. Eklentinin sayfasına buradan ulaşabilirsiniz.

jQZoom

Sayfanızıda gösterilen resimlerin üzerine gelince mercek altına almanıza yarar. Özellikle alış-veriş sitelerinde kullanılabilir. Eklentinin sayfasına buradan ulaşabilirsiniz.

MooTools SlideShow – 1

Çeşitli seçeneklerle sunulan bu slideshow benzerlerinden çok farklı duruyor. Eklentinin sayfasına buradan ulaşabilirsiniz.

jQuery ScrollTo

Özel sayfalar oluşturmak için kullanılabilecek bir eklenti. Hedeflenen kutuya anahtar kelimeye tıklanınca otomatik yönlendiliyorsunuz. Eklentinin sayfasına buradan ulaşabilirsiniz.

FancyForm – MooTools

Web sayfanızda dinamik bir form oluşturmak için benzersiz bir çalışma. Eklentinin sayfasına buradan ulaşabilirsiniz.

iCarousel – MooTools

Yine açık kaynak new ticker/scroller diye adlandırılan, yani haber kaydıran ya da resim kaydıran eklenti diyebilceğimiz bir çalışma. Hem yazılar hemde resimlerle kullanılabilecek bir eklenti. Eklentinin sayfasına buradan ulaşabilirsiniz.

jQuery Validate

Özellike iletişim forumlarında kullanılacak bir çalışma. Anında uyarıyı veriyor. Eklentinin sayfasına buradan ulaşabilirsiniz.

PrettyCheckBoxes – Jquery

Diğer checkboxlardan daha farklı ve dinamik bir görüntü sağlayan bir çalışma. Sayfasında daha şık bir görüntü isteyenlere. Eklentinin sayfasına buradan ulaşabilirsiniz.

jQuery Coda Slider

Birçok sitede de kullanılan bir sistem. Özellikle değişken olmayan şirketsel sayfalarda sık rastlanır türden. Eklentinin sayfasına buradan ulaşabilirsiniz.

Öncelikle QuickFlip kelimesi neyi ifade ettiğinden kısaca bahsedeyim. Quick kelimesi malumunuz hızlı anlamında dilimiz intikal diyor, Flip ise birçok anlamı olsasa buradaki anlamı çevirmek oluyor. Peki neden başlıkta “kart çevirme” olarak belirttim. Çünkü Windows’un vazgeçilmez oyunlarından olan “Solarite”deki gibi kartları ya da hazırlayacağınız resim veya imageleri çevirme imkanını bulacaksınız.

Web sayfanızın kodlamasına yerleştireceğiniz bu çalışma sayesinde sanki bir flash çalışmasıymış gibi sergileyebilceksiniz. Aslında bu çalışma başlıkta da belirtmiş olduğum gibi 2. versiyonun habercisi. Yani ilk versiyon daha önceden yayınlanmış olmasına rağmen bende sizler gibi ilk defa haberdan oluyorum.

İkinci versiyon olarak yayınlanan çalışma daha hızlı ve kullanımı daha kolay olduğu belirtiliyor. Jon Raasch tarafından hazırlanan çalışmanın sayfaya yerleştirme ve kodların açıklamaları hakkındaki bilgileri QuickFlip2 için buradan bulabilirsiniz.

Mevcut çalışmanın kodları aşağıdaki gibidir.

Yapı Kuruluşu – XHTML

Üç sutunlu listeleme basit olacaktır.

  <ul class="thumb">
	  <li> <a href="#"> src="thumb1.jpg" alt="" /> </ a> </ p>
	  <li> <a href="#"> src="thumb2.jpg" alt="" /> </ a> </ p>
	  <li> <a href="#"> src="thumb3.jpg" alt="" /> </ a> </ p>
	  <li> <a href="#"> src="thumb4.jpg" alt="" /> </ a> </ p>
	  <li> <a href="#"> src="thumb5.jpg" alt="" /> </ a> </ p>
	  <li> <a href="#"> src="thumb6.jpg" alt="" /> </ a> </ p>
	  <li> <a href="#"> src="thumb7.jpg" alt="" /> </ a> </ p>
	  <li> <a href="#"> src="thumb8.jpg" alt="" /> </ a> </ p>
	  <li> <a href="#"> src="thumb9.jpg" alt="" /> </ a> </ p>
  </ ul>

Şekillendirme – CSS

Listedeki resimlerin görünümü ve durumlarının nasıl olacağının belirlenmesi.

 ul.thumb (
	  float: left;
	  List-style: none;
	  margin: 0; padding: 10px;
	  width: 360px;
  )
  ul.thumb p (
	  margin: 0; padding: 5px;
	  float: left;
	  konum: göreli; / * Set mutlak konumlandırma taban * koordine /
	  width: 110px;
	  height: 110px;
  )
  ul.thumb Li img ismiyle bir dizin (
	  width: 100px; height: 100px; / * * küçük küçük boyutları ayarla /
	  -ms-interpolasyon mod: bicubic; / * Fix IE Bicubic Ölçekleme * için /
	  border: 1px solid # DDD;
	  padding: 5px;
	  background: # f0f0f0;
	  konum: mutlak;
	  left: 0; top: 0;
  )
  ul.thumb Li img.hover (
	  background: (thumb_bg.png) no-repeat merkezi merkezi / * Görüntü duraksamak etkisi üzerinde artalan olarak kullanılacak URL
	  border: none; / * alın sınırın üstünde uçmak üzerine * kurtulmak /
  )

Hayat Vermek – JQuery

Sıra geldi yapılan çalışmaya canlılık katmaya.

$ ( "ul.thumb Li"). sallanmak (function () (
	  bu görüntü kalır $ (this). CSS (( 'z-kütüğü':'10 ')); / yüksek bir z-endeks değeri Ekle * * Yukarı /
	  $ (this)) ( 'img ismiyle bir dizin' bulmak.. addClass ( "sallanmak"). stop (), daha sonra "sallanmak" nin sınıf Ekle * durdurmak animasyon kuyruk buildup * /
		  . canlandırabiliriz ((
			  110px ', / * marginTop:' Bir sonraki 4 hat dikey * Bu görüntü hizalamak olacak /
			  marginLeft: '-110px',
			  top:'50% ',
			  Sol:%'50 ',
			  genişlik:'174px ', / * Set yeni genişliği * /
			  height:'174px ', / * Set yeni yükseklik * /
			  padding:'20px '
		  200 of "), 200); / * Bu değeri" ne kadar hızlı ve hızla bu duraksamak yavaş * animates / 

	  ), Function () (
	  $ (this). CSS (( 'z-kütüğü':'0 ')); / * Z-INDEX geri 0 * Set /
	  $ (this)) ( 'img ismiyle bir dizin' bulmak.. removeClass ( "sallanmak"). durdurmak () / * çıkarın "sallanmak" sınıf, daha sonra animasyon kuyruk buildup * durdurmak /
		  . canlandırabiliriz ((
			  marginTop:'0 ', / * Set hizalamayı geri * varsayılan /
			  marginLeft:'0 ',
			  top:'0 ',
			  left:'0 ',
			  genişlik:'100px ', / * Set genişliği geri * varsayılan /
			  height:'100px ', / * Set yüksekliği geri * varsayılan /
			  padding:'5 piksel '
		  ), 400);
  ));

Çalışmanın demosunu görmek için burayı tıklayın.

Kaynak bilginin orjinaline buradan ulaşabilirisiniz. Bu çalışmayı bizimle paylaştığı için Soh Tanaka’ya teşekkür ederiz. Thanks for this work, Soh.

Zamanın yetersiz oluşundan dolayı sizlere Türkçe olarak anlatımını yapamayacağım. Demosunu burada görebileceğiniz sistem sade ve şık olacak bir şekilde tasarlanmış.

Ücretsiz olarak herkesin kullanımına sunulmuş bu sistemi kullanabilmek için IE6, IE7 , Firefox, Safari, Opera ve Chrome tarayıcıları gerekli.

Gerekli dosyaları ve sitenize yerleştiriken yapmanız gerekenleri buradan bulabilirsiniz.

Bu sistemin kullanıldığı birde WordPress Teması mevcut. Henüz Türkçe değil fakat muhtemelen kısa bir süre sonra SanalDuvar Türkçe Tema Galeride yerini almış olacak. Nigth Transition temasının İngilizcesini buradan indirebilirsiniz.

Öncelikle SanalDuvar Tema Galerinin tanınması amacıyla SanalDuvar’a giren herkesin haberi olsun diye bir uyarı kutusu hazırladım. Yine bir jquery harikalarından bir, css ile biraz düzenledikten sonra bu hale getirdim. Bu sayede Türkçe temalar her geçen gün daha fazla kullanıcıya ulaştıracağım. Zanamı gelince kaldırabilirim.

Bir diğer çalışmada metin bölümünde göze çarpması gerek. yayınlaşmaya başlayan renkli metin kutularını biraz CSS çalışması ile temaya yerleştirdim. Metin hakkındaki bilgilerin arka fonu #FFFFCC  renk kodu ile doldururken, metin bölümünün arka fonunu #e9fafa rengi ile ve ayrıca “SD” karakterleri ile görselliği desteklemiş oldum.

Siyah arka fonu böyle renklerle destekleyince temanın göze daha hoş gözüktüğünü düşünüyorum Çalışmalara devam ediyorum!

Sayfanız ilk açıldığında 1 numaralı resim otomatik olarak görüntülenecektir.

İsterseniz resimlerinizi farenizin tekerlek kısmı ile sağa-sola kaydırarak görüntüme imkanınızda var.
 

Ya da sayfa yerleştirmiş olduğunuz resimlerin alt kısmında bulunun fare ile tutup kaydırabileceğiniz bir kısım ile resimlerinizi değiştirebilirsiniz.

Kurulum;
Öncelikle eklentinin kurumu için gerekli aşağıdaki bağlantıdan indirin.

İndirdiğiniz .zip’li dosyayı çıkarın; panel ve resim adlı iki klasörüde blogunuzun tema klasörünün içine gönderin.
Eklentiyi kullanıma geçirmek için asıl bölüme geldi sıra; Kodlama.
Öncelikle temamıza ait “header.php” dosyamızı açıyoruz,  <head> ve </head> tagleri arasına aşağıdaki kodları yapıştırıyoruz.

<!-- header.php içine başlangıç -->
<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Besleme" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />

<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo('template_directory'); ?>/panel/jScrollHorizontalPane.css" />

<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/panel/lib/jQuery/jquery-1.2.1.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/panel/lib/jQuery/jquery.dimensions.js"></script>

<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/panel/lib/jQuery/jquery.mousewheel.min.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/panel/jScrollHorizontalPane.js"></script>
<script type="text/javascript">

$(function() {
 var originalSizes = new Array();
 $('#pane5').jScrollHorizontalPane({scrollbarHeight:10, scrollbarMargin:0});
 // this initialises the demo scollpanes on the page.

$('a.jumper').click(function(){
  var pos = $(this).attr('id');
  var c = $("#pane5");
  c[0].scrollTo("li:eq("+pos+")");
  return false;
 });
});

</script>
<!-- header.php içine bitiş -->

Bu kodlar sayesinde temamıza gerekli .js ve .css dosyalarımızı çağırmış olduk. Bu arada bir de küçük bir “script” kodunuda eklemiş olduk.

Şimdi gelelim sayfamızda eklentinin görüntülenmesine, aşağıdaki hazırlamış olduğum kodları eklentinin görüntülenmesini istediğiniz yere yapıştırıyorsunuz, mesela “sidebar.php” dosyasının içine.

<!-- index.php içine başlangıç -->

<CENTER>
<a class="jumper" id="0" href="#">1</a> |
<a class="jumper" id="1" href="#">2</a> |
<a class="jumper" id="2" href="#">3</a> |
<a class="jumper" id="3" href="#">4</a> |
<a class="jumper" id="4" href="#">5</a> |
<a class="jumper" id="5" href="#">6</a> |
<a class="jumper" id="6" href="#">7</a> |
<a class="jumper" id="7" href="#">8</a> |
<a class="jumper" id="8" href="#">9</a> |
<a class="jumper" id="9" href="#">10</a> |
<a class="jumper" id="10" href="#">11</a> |
<a class="jumper" id="11" href="#">12</a> |
<a class="jumper" id="12" href="#">13</a> |
<a class="jumper" id="13" href="#">14</a>
<div class="holder">
 <div id="pane5" class="scroll-pane">
  <ul class="blocks">

<li>
  <img src="<?php bloginfo('template_directory'); ?>/resim/1.png"/>
  </li>
  <li>
  <img src="<?php bloginfo('template_directory'); ?>/resim/2.png"/>
  </li>
  <li>
  <img src="<?php bloginfo('template_directory'); ?>/resim/3.png"/>
  </li>
  <li>
  <img src="<?php bloginfo('template_directory'); ?>/resim/4.png"/>
  </li>
  <li>
  <img src="<?php bloginfo('template_directory'); ?>/resim/5.png"/>
  </li>
  <li>
  <img src="<?php bloginfo('template_directory'); ?>/resim/6.png"/>
  </li>
  <li>
  <img src="<?php bloginfo('template_directory'); ?>/resim/7.png"/>
  </li>
  <li>
  <img src="<?php bloginfo('template_directory'); ?>/resim/8.png"/>
  </li>
  <li>
  <img src="<?php bloginfo('template_directory'); ?>/resim/9.png"/>
  </li>
  <li>
  <img src="<?php bloginfo('template_directory'); ?>/resim/10.png"/>
  </li>
  <li>
  <img src="<?php bloginfo('template_directory'); ?>/resim/11.png"/>
  </li>
  <li>
  <img src="<?php bloginfo('template_directory'); ?>/resim/12.png"/>
  </li>
  <li>
  <img src="<?php bloginfo('template_directory'); ?>/resim/13.png"/>
  </li>
  <li>
  <img src="<?php bloginfo('template_directory'); ?>/resim/14.png"/>
  </li>

</ul>

</div>
</div>
</CENTER>

<!-- index.php içine bitiş -->

Evet şuan itibariyle bir jquery ile desteklenen bir galeriye sahip olmanız gerekiyor.
Ancak bunun boyutlarını 250*200 olacak şekilde ayarladığım için bazı arkadaşlar boyutlarda değişiklik yapmak isteyebilirler. Bunun için aşağıda gerekli bilgileri vereceğim.

Boyutları Değiştirme

“panel” adlı klasörümüzün içinde bulunan “jScrollHorizontalPane.css” sitil dosyamızı açıyoruz.
Eğer görüntülemek istediğimiz resimlerin enine genişlemesini istiyorsak aşağıdaki bölümde değişiklik yapmamız gerek.

ul.blocks li {
 width: 250px; /*Bu boyut, görüntülemek istediğimiz enine olan büyüklüktür. */
 margin: 0 0 0 0px;
 float: left;
 display: block;
 height: 200px;
}

Bu değişikliği yaptıktan sonra aşağıdaki bölümde de yapmanız gereken bir değişiklik olacak.

ul.blocks {
 padding: 0;
 width: 3500px; /*Genel Boyut-Bu boyut yukarıdaki yapmış olduğunuz genişliğin 14 katı olması gerekir*/
 display: block;
 height: 250px;
}

Bu değişikliği yapmanız gerekir, çünkü tıklandığında doğru resime gitmemizi sağlayan genel boyut budur. Eğer resim sayısıyla oynarsak bu miktar yine değişikli gösterecektir. Aşağıda bunu formüle edelim.

Resim Boyutu X Resim Miktarı = Genel Boyut

Değişliği sadece yükseklik boyutunda yapmak istiyorsak, bunun için sadece aşağıdaki kodda değişiklik yapmamız yeter. Bunun için ayrıca bir başka kodda değişikliğe gerek yoktur.

#pane5 {
 height: 200px; /*Bu boyut bize yükseklik olarak değişikliği saylıyor.*/
 width: 50%;
 padding: 0;
 display: block;
 _overflow: hidden;
}

Eğer görüntülediğiniz galeride farenin hassasiyetini ya da tıkladığınız numaraya air resime gitme hızı ayarlamak istiyorsanız “panel/jScrollHorizontalPane.js” dosyasını açınız ve 80nci satıra gidiniz. Aşağıdaki kodlarda değişiklik yapacağız.

settings = jQuery.extend(
  {
  scrollbarHeight : 10,
  scrollbarMargin : 5,
  wheelSpeed : 18, //farenin tekerleğine olan hassasiyeti ayarlar.
  showArrows : false,
  arrowSize : 10,
  animateTo : false,
  dragMinWidth : 1,
  dragMaxWidth : 99999,
  animateInterval : 100, //tıklanan numaraya ait resime giderken uygulanan hız.
  animateStep: 3,
  maintainPosition: true,
  resize: true,
  minimumWidth: 200,
  reset: false
  }, settings
 );

Diğerlerinde herhangi bir değişiklik yapmaya gerek yok.
Mümkün oldukça açık ve basit anlatmaya çalıştım. Umarım faydalı olmuştur.
Not: Bu eklentinin benzerleri yada aynı işlevi gören çeşitleri haber sitlerinde rastlamak mümkündür.
Kısa bir not daha: Bu makaleyi bitirdiğimde saat 03.42’yi gösteriyordu.

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.