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.
Ön izleme :
Hemen kodlara geçecek olursak
Html kodları ;
Css kodları ;
Css kodları yoktur arkadaşlar selectleri 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 selectimiz değiştiğinde abjumpMenu fonksiyonu ile işlemlere başlıyoruz.
Ana selectinin seçilen degerini aliyoruz.
Ana selectinin seçilen 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.
Ana selectden aldigimiz değere bir text ekliyoruz çunki class isimleri tek ve sayisal karakterlerden oluşamaz.
Önceden açılmış alt selectimiz varsa tümünü kapatiyoruz.
Ana selectden seçilen değere göre alt selectimizi 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ı 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.
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.)
Uygulamayı indir / Uygulama demo
Uygulama hakkında : İl İlçe seçimi gibi ana ve alt kategori seçimli olan menuler için yazdım.
Ön izleme :
Hemen kodlara geçecek olursak
Html kodları ;
Kod:
<select class="anaSelect" onchange="abjumpMenu();">
<option value="1">Amasya</option>
<option value="2">Erzurum</option>
<option value="3">İzmir</option>
<option value="4">Kıbrıs</option>
</select>
<input type="text" id="anaDeger"/>
<select class="altSelect altSelect1" style="display: none;">
<option value="seciniz">Lütfen Seçiniz</option>
<option value="a">Merzifon</option>
<option value="b">Gümüş Hacıköy</option>
<option value="c">Hıra</option>
<option value="d">Kaya Düzü</option>
<option value="e">Dip Hacı</option>
<option value="f">Kop gel</option>
<option value="g">Günahlarından</option>
</select>
<select class="altSelect altSelect2" style="display: none;">
<option value="seciniz">Lütfen Seçiniz</option>
<option value="a">Hasan Kale</option>
<option value="b">Yakutiye</option>
<option value="c">Hınıs</option>
<option value="d">İspir</option>
<option value="e">Aşkale</option>
</select>
<select class="altSelect altSelect3" style="display: none;">
<option value="seciniz">Lütfen Seçiniz</option>
<option value="a">Ali Ağa</option>
<option value="b">Bornava</option>
<option value="c">Alsancak</option>
<option value="d">Urla</option>
</select>
<select class="altSelect altSelect4" style="display: none;">
<option value="seciniz">Lütfen Seçiniz</option>
<option value="a">Girne</option>
<option value="b">Lefkoşa</option>
<option value="c">Lefke</option>
</select>
<input type="text" id="altDeger"/>Css kodları yoktur arkadaşlar selectleri kendinize göre düzenleyebilirsiniz.
jQuery kodları (en önemli kısım);
Kod:
function abjumpMenu(){
/**
* ! Ama select'inin secilen degerini aliyoruz.
**/
var deger = jQuery('.anaSelect').val();
/**
* ! Ama select'inin secilen degerinini gizli bir input'a atiyoruz ki
* form islemi post edildiginde veriyi kolayca gondermek icin.
* Ayrica her ana select degistigidne verileri temizliyoruz
**/
jQuery('#anaDeger').val(lisanssız);
jQuery('#altDeger').val(lisanssız);
jQuery('#anaDeger').val(deger);
/**
* ! Ana select'den aldigimiz degere bir text ekliyoruz
* Cunki class isimleri tek sayisal karakterlerden olusmaz.
**/
var acilacakDeger = 'altSelect'+deger;
/**
* ! Onceden acilmis alt select'imiz varsa tumunu kapatiyoruz.
**/
jQuery('.altSelect').fadeOut(0);
/**
* ! Ana select'den secilen degere gore alt select'imizi actiriyoruz.
**/
jQuery('.'+acilacakDeger).fadeIn('fast');
/**
* ! Alt element den secim yapildiginda.
**/
jQuery('.'+acilacakDeger).change(function(){
/**
* ! Secilen sekmenin degerini aliyoruz.
**/
var altDeger = jQuery('.'+acilacakDeger).val();
/**
* ! Eger alt menu degistiginde (change) hic bir alt menu secmemis ise
* uyari verdiriyoruz
**/
if(altDeger == 'seciniz')
{
alert("Lütfen alt değeri seçiniz");
jQuery('#altDeger').val(lisanssız);
}else
{
jQuery('#altDeger').val(altDeger);
}
});
}function abjumpMenu(){
Kod:
function abjumpMenu(){ ... }Ana selectimiz değiştiğinde abjumpMenu fonksiyonu ile işlemlere başlıyoruz.
Kod:
var deger = jQuery('.anaSelect').val();Ana selectinin seçilen degerini aliyoruz.
Kod:
jQuery('#anaDeger').val(lisanssız);
jQuery('#altDeger').val(lisanssız);
jQuery('#anaDeger').val(deger);Ana selectinin seçilen 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 çunki class isimleri tek ve sayisal karakterlerden oluşamaz.
Kod:
jQuery('.altSelect').fadeOut(0);Önceden açılmış alt selectimiz varsa tümünü kapatiyoruz.
Kod:
jQuery('.'+acilacakDeger).fadeIn('fast');
Kod:
jQuery('.'+acilacakDeger).change(function(){ .. }Alt element den seçim yapıldığında.
Kod:
var altDeger = jQuery('.'+acilacakDeger).val();Seçilen sekmenin değerini alıyoruz.
Kod:
if(altDeger == 'seciniz')
{
alert("Lütfen alt değeri seçiniz");
jQuery('#altDeger').val(lisanssız);
}else
{
jQuery('#altDeger').val(altDeger);
}Js kodlarımız bu kadar arkadaşlar.
Kullanımı çok 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:
<script src="http://code.jquery.com/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="kutuphane/ab-jumpMenu.js" type="text/javascript"></script>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.)
Uygulamayı indir / Uygulama demo