10 Nisan 2013

Blogger Acordion Menü

acordion menü
bloğunuz için güzel  bir  acordion menü  örneğini kendi sitemizdede göre bilirsiniz bunu  kullana bilmeniz için fazla birşey  yapmanıza yok        Yerleşim bölgesinden gatged ekle diyim HTML/Javascript
yapıp kodları yapıştırıyoruz ve buraya kod ekle yazar  yerlere kodlarınızı  ekliyosunuz hepsi bu kadar kod  aşağıdadır













<style type="text/css">
#accordion{width:100%;margin:auto;border:0px solid white}
#accordion h2{padding:5px 10px;background-color:#ccc;background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5wTMBz5R183_ZKpwHkc8mQaZ_XXxyXZeZjmEW0wHm0r1KaCiyTAWwU2Iqer7Q6bLvgB5LkQ9YiNinmK7Lg5Fh-Nw151BI2jBxGOJbqHmUx9lpUtBL5-eKVhEVXv8vtOUgNYTzT4L9FWc/s1600/arrow_right.gif);background-repeat: no-repeat;background-position: right center;color:#000;font:normal 11px Tahoma;border-bottom:1px solid #FFF;cursor:pointer;}
#accordion .content{font:normal 11px Arial;padding:5px 10px;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: left center;margin:0;padding:2px 0 3px 0;text-indent:0px;border-bottom:1px dotted #ccc;line-height:1.3em;}
#accordion .content li a:hover {text-decoration:none;color:#000;}
#accordion h2.active{background-color:#bbb;background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjah3ETqxzaXzHE_g-qAjG8RGcywp676RRrZ7V5hTdd6vMtdkoWb8_Gxjw0Y-M1O4Wnk2_vxLWBBg1meEe8ag0Pm-6GF_qKRVMgCYx4wVanGK2McB1wkWluMyJFadTuizQsv6wvT5AN1w0/s1600/arrow_down.gif);background-repeat: no-repeat;background-position: right center;font-weight:bold;}
</style>
<script type="text/javascript" src="http://yourjavascript.com/121511228073/accordion-menu.js"></script>
<script type='text/javascript'>
$(function() {
$('#accordion .content').hide();
$('#accordion h2:first').addClass('active').next().slideDown('slow');
$('#accordion h2').click(function() {
if($(this).next().is(':hidden')) {
$('#accordion h2').removeClass('active').next().slideUp('slow');
$(this).toggleClass('active').next().slideDown('slow');
}
});
});
</script>
<div id="accordion">
<h2>Title 1</h2>
<div class="content">
Kodu Buraya Ekle 1
</div>
<div id="accordion">
<h2>Title 2</h2>
<div class="content">
Kodu Buraya Ekle 2
</div>
<div id="accordion">
<h2>Title 3</h2>
<div class="content">
Kodu Buraya Ekle 3
</div>
<div id="accordion">
<h2>Title 4</h2>
<div class="content">
Kodu Buraya Ekle 4
</div>
<div id="accordion">
<h2>Title 5</h2>
<div class="content">
Kodu Buraya Ekle 5
</div>
</div></div></div></div></div>

Etiketler: , , , , , , ,

2 Yorum:

saat: 28 Temmuz 2013 18:39 , Blogger Erol Demirkol dedi ki...

burada do sunu çözemedim.... meslea Kodu Buraya Ekle 1 e ben yorumları eklemek kod 2 popüler yaınları eklemek istiyorum.. fakat bunlar gadget oldugundan kodlarını nasıl eklicem ?

 
saat: 28 Temmuz 2013 18:45 , Blogger Tolgagnl dedi ki...

yukardaki kodda kodu buraya ekle 1 yazan yere yorumların kodunu eklersiniz 2 ci kısma popüler kısmı eklersiniz. title 1 title 2 yazan yerlerede isimleri yazarsanız bu koduda sadece html/javascript olarak eklesen olur

 

Yorum Gönder

Kaydol: Kayıt Yorumları [Atom]

<< Ana Sayfa