Question

Im using WordPress, and I want to create a nice submenu for my users. I was browsing the web and came across a nice submenu here: http://www.pathe.nl

How would I create this kind of menu with jQuery, or is there an existing WordPress plugin to achieve this?

Any help would be greatly appreciated.

My menu style:

<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>

This is the menu I’m getting when I call:

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

Answer 1

I used superfish jquery plugin to create a menu like the one on pathe.nl. The markup of your menu fits nicely with this plugin. It also supports nested menu items.

I never worked with WordPress myself, but I assume it’s trivial to implement the plugin. The only thing you need to add to your page is

<script> 

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

</script>