Blogger Mega Drop Down Açılır Menü

     Blogger Mega Açılır Açılır Menü resimde de gördüğünüz gibi blogger sitenize kolaylıkla ekleyerek kullanabilirsiniz.Alt Açılır kategoriler deki başlıkları isteğinize Göre düzenleyerek azaltabilir VEYA çoğaltabilirsiniz.Menünün ziyaretinde başlıkların renklerini de Kullandığınız temaya uyumlu renkle değiştirerek works.
 
     Blogger Mega Açılır Açılır Menü sitenize Eklemek İçin;
* Kumanda paneli> Yerleşim> Gadget ekle Yolunu izliyoruz.
* Açılan ekrandan HTML / Javascript tıklıyoruz.
* Tekrar Açılan ekranda ki Kutuya aşağıda verecek olduğum kodları ekleyerek gadgeti kaydedin.
* Kodun Sonunda Bulunan menülere ait kısımları Kendinize göre düzenleyin.
* Genişlik  yükseklik değerlerinden sitenize uyumlu Olmasını sağlayabilirsiniz.
* Blogger Mega Açılır Açılır Menü sitenizin başlık Kısmı Altında görünmesini istiyorsanız blog başlığınızın bulundugu gadgetin hemen Altına bu menü gadgetini sürükleyerek BıRakın kaydedin 

<Style> ul.ldd_menu {
    margin: 0px;
    padding: 0;
    display: block;
    height: 50px;
    background-color: # D04528;
    list-style: none;
    font-family: "Trebuchet MS", sans-serif;
    border-top: 1px solid # EF593B;
    border-bottom: 1px solid # EF593B;
    border-left: 10px katı # D04528;
    -moz-box-shadow: 0px 3px # 591E12 4px;
    -webkit kutu gölge: 0px 3px # 591E12 4px;
    -Box-shadow: 0px 3px # 591E12 4px;
}

ul.ldd_menu a {
    text-decoration: none;
}

ul.ldd_menu> li {
    yüzer: Sol;
    position: relative;
}

ul.ldd_menu> li> yayılma {
    yüzer: Sol;
    color: #fff;
    background-color: # D04528;
    height: 50px;
    line-height: 50px;
    İmleç: varsayılan;
    padding: 0px 20px;
    text-shadow: 0px 0px 1px #fff;
    border-right: 1px solid # DF7B61;
    border-left: 1px solid # C44D37;
}

ul.ldd_menu .ldd_submenu {
    position: absolute;
    Üst: 50px;
    genişliği: 550px;
    display: none;
    donukluk: 0.95;
    Sol: 0px;
    font-size: 10px;
    background: # C34328;
    border-top: 1px solid # EF593B;
    -moz-box-shadow: 0px 3px # 591E12 gömme 4px;
    -webkit-box-shadow: 0px 3px # 591E12 gömme 4px;
    -Box-shadow: 0px 3px # 591E12 gömme 4px;
}

a.ldd_subfoot {
    background-color: # f0f0f0;
    color: # 444;
    display: block;
    clear: both;
    padding: 15px 20px;
    text-transform: büyük harf;
    font-family: Arial, serif;
    font-size: 12px;
    text-shadow: 0px 0px 1px #fff;
    -moz-box-shadow: 0px 0px # 777 ek 2px;
    -webkit-box-shadow: 0px 0px # 777 ek 2px;
    -Box-shadow: 0px 0px # 777 ek 2px;
}

ul.ldd_menu ul {
    list-style: none;
    yüzer: Sol;
    border-left: 1px solid # DF7B61;
    margin: 20px 0px 10px 30px;
    padding: 10px;
}

li.ldd_heading {
    font-family: Georgia, serif;
    font-size: 13px;
    font-style: italic;
    color: # FFB39F;
    text-shadow: 0px 0px 1px # B03E23;
    padding: 0px 0px 10px 0px;
}

ul.ldd_menu ul li a {
    font-family: Arial, serif;
    font-size: 10px;
    line-height: 20px;
    color: #fff;
    padding: 1px 3px;
}

ul.ldd_menu ul li a: hover {
    -moz-box-shadow: 0px 0px 333. 2px;
    -webkit-box-shadow: 0px 0px 333. 2px;
    box-shadow: 0px 0px 333. 2px;
    background: # AF412B;
} </ Style>  

<Script type = "text / javascript" src = "http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"> </ script>
<Script type = "text / javascript">
    $ (Function () {
        / **
         * Menü
         * /
        var $ menüsü = $ ('# ldd_menu');

        / **
         * Her liste elemanı için,
         * Biz gezinip zaman alt menüsünü göstermek ve
         * 510px span elemanı (başlık) genişletmek
         * /
        $ Menu.children ('li'). Each (function () {
            Bu var $ $ = (this);
            var $ açıklık = $ this.children ('yayılma');
            $ Span.data ('width', $ span.width ());

            $ This.bind ('MouseEnter', function () {
                $ Menu.find ('. Ldd_submenu'), ((doğru, true) .hide durdurun.);
                $ Span.stop (). Hareketlendirmek ({
                    'Width': '510px'
                }, 300, fonksiyon () {
                    $ This.find ('. Ldd_submenu') slideDown (300).;
                });
            }). {((Fonksiyonu 'MouseLeave') bağlamak
                $ This.find ('. Ldd_submenu'), ((true, true) .hide durdurun.);
                $ Span.stop (). Hareketlendirmek ({
                    'Width': $ span.data (width) + 'px'
                }, 300);
            });
        });
    });
</ Script>

<Ul id = "ldd_menu" class = "ldd_menu">
 <Li>
 <Span> Tatil </ span>
 <! - Genişliği 510px için artışlar ->
 <Div class = "ldd_submenu">
  <Ul>
   <Li sınıfı = "ldd_heading '> Konum By </ li>
   <Li> <a href="#"> Güney Amerika'nın </a> </ li>
   <Li> <a href="#"> Antartika </a> </ li>
   <Li> <a href="#"> Afrika </a> </ li>
   <Li> <a href="#"> Asya ve Avustralya </a> </ li>
   <Li> <a href="#"> Avrupa'nın </a> </ li>
  </ Ul>
  <Ul>
   <Li class = "ldd_heading"> Kategori </ li>
   <Li> <a href="#"> Sun & amp; Plaj </a> </ li>
   <Li> <a href="#"> Macera </a> </ li>
   <Li> <a href="#"> Bilim ve amp; Eğitim </a> </ li>
   <Li> <a href="#"> Extreme Sports </a> </ li>
   <Li> <a href="#"> Rahatlatıcı </a> </ li>
   <Li> <a href="#"> Spa ve Wellness </a> </ li>
  </ Ul>
  <Ul>
   <Li class = "ldd_heading"> Tema By </ li>
   <Li> <a href="#"> Cennet Adaları </a> </ li>
   <Li> <a href="#"> Cruises & amp; Tekne </a> </ li> Gezileri
   <Li> <a href="#"> Vahşi Hayvanlar & amp; Safaris </a> </ li>
   <Li> <a href="#"> Doğa Saf </a> </ li>
   <Li> diğerlerini & amp Helping <a href="#">; Umut </a> </ li> için
   <Li> <a href="#"> Dalış </a> </ li>
  </ Ul>
  <a class="ldd_subfoot" href="#"> + Yeni Fırsatlar </a>
 </ Div>
 </ Li>
 <Li>
 <Span> Ekipman </ span>
 <Div class = "ldd_submenu">
  <Ul>
   <Li sınıfı = "ldd_heading '> Konum By </ li>
   <Li> <a href="#"> Güney Amerika'nın </a> </ li>
   <Li> <a href="#"> Antartika </a> </ li>
   <Li> <a href="#"> Afrika </a> </ li>
   <Li> <a href="#"> Asya ve Avustralya </a> </ li>
   <Li> <a href="#"> Avrupa'nın </a> </ li>
  </ Ul>
  <Ul>
   <Li class = "ldd_heading"> Kategori </ li>
   <Li> <a href="#"> Sun & amp; Plaj </a> </ li>
   <Li> <a href="#"> Macera </a> </ li>
   <Li> <a href="#"> Bilim ve amp; Eğitim </a> </ li>
   <Li> <a href="#"> Extreme Sports </a> </ li>
   <Li> <a href="#"> Rahatlatıcı </a> </ li>
   <Li> <a href="#"> Spa ve Wellness </a> </ li>
  </ Ul>
  <Ul>
   <Li class = "ldd_heading"> Tema By </ li>
   <Li> <a href="#"> Cennet Adaları </a> </ li>
   <Li> <a href="#"> Cruises & amp; Tekne </a> </ li> Gezileri
   <Li> <a href="#"> Vahşi Hayvanlar & amp; Safaris </a> </ li>
   <Li> <a href="#"> Doğa Saf </a> </ li>
   <Li> diğerlerini & amp Helping <a href="#">; Umut </a> </ li> için
   <Li> <a href="#"> Dalış </a> </ li>
  </ Ul>
  <a class="ldd_subfoot" href="#"> + Yeni Fırsatlar </a>
 </ Div>
 </ Li>
 <Li>
 <Span> Mekanlar </ span>
 <Div class = "ldd_submenu">
  <Ul>
   <Li sınıfı = "ldd_heading '> Konum By </ li>
   <Li> <a href="#"> Güney Amerika'nın </a> </ li>
   <Li> <a href="#"> Antartika </a> </ li>
   <Li> <a href="#"> Afrika </a> </ li>
   <Li> <a href="#"> Asya ve Avustralya </a> </ li>
   <Li> <a href="#"> Avrupa'nın </a> </ li>
  </ Ul>
  <Ul>
   <Li class = "ldd_heading"> Kategori </ li>
   <Li> <a href="#"> Sun & amp; Plaj </a> </ li>
   <Li> <a href="#"> Macera </a> </ li>
   <Li> <a href="#"> Bilim ve amp; Eğitim </a> </ li>
   <Li> <a href="#"> Extreme Sports </a> </ li>
   <Li> <a href="#"> Rahatlatıcı </a> </ li>
   <Li> <a href="#"> Spa ve Wellness </a> </ li>
  </ Ul>
  <Ul>
   <Li class = "ldd_heading"> Tema By </ li>
   <Li> <a href="#"> Cennet Adaları </a> </ li>
   <Li> <a href="#"> Cruises & amp; Tekne </a> </ li> Gezileri
   <Li> <a href="#"> Vahşi Hayvanlar & amp; Safaris </a> </ li>
   <Li> <a href="#"> Doğa Saf </a> </ li>
   <Li> diğerlerini & amp Helping <a href="#">; Umut </a> </ li> için
   <Li> <a href="#"> Dalış </a> </ li>
  </ Ul>
  <a class="ldd_subfoot" href="#"> + Yeni Fırsatlar </a>
 </ Div>
 </ Li>
</ Ul>

Her ihtimale Karşı kodlarda bozulma olursa buradan kodları tekrar Indirebilirsiniz.

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

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