14 Nisan 2015 Salı

Blogger Klasik Acordion Menü


   Blogunuzda kullanabileceginiz klasik Kullanışlı acordion menü Sayesinde ana sayfanızın Düzenli Olmasını sağlayabilirsiniz.Ayrıca acordion Menüler Sayesinde Bir çok eklentiyi ana sayfanızda yayınlayarak çirkin görüntüyü Ortadan kaldırabilirsiniz.Üstelik sitenizin temasına Göre renkleri düzenleyerek temanıza uyumlu hale getirebilirsiniz.


<Style type = "text / css">
#accordion {width: 100%; margin: auto; border: 0px beyaz katı}
#accordion h2 {padding: 5px 10px; background-color: #ccc; background-image: no-repeat; background-position: Sağ merkezi; color: # 000; font: 11px Normal Tahoma; border-bottom: 1px solid #fff; imleç: işaretçi;}
#accordion .content {font: 11px Arial Normal; padding: 10px 5px; background: #eee;}
#accordion .content ul {list-style: none; margin: 0 0 0; padding: 0 0 0;}
#accordion .content li {background-image: url (); background-repeat: no-repeat; background-position: Sol merkezi; margin: 0; padding: 2px 0 3px 0; text-indent: 0px; border-bottom: 1px noktalı #ccc; line-height: 1.3em;}
#accordion .content li a: hover {text-decoration: none; color: # 000;}
#accordion h2.active {background-color: #bbb; background-image: no-repeat; background-position: Sağ merkezi; font-weight: bold;}
</ Style>
<Script type = "text / javascript" src = "http://yourjavascript.com/121511228073/accordion-menu.js"> </ script>
<Script type = 'text / javascript'>
$ (Function () {
. $ ('# Akordeon .content')) (gizlemek;
. $ ('# Akordeon h2: İlk').. AddClass ('aktif') aşağıdaki () slideDown ('slow');
$ ('# Akordeon h2'). {) ((Function tıklayın
{: (. 'gizli') $ (this) .next () (ise) ise
$ ('# Akordeon h2') removeClass ('aktif') aşağıdaki () slideUp ('slow')...;
$ (This) .toggleClass ('aktif') aşağıdaki () slideDown ('slow')..;
}
});
});
</ Script>
<Div id = "akordeon">
<H2> Acordion 1 </ h2>
<Div class = "content">
Kodu Buraya Ekle 1
</ Div>
<Div id = "akordeon">
<H2> Acordion 2 </ h2>
<Div class = "content">
Kodu Buraya Ekle 2
</ Div>
<Div id = "akordeon">
<H2> Acordion 3 </ h2>
<Div class = "content">
Kodu Buraya Ekle 3
</ Div>
<Div id = "akordeon">
<H2> Acordion 4 </ h2>
<Div class = "content">
Kodu Buraya Ekle 4
</ Div>
<Div id = "akordeon">
<H2> Acordion </ h2>
<Div class = "content">
Kodu Buraya Ekle 5
</ Div>
</ Div> </ div> </ div> </ div> </ div>



Blogumuza Abone Olun
Yeni Yazılar e-posta Adresinize Gelsin
Değil: Gelen Maili Aktif Etmeyi Unutmayınız!

Hiç yorum yok:

Yorum Gönder