Okuyucudan: Dikey Akordeon Menü

Menüler blogların olmazsa olmazlarıdır ve genellikle yatay olanları tercih edilir. Ancak bu, dikey menü kullanılmayacak anlamına gelmez. Dikey menülerin fazla tercih edilmemesinin nedeni bence çok yer kaplamaları ancak ufak bir scriptle bu sorun çözülebilir.

 

Blog Hocam’da daha önce bu tarz bir menü paylaşmadığımı gören Mustafa Aydın blogunda kullandığı akordeon menünün kodlarını bizimle paylaşmak istedi. Menüde ana başlıklara tıkladığınızda akordeon şeklinde açılıyor ve alt başlıklar gözüküyor. Akordeon şeklinde açılır kapanır olması daha az yer kaplamasını sağlıyor. Yani oldukça kullanışlı bir menü diyebiliriz.

 

 

Görmüş olduğunuz resim, menüyü bizimle paylaşan Mustafa Aydın’ın bloguna ait. Nasıl çalıştığını görmek için blogunu ziyaret edebilirsiniz.

 

Bu menüyü blogunuza eklemek isterseniz Blogger kumanda paneline giriş yaptıktan sonra Yerleşim > Gadget ekle > HTML/JavaScript yolunu takip ederek aşağıdaki kodları yapıştırın.

 

<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 </ul> 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>

 

Ana başlıklardan birinin altındaki alt başlıkları çoğaltmak isterseniz <li><a href='#'>Alt başlık</a></li> hemen yanına aynısından bir tane daha ekleyin.

Kolay gelsin!