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 select’leri 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 select’imiz değiştiğinde abjumpMenu fonksiyonu ile işlemlere başlıyoruz.

Kod:
var deger = jQuery('.anaSelect').val();

Ana select’inin secilen degerini aliyoruz.

Kod:
jQuery('#anaDeger').val(lisanssız); jQuery('#altDeger').val(lisanssız); jQuery('#anaDeger').val(deger);

Ana select’inin secilen değerlerini gizli bir input’a 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 select’den aldigimiz değere bir text ekliyoruz cunki class isimleri ‘tek’ ve ‘sayisal’ karakterlerden oluşamaz.

Kod:
jQuery('.altSelect').fadeOut(0);

Onceden acılmış alt select’imiz varsa tumunu kapatiyoruz.

Kod:
jQuery('.'+acilacakDeger).fadeIn('fast');

Ana select’den secilen değere gore alt select’imizi 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ı ftp’nize 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