Blogger Dikey Özelleştirebilir Akordion Menü

     Merhaba Bilgi Cafem 61 okuyucuları...

  Blogger sitenizde Kenar çubuğunda açılır özelleştirebilir kendi menünüzü oluşturabileceğiniz akordion menüyü eklemek isterseniz bu sizin aradığınız menü olabilir.

  Blogger sitenizde ip gibi uzayan menülerden hoşlanmayanlar için bunu tavsiye edebilirim.Ayrıca her ana başlığa alt başlıklar ekleyebilirsiniz ve ana başlıkların dış çerceve rengi yazı ve ana sayfa içi renklerini değiştirerek sitenize uygun hale getirebilirsiniz.

  Aynı zamanda da alt başlıkları çoğaltabilir,dış çerceve renklerini yazı ve renklerini de özelleştirebilirsiniz.Yani bu menüde istediğiniz değişikliği kolayca yapabilirsiniz.İsterseniz CSS ile daha değişik bir menü elde edebilirsiniz.Bu sizin yaratıcılığınıza kalmış.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
<script type="text/javascript" >$(document).ready(function(){ 
    $('li.title a').click(function(e){ 
        var dropDown = $(this).parent().next(); 
        $('.downlistie').not(dropDown).slideUp('slow'); 
        dropDown.slideToggle('slow'); 
        e.preventDefault(); 
    }) 
}); 
</script> 
<style> 
ul.container{ 
    width:100%; 
    padding:5px;
} 
li.accoi-menu{ 
list-style:none; 
    padding:1px; 
    width:100%; 
    } 
li.title 
{ 
background:#45a2bf; 
list-style:none; 
padding:5px; 
} 
li.title a{ 
color:#fff; 
    display:block; 
padding:5px; 
    font:14px georgia, verdana; 
    overflow:hidden; 
        position:relative; 
    width:100%; 
     text-decoration:none; 
} 
.downlistie{
list-style:none; 
    display:none; 
    padding-top:5px; 
    width:100%; 
} 
.downlistie li{ 
background: #f8f8f8; 
   list-style:none; 
border-top:1px solid #ccc; 
border-bottom:1px solid #ccc; 
border-right:1px solid #ccc; 
border-left:1px solid #ccc;

    margin:5px ; 
    padding:4px 10px;     
}
.downlistie li:hover { 
background: #63beda; 
} 
.downlistie li a{ 
{ 
font:14px georgia, verdana; 
text-decoration:none; 
color:#333; 
} 
.downlistie li a:hover { 
text-decoration:none; 
color:#333; 
} 
</style> 
<ul class="container"> 
<li class="accoi-menu"> 
<ul> 
<li class="title"><a href="#" >Başlık</a></li>             
<li class="downlistie"> 
<ul> 
<li><a href='#'>Alt başlık</a></li> 
</ul></li></ul></li> 
<li class="accoi-menu"> 
<ul> 
<li class="title"><a href="#" >Başlık</a></li> 
<li class="downlistie"> 
<ul> 
<li><a href='#'>Alt başlık</a></li> 
</ul></li></ul></li> 
</ul>

Düzenlemede, özellikle yeni öğe eklemede biraz zorluk çekebilirsiniz ancak deneme yanılmalarla mantığını kısa sürede çözeceğinizi düşünüyorum. Şöyle bir örnek vereyim. Menüye yeni bir ana başlık eklemek istiyorsanız son kodundan önce şu kodları ekleyin:

<li class="accoi-menu"> 
<ul> 
<li class="title"><a href="#" >Başlık</a></li><li class="downlistie"> 
<ul> 
<li><a href='#'>Alt başlık</a></li> 
</ul></li></ul></li>

Blogumuza Abone Olun
 Yeni Yazılar e-posta Adresinize Gelsin

Not: Gelen Maili Aktif Etmeyi Unutmayınız!