Daha önce WordPress‘te Yatay olarak açılır menü nasıl yapılır onu anlatmıştım. O konunun altına gelen yorumlardan yola çıkarak bir de dikey menüde açılır kısım nasıl yapılır dedim ve bir örnek niteliğinde çalışma hazırladım. Bunun yapılışınıda sizlere anlatacağım.
Aslında O konunun altında kendini bilmez bir arkadaşın yaptığı yorum benim moralimi oldukça bozdu. Benim yazılılardan ve elimdeki işlerden vs. vaktim olmuyor demişim adamda altına; tövbe tövbe ya neyse bu konu hakkında konuşursam patlarım, en iyisi susayım.
Her neyse. Hemen anlatmaya başlıyorum. Öncelikler kodlar için JSFiddle kullanacağım. Tüm katmanlara tek tek tıklayarak kodlara ulaşabilirsiniz.
Eğer CSS HTML bilmiyorsanız bu işe başlamayın diyorum. Sonra gelen tepkilere maruz kalmak istemiyorum.
Menümüzü Kodlayalım
Menümüz için alanlarımızı oluşturalım ve kodlama işlemimize başlayalım.
Yatay Açılır Menü
body {background-color: #ddd; font: 14px Arial;}
a {text-decoration: none;}
.ortala {height: 500px; background-color: #fff; border: 1px solid #aaa; width: 860px; margin: 30px auto; overflow: auto; padding: 20px; position: relative;}
#menu {float: left; overflow: auto;}
#menu li{width: 150px; display: block; background-color: #444; padding: 10px; cursor: pointer; height: 15px;}
#menu li:hover{background-color: #222;}
#menu li.aktif{background-color: #000;}
#menu li a{color: #f6f6f6; }
.children {position: absolute; left: 190px; display: none; margin-top: -26px;}
.children li{width: 150px; display: block; background-color: #444; padding: 10px; cursor: pointer; height: 15px;}
.children li a{color: #f6f6f6; }$(function(){
$("#menu li").hover(function(){
$(this).addClass("aktif");
$(".children", this).fadeIn("fast");
},function(){
$(this).removeClass("aktif");
$(".children", this).fadeOut("fast");
});
});Buraya kadarki işlemler basit CSS HTML ve jQuery işlemleriydi. Zaten jQuery kodlarıda önceki yazıdaki kodların aynısı sadece CSS ile oynama yaptık.
WordPress Entegresini Gerçekleştirelim
WordPress‘te kategorilerimizi listeletmek için
kodunu kullanırız.Sizde HTML kodlarındaki ul#menu’nün içindeki her şeyi boşaltarak sadece bu kodu yazmanız yeterli. Yani ortaya şöyle bir kod çıkması gerek.
Yatay menümüzde hazır. Daha ayrıntılı olarak kategori kodlarını incelemek için Codex‘e bakabilirsiniz.
Demosuna Sitemdeki Yazıdan Ulaşabilirsiniz. Buraya Iframe Ekleyemedim.
Kaynak: http://erenkeskin.com/wordpress-dikey-acilir-menu-yapimi/