Gene Aklımda olan konulardan biriydi bu.Açılır menü siteye şıklık kazandırır ve WordPress’in kendine ait özel class’ları ile bunu nasıl gerçekleştirebilirim diye kendime sordum ve yanıtınıda aldım.Bunun için sadece jQuery ile nasıl yapıldığını bilmek yeterli olacaktı.Bende açılır menünün nasıl yapıldığını öğrendim bunu WordPress’e entegre ettim.Videolu bir şekilde anlatım sistem mantığının nasıl olduğunu daha da kavratmak isterdim ancak şuan buna vaktim yok isteyenler olursa belki daha sonra çekebilirim.
Gene her zamanki gibi ilk işlemimiz olan JS dosyamızı sitemize çağırmakla başlıyoruz.Bunun için bilindiği gibi 2 yöntem vardı.
Bu jQuery.com üzerinden gelen dosya
<script></script>
Buda Googleapis üzerinden gelen dosya
<script></script>
Bunları bu şekilde çağırıyoruz ve ardından menümüz için alt yapımızı oluşturuyoruz.
Şeklinde girmemiz gerekmektedir.
Şeklinde girmemiz gerekmektedir.Tabiki bu WordPress’te işimize yaramayacaktır.Wordpress’te bu menü yapısının görünmesi için
şeklinde yazmamız gerek.Böyle yazdığımız taktirde yazılarımıza otomatik olarak “page_item” classı atanacak.
Eğer biz bir sayfayı eklerken üst sayfasını belirlersek bunun kod yapısıda belirttiğimiz üst sayfanın hemen altında yeni bir
- yapısı oluşturarak ona “children” class’ını atıyor ve bizim açılır kapanır yapmamızda bize çok büyük kolaylık sağlıyor.
Bunun style’ini kendinize göre düzenleyebilirsiniz ancak ben kendi oluşturduğum style’i ekleyerek sizlere birer kolaylık sağlayayım.
#menu {background-color: #092830; border: 1px solid #ddd; height: 50px; margin-top: 10px;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
#menu li.page_item {float: left; border-right: 1px solid #ddd; position: relative;}
#menu li.page_item a {display: block; padding: 17px 30px; color: #ddd; }
#menu li.page_item a:hover, #menu li.page_item.aktif a{color: #fff; background-color:#175475;}
.children {position: absolute; left: 0; top: 50px; background-color:#175475; display: none;}
#menu li.page_item ul.children {}
#menu li.page_item ul.children li{width: 170px;}
#menu li.page_item ul.children li a{display: block; font-weight: normal; padding: 10px; color: #fff;}
Bu işlemi yaparsak açılır menümüz aktif olmamış olur ancak aşağıdaki jQuery kodlarını sitemize girersek Açılır menü işlemini tamamlamış oluruz.
<script>
$(function(){
$("#menu li.page_item").hover(function(){
$(this).addClass("aktif");
$(".children", this).slideDown();
}, function(){
$(this).removeClass("aktif");
$(".children", this).slideUp();
});
});
</script>
Açılır menü işlemimiz göründüğü kadar da zor değil oldukça basit bir işlem.Şuan için demosunu sitemdeki “Hakkımda” sayfasının üzerine geldiğinizde görebilirsiniz ancak en kısa sürede demo alt yapımı oluşturup tüm demolarımı oraya yönlendireceğim.
Yazar: Eren Keskin
Kategori: jQuery + Wordpress
Web Adresi: ErenKeskin.com