jQuery ile Açılır Menü Yapımı ve WordPress Entegre

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/

Bir kaç arkadaşım soruyordu üşendiğimden hazırlayamıyordum. :) Şimdi göndereyim onları konuya. Eline sağlık.

teşekkürler Jquery harika.

Teşekkür ederim :)

K.bakmayın da biraz daha resimli anlatım olsa daha iyi olur ama konuyu acan kişinin yinede ellerine sağlık.

Dosyaları nasıl kaydedeceğiz? örneğin menu.css menu.js olarakmı ben kaydettim çalışmadı :S

wordpress entegresi konusunda açıklama yapabilir misiniz?

arkadaşlar wp_list_categories() fonksiyonunu geliştirerek sadece tıklanan kategorinin subkategorilerinin açık kalmasını (listelenmesini) istiyorum diğerleri kapalı olacak.. yani sadece seçtiğim kategorinin alt kategorileri listelenecek bunu nasıl yapabilirim.. WP örneğim yok fakat şöle bir site vereyim buradaki kategori yapısı gibi olacak.
sidebardan bahsediyorum..ve kısacası anakategoriye tıklayınca alt kategori açık kalacak bundan bahsediyorum...örnek:
Anakategori
---alt kategori(ana kategoriye tıklandığında görünür olduı)

Hocam biraz daha uğraştıracak bir yapı. Eğer gelen işlerde böyle bir şeyle karşılaşırsam yaptıktan sonra paylaşırım onuda.



Neresini açıklamamı istersiniz?



bir index.html oluşturun ve bunları uygun yerlere girin. jquery'nin çalışması içinde jquery kütüphanesini sayfaya dahil etmeyi unutmayın.



Resimli olarak anlatmak hiç bir şey farkettirmez hocam. Sitemdeki konuya bakarsanız JsFiddle özelliği çalıştığı için daha açıklayıcı bir görünüme sahip.