Blogger İcin Akordeon Menu Ekle

(Açılır menü vb Yüzer yatay navigasyon menüsü, açılan menü) menüleri çeşitli türleri vardır blogger bloglar kullanmak ama bu yazı biz akordeon menü olarak bilinen menü ilginç bir türü görüşecek temin edilebilir vardır.

İçinde bağlantıların büyük miktarda depolama kapasitesine sahip kompakt bir menü. Akordeon menüsünün genel formu menu.Ve biz blogger bloglar bu harika akordeon menü ekleme hakkında konuşmak bu yazı dropdown bir tıklamayla dayanmaktadır.
Bu menü CSS ve jQuery yardımı ile oluşturulur. Bu sizin blogger blog içine bu menüyü entegre etmek çok kolaydır.

Akordiyon menü ekleme blogger için
Senin blogger pano açın.
Blogunuza seçin.
Seçin Düzen seçeneğini.
Tıklayın bir gadget ekle düzen ekranında seçeneği.
Widget listesi ekranda belirecektir.
Seçin HTML / JavaScript listeden widget'ı.
In HTML / JavaScript widget aşağıdaki kodu yapıştırın ve widget'ı kaydedin.
Eylem yeni akordeon menüsünü görmek için blogunuzu açın.

Akordeon menü Kod

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126<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:275px;
    padding:5px;
}
li.accoi-menu{
list-style:none;
    padding:1px;
    width:100%;}

li.title
{
border-radius:5px;
background:#333333;
list-style:none;
padding:5px;
}
li.title a{
color:#ffffff;
    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{ 
   list-style:none;
border-left:1px solid #dcdcdc;
border-right:1px solid #dcdcdc;
border-bottom:1px solid #dcdcdc;
border-radius:5px; 
    margin:5px ;
    padding:4px 10px;     
}

.downlistie li:hover {
background:orange;
}
.downlistie li a{
{
font:14px georgia, verdana;
text-decoration:none;
color:#333333;
}
.downlistie li a:hover {
text-decoration:none;
color:#333333;
}
</style>
<ul class="container">
          <li class="accoi-menu">
              <ul>
                <li class="title"><a href="#" >Blogger</a></li>             
                <li class="downlistie">
                    <ul>
    <li><a  href="#" >Templates</a></li>
    <li><a  href="#">Widgets</a></li>
    <li><a href="#">Guides</a></li>
                    </ul></li></ul></li>

   
    <li class="accoi-menu">
         
              <ul>
                <li class="title"><a href="#" >Wordpress</a></li>

                <li class="downlistie">
                    <ul>
    <li><a href="#" >Themes</a></li>
    <li><a href="#">Plugins</a></li>
    <li><a href="#">Guides</a></li>                 
                 </ul></li></ul></li>   

 <li class="accoi-menu">
              <ul>
                <li class="title"><a href="#" >Freebies</a></li>
                <li class="downlistie">
                    <ul>
    <li><a href="#" >Blogger templates</a></li>
    <li><a href="#">Wordpress Themes</a></li>
    <li><a href="#">Plugins</a></li>
    <li><a href="#">Scripts</a></li>
         </ul></li></ul></li>

 <li class="accoi-menu">
              <ul>
                <li class="title"><a href="#" >Services</a></li>
                <li class="downlistie">
                    <ul>
    <li><a href="#" >Website Design</a></li>
    <li><a href="#">Blogger</a></li>
    <li><a href="#">Wordpress</a></li>
    <li><a href="#">Custom Templates</a></li>                   
                 </ul></li></ul></li>


 <li class="accoi-menu">
          <ul>
                <li class="title"><a href="#" >About us</a></li>
                  <li class="downlistie">
                    <ul>
    <li><a href="#" >About us</a></li>
    <li><a href="#">Contact us</a></li>
     <li><a href="#">Disclaimer</a></li>
    <li><a href="#">Privacy policy</a></li>
              </ul></li></ul></li>

    </ul>

Akordeon menüsünü özelleştirme
Değerini değiştirin arka plan: # 333333; menüsünde ana başlıkların arka plan rengini değiştirmek için. Değerini değiştirin ; turuncu: Arka plan üzerinde fareyi sırasında bir öğenin rengini değiştirmek için. Tüm oluşumları içinde href = "#" yerine # Kendi bağlantıları ile.