子菜單pathe.nl

即時通訊使用Wordpress，我想爲我的用戶創建一個不錯的子菜單。我正在瀏覽網頁，並在這裏遇到了一個不錯的子菜單：www.pathe.nl 子菜單pathe.nl

我該如何使用jQuery創建這種菜單，或者是否存在現有的Wordpress插件來實現此目的？

任何幫助將不勝感激。

我的菜單風格：

<div class="menu-main-nav-container"> 
    <ul id="menu-main-nav" class="menu"> 
     <li id="menu-item-51" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-51"> 
     <a href="/">Home</a> 
     </li> 
     <li id="menu-item-50" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-23 current_page_item menu-item-50"> 
      <a href="/locaties/">Locaties</a> 
     </li> 
     <li id="menu-item-49" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-49"> 
      <a href="/acties/">Acties</a> 
      <ul class="sub-menu" style="display: block;"> 
       <li id="menu-item-79" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-79"> 
       <a href="/tim/">tim</a> 
       </li> 
      </ul> 
     </li> 
     <li id="menu-item-48" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-48"> 
      <a href="/over/">Over</a> 
     </li> 
     <li id="menu-item-47" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-47"> 
      <a href="/contact/">Contact</a> 
     </li> 
     </ul> 
</div>

這是我收到的時候我調用菜單：

<?php wp_nav_menu(array('menu' => 'Main Nav')); ?>

來源

2011-12-17 sn0ep

我用superfish jQuery插件創建像pathe.nl的一個菜單。你的菜單的標記很適合這個插件。它也支持嵌套的菜單項。

我從來沒有使用Wordpress自己，但我認爲這是微不足道的插件實現。您需要添加到您的網頁的唯一的東西是

<script> 

    $(document).ready(function(){ 
     $("ul.sf-menu").superfish(); 
    }); 

</script>

來源

2011-12-17 13:07:22

嗨，但它使用了一個鼠標懸停功能。我真的希望它在一個onclick事件，所以孩子們應該只顯示當我點擊父 – sn0ep 2011-12-17 13:13:50

我目前有：http://jsfiddle.net/jejNy/12/ – sn0ep 2011-12-17 13:36:36

如果你想要一個onclick事件，你有一個您發佈的菜單標記中存在問題。包含子菜單項目的mainmenu項目還有一個''標籤指向'/ acties'。所以當你點擊這個項目而不是顯示子菜單時，你會希望導航到'/ acties'。使用您的標記唯一的解決方案是使用鼠標懸停。如果你想按pathe的方式，mainmenu項不能包含鏈接，這樣jquery決定是否顯示子菜單也更容易。 – 2011-12-17 15:45:15

回答

相關問題