子菜单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

子菜单pathe.nl

回答

相关问题