Merhaba arkadaşlar uzun zaman sonra ilk yazım olacak, standartlar gereği ilgilenemediğim web siteme elimden geldiğince bugünden itibaren yeniden yazı girmeye çalışacağım, Şimdiden tüm ilgilenenlere kolaylıklar dilerim.

Bugün ki dersimizde konusunu ele alacağız, benim anlatımım sadece olacak fakat geliştirmeleri siz dilediğiniz şekilde yapabilirsiniz.

İşlem sonunda edineceğimiz Görüntü bu şekilde olacaktır.

wordpress-acilir-menu

Öncelikle temelden başlayarak temamıza menü desteği kazandırıyoruz.

1.Aşama

add_action( 'init', 'theme_menus' );
function theme_menus() {
register_nav_menus(
array(
'wpmenu1' => __( 'Başlangıç Menüsü' ),
'wpmenu2' => __( 'Alt Menü' )
)
);
}

2.Aşama

WordPress Sayfamıza entegre etme işlemimiz, genelde header.php,footer.php vs gibi alanlarda kullanılsada istediğiniz her alanda bu menüleri sorunsuzca kullanabilirsiniz.
<div id="menu">
<?php wp_nav_menu(array('theme_location' => 'wpmenu1', 'container' => '')); ?>
</div>

3.Aşama

#menu {float:left;margin-top:10px;margin-left:25px;}
#menu ul {margin: 0; padding: 0;}
#menu li {display: block; float: left;line-height: 30px;padding-left:7px;padding-right:15px;margin-top:3px;float:left;list-style:none; position: relative;}
#menu li a {text-decoration:none;color:#002849;font-size:12px;display: block;height: 30px;line-height: 30px;}
#menu .current-menu-item a, #menu .current_page_item a, #menu a:hover {color: #000;}
#menu ul ul {display: none; position: absolute;top: 30px;z-index:9999;}
#menu ul ul li {float: none;width: 100px;background-color:#eee; border: 1px solid #ff9000;}
#menu ul ul li a {padding: 1px 1px;font-size:12px;}
#menu ul li:hover &gt; ul {display: block;}
#menu ul ul li ul {left: 150px;top: 0;}
Toplamda 2 Alt menü desteği var ilgili satır ( ul ul ) artırarak pozisyonları düzenleyip daha fazla açılır menü elde edebilirsiniz.
İşlemimiz Tamamlandı basitçe bu şekilde kolaylıkla açılır menü yapabilirsiniz.

Demo

Kolaylıklar Dilerim.
Metin Saraç 0 77 23 Aralık 2014
0 beğeni - 0 Yorum