Merhaba arkadaşlar hemen hemen 2 aydır makale yazamıyordum yoğunluktan, bugun muşterimin beni ekmesi ve bir arkadaşım benden boyle bir menu isteyince hemen bu boşluğu makaleye cevirmeye calıştım. Herzaman olduğu gibi bu uygulamaya tam isim vermedim.
Uygulama hakkında : İl İlce secimi gibi ana ve alt kategori secimli olan menuler icin yazdım.
On izleme :
Hemen kodlara gececek olursak
Html kodları ;
Kod:
Amasya Erzurum İzmir Kıbrıs Lutfen Seciniz Merzifon Gumuş Hacıkoy Hıra Kaya Duzu Dip Hacı Kop gel Gunahlarından Lutfen Seciniz Hasan Kale Yakutiye Hınıs İspir Aşkale Lutfen Seciniz Ali Ağa Bornava Alsancak Urla Lutfen Seciniz Girne Lefkoşa Lefke
Css kodları ;
Css kodları yoktur arkadaşlar selectleri kendinize gore duzenleyebilirsiniz.
jQuery kodları (en onemli kısım);
Kod:
function abjumpMenu()else }); }
Kodlar gene kalabalık gorukebilir ama %70 i acıklama . Kodları adım adım acıklayacak olursak;
function abjumpMenu()
Ana selectimiz değiştiğinde abjumpMenu fonksiyonu ile işlemlere başlıyoruz.
Kod:
var deger = jQuery('.anaSelect').val();
Ana selectinin secilen degerini aliyoruz.
Kod:
jQuery('#anaDeger').val(lisanssız); jQuery('#altDeger').val(lisanssız); jQuery('#anaDeger').val(deger);
Ana selectinin secilen değerlerini gizli bir inputa atiyoruz ki form islemi post edildiginde veriyi kolayca gondermek icin. Ayrica her ana select degistigidne verileri (input değerlerini )temizliyoruzi.
Kod:
var acilacakDeger = 'altSelect'+deger;
Ana selectden aldigimiz değere bir text ekliyoruz cunki class isimleri tek ve sayisal karakterlerden oluşamaz.
Kod:
jQuery('.altSelect').fadeOut(0);
Onceden acılmış alt selectimiz varsa tumunu kapatiyoruz.
Kod:
jQuery('.'+acilacakDeger).fadeIn('fast');
Ana selectden secilen değere gore alt selectimizi actırıyoruz.
Kod:
jQuery('.'+acilacakDeger).change(function()
Alt element den secim yapıldığında.
Kod:
var altDeger = jQuery('.'+acilacakDeger).val();
Secilen sekmenin değerini alıyoruz.
Kod:
if(altDeger == 'seciniz') else
Eğer alt menu değiştiğinde (change) herhangi bir alt menu secmemiş ise uyari verdiriyoruz
Js kodlarımız bu kadar arkadaşlar.
Kullanımı cok basittir
1 İndirmiş olduğunuz js dosyasını ftpnize atın.
2 Sayfanızda herhangi bir js dosyası ekli değilse şu iki kodu tagları arası bu iki kodu yapıştırın.
Kod:
Eğer sayfanızda ekli olan bir js kodu varsa sadece ab-jumpMenu.js dosyasını sayfanıza ekleyin.
3 Html taglarını direk sayfanıza ekleyin. (Gorunum acısından tasarım hoş değil ama bunu kendinize gore ayarlaya bilirsiniz.)
Uygulamayı indir / Uygulama demo