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.

 

Blogger akordeon menü

 

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!

14 yorum:

  1. Aklımda bir şey olmadan bir ansiklopedi okur gibi ziyaret ediyorum bloghocam'ı. Yeni başladığım blog hayatımda şu ana kadar bile çok çok faydalı bilgiler edindim.

    Kaliteli, güncel ve sürekli yeni içerikler paylaşımınız için teşekkür ederim. Şu ana kadar bloghocamdan menü oluşturmayı, sabit sosyal medya menüsünü, sosyal medya butonlarını, iletişim sayfası yapmayı öğrenmenin dışında teknik bilgiler öğrendim. Uygulamaların nasıl durduğunu görmek isterseniz blogumu ziyaret edebilirsiniz.

    Ayrıca, bu sitenin takipçileri de çok bilgili ve bu işe gönül vermiş insanlar. Blogumun tasarımı hakkında yorum yaparsanız çok sevinirim. Yorumlar
    üzerine blogumu geliştirmek çok isterim.

    Sevgi ve saygıyla,

    Gürhan


    kulupyelken.blogspot.com

    YanıtlaSil
  2. Hocam iletimi dikkate alıp paylaştığınız için teşekkür ederim.
    Biraz kurcaladığınızda içerisine widget bile ekleyebilirsiniz.

    YanıtlaSil
  3. blog hocamdan çok şey öğrendim :) ama keşke bir de bayan bloggerlar için birşeyler paylaşsanız mesela sosyal medya butonları. instagram twitter facebook g+ gibi yuvarlak hatlı olanlardan bulamadım bir türlü

    YanıtlaSil
  4. @Gürhan Gürel
    Yardımcı olabildiğimi görmek çok güzel.

    @Mustafa Aydın
    Katkıda bulunduğunuz için ben teşekkür ederim.

    @cansu selin
    Önerinizi dikkate alcacağım.

    YanıtlaSil
  5. güzel bir eklenti.. fazla yer kaplamaması + özelliği

    YanıtlaSil
  6. gerçekten güzelmiş saolun

    YanıtlaSil
  7. Hocam merhaba, öncelikle özür dilerim konu dışı yazıyorum, çünkü iletişim formunuz beni sevmedi sanırım :) Bloğunuzu yeni keşfettim ve bu güzel paylaşımlar için teşekkür ederim. Ardından sormak istediğim soru sayfalara özel permalink vermeyi bilmiyorum ve bulamadım. Bu konu hakkında yardımcı olabilir misiniz? İçerik değil de sadece özel sayfalar .com/p/blog-page.html problem bu şekilde.

    YanıtlaSil
  8. @Gürkan Şen
    Statik sayfalar için özel permalink oluşturamıyoruz Blogger'da.

    YanıtlaSil
  9. Serdar Abi Renkleri nasıl değiştirebilirim ?

    YanıtlaSil
  10. background: Buradan o mavi renkli kısmı değiştirebilirsin.
    color: Bu kısımdanda yazı rengini değiştirebilirsin.

    YanıtlaSil
  11. Faydali olacagini dusunuyorum elinize saglik.

    YanıtlaSil
  12. herkes için faydalı olabilir çünkü bu eklenti için bir zamanlarda bende blog temamı değiştir miştim... :) http://toycitolgahan.blogspot.com/

    YanıtlaSil
  13. merhabalar hocam, ben bunu yeni oluşturmaya başladıgım bloga uyguladım ama menulerin içeriğini nerden doldurmam gerekiyor blog dunyasında daha yeni oldugum için şimdiden teşekkürler

    YanıtlaSil
  14. Teşekkür ederim, bulduklarımın içinde en açıklayıcı olanı.

    YanıtlaSil

Blogger tarafından desteklenmektedir.