jQuery ile açılır menü yapımını daha önceden anlatmıştım. Ancak o konuyu okuyup anlayamayan veya uygulamada sorun yaşayan bir çok arkadaşımız varmış. Onlar için daha kapsamlı bir şekilde bu konuya tekrar değineceğim. Bu işe ilk önce HTML – CSS yapımızı oluşturarak başlayalım.

Yatay Açılır Menü Yapımı

Bu kod yapısını göstermek amacı ile JsFiddle sitesinden faydalanacağım. Eğer alttaki şablonu kullanmayı bilmeyen arkadaşlarımız varsa birazcık bahsedeyim. Alanlar sekme sekme yer almaktadır. “HTML” sekmesine tıklayarak gerekli HTML kodlarımızı, “CSS” sekmemize tıklayarak gerekli CSS kodlarımızı ve “jQuery“ kütüphanemizi dosyamıza dahil ettikten sonra gerekli jQuery kodlarımızı “JavaScript” sekmesinden alabilirsiniz. Sonucun nasıl göründüğünü anlamak içinse “Result” sekmesine tıklamalısınız.

[B]IFRAME kodunu buraya ekleyemediğimden dolayı link veriyorum. Gerekli kodlar ister oradan ister ise sitemdeki yazıdan inceleyebilirsiniz.

http://jsfiddle.net/wy7K4/1/[/B]

Kodlardaki açıkla satırlarında neyin nerede nasıl kullanılacağı yazmaktadır. Uzun uzun açıklamaya gerek yok.

WordPress Entegresi

WordPress menü yapısında sabit bir şablon vardır. Bizde bu şablona uygun olarak kodlamamızdaki yerleşimi değiştireceğiz.

WordPress’te alt kategoriler otomatik olarak “.children” sınıfına ait olurlar. Bizde bunun için yukarıki kodlarda “.altKat” gördüğümüz yere “.children” yazarak bu açılır menümüzün WordPress entegresini gerçekleştirmiş oluruz.

Dikey Açılır Menü Yapımı

Diket açılır menü yapmamız için tek gereken şey CSS kodlarında oynamaktır. CSS kodlarındaki gerekli düzenlemeleri yaptıktan sonra “Result” sekmesindeki görünümü oluşturabilirsiniz.

IFRAME kodunu buraya ekleyemediğimden dolayı link veriyorum. Gerekli kodlar ister oradan ister ise sitemdeki yazıdan inceleyebilirsiniz.

http://jsfiddle.net/wy7K4/2/

Kaynak: http://erenkeskin.com/jquery-ile-acilir-menu-yapimi-ve-wordpress-entegre/