Artık coklu menulerde jquery acılır menu şart oldu bende dilimin donduğunce şimdi jquery acılır menu yapmayı oğreteceğim. Oncelikle bu adresten jquery dosyamızı indiriyoruz ve css yatay veya dikey menulerimizi oluşturmaya başlıyoruz konu hakında bilgisi olmayanlar icin css yatay menu ve dikey menuleri anlatmıştım o konudan esinlenerek oncelikle css dosyamızı sonra jQuery dosyamızı yazmaya başlıyalım.
Css Dosyamızı yazıyoruz
Kod:
Burada menu kalıplarımızı oluşturduk ve alt menulerin ozelliklerine display:none dedik yani gorunmez yaptık. Css dosyamızın bu kadar karışık durduğuna bakmayın icine girdikten sonra en fazla 6 ayrı class ’a ozellik tanımlamışızdır.
jQuery Dosyamızı yazalım
Kod:
$(document).ready(function()); /* Acılır Yatay Menu icin jQuery Kodları */ $('a.Tiklayatay').hover(function(), function()); }); });
Butun işlemi gercekleştiren en onemli kısım burası adım adım anlatıyorum.
Kod:
$('a.Tikla').click(function()
A Taglarından Class ’ı Tikla olana tıklanıldığında şunları yap ( … )
Kod:
$('.AltMenu').slideUp('fast');
Class ’ı AltMenu olanların hepsini slideUp yap yani kaldır.(bakınız : slideUp)
Kod:
$(this).parent().find('.AltMenu').slideDown('fast' );
Burada ise Tıklanılan tagında .AltMenu classlı div ’i bul ve slideDown yap yani ac.
Dikey Acılır menumuz icin yazdığımız js kodları bu kadar arkadaşlar. Yatay menu icinde bu kodlar gecerlidir. slideUp yerine fadeOut slideDown yerine fadeIn komutunu kullandık.
Şimdi ise Html kodlarımızı yazalım.
Html kodlarını yazmadan once genel mantığımız bir ana menumuz olacak
Kod:
ve bu menudeki
taglarının arasına acılacak alt menuyu yerleştireceğiz aşağıdaki ornekteki gibi.
Kod:
Tam html kodlarımız :
Kod:
Html kodlarımızda bu kadar arkadaşlar demo icin bu adrese bakabilirsiniz : jQuery Acılır Menu
Resim :
Takıldığınız noktaları belirtirseniz elimden geldiğince cevaplamaya calışacağım.
———————
Bu makale AycanB tarafından Aycan.net yazılmıştır.
jQuery A
———————