jQuery Jump Menü

Merhaba arkadaşlar hemen hemen 2 aydır makale yazamıyordum yoğunluktan, bugün müşterimin beni ekmesi ve bir arkadaşım benden böyle bir menü isteyince hemen bu boşluğu makaleye çevirmeye çalıştım.  Herzaman olduğu gibi bu uygulamaya tam isim vermedim.
Uygulama hakkında : İl – İlçe seçimi gibi ana ve alt kategori seçimli olan menuler için yazdım.

Hemen kodlara geçecek olursak

Html kodları ;

Css kodları ;

Css kodları yoktur arkadaşlar select’leri kendinize göre düzenleyebilirsiniz.

jQuery kodları (en önemli kısım);

Kodlar gene kalabalık görükebilir ama %70 ‘i açıklama :). Kodları adım adım açıklayacak olursak;
function abjumpMenu(){

Ana select’imiz değiştiğinde abjumpMenu fonksiyonu ile işlemlere başlıyoruz.

Ana select’inin seçilen degerini aliyoruz.

Ana select’inin seçilen 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.

Ana select’den aldigimiz değere bir text ekliyoruz çunki class isimleri ‘tek’ ve ‘sayisal’ karakterlerden oluşamaz.

Önceden açılmış alt select’imiz varsa tümünü kapatiyoruz.

Ana select’den seçilen değere göre alt select’imizi açtırıyoruz.

Alt element den seçim yapıldığında.

Seçilen sekmenin değerini alıyoruz.

Eğer alt menü değiştiğinde (change) herhangi bir alt menü seçmemiş ise uyari verdiriyoruz

Js kodlarımız bu kadar arkadaşlar.

Kullanımı çok 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.

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. (Görünüm açısından tasarım hoş değil ama bunu kendinize göre ayarlaya bilirsiniz.)

“jQuery Jump Menü” üzerine 9 yorum

  1. Öncelikle bu güzel çalışma tebrik ederim.

    Ben bunun 3 lüsünü denedim ama bir türlü başaramadım.
    Bu konuda yardıma ihtiyacım var.

Bir yanıt yazın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir