I'm looking to add javascript mouseover states to the navigation to have the children only appear while the parent is active. I

I believe this is the javascript:

 <?php wp_nav_menu( array('container' => '', 'container_class' => '', 'menu_class' => '', 'menu_id' => 'menuhead', 'sort_column' => 'menu_order', 'theme_location' => 'primary' ) ); ?>

Any help would be great.

The site: /

I'm looking to add javascript mouseover states to the navigation to have the children only appear while the parent is active. I

I believe this is the javascript:

 <?php wp_nav_menu( array('container' => '', 'container_class' => '', 'menu_class' => '', 'menu_id' => 'menuhead', 'sort_column' => 'menu_order', 'theme_location' => 'primary' ) ); ?>

Any help would be great.

The site: http://svadsi.info/

• javascript
• wordpress
• navigation

4 Answers 4

This is a bit furstrating isn't it?

Clearly no one is reading the actual question here.

The question was: where do I find the file in wordpress that I can edit the menu?

NOT tell me how to do it. So, where do you find the actual code that makes up the default menu in Wordpress?

In my version the code is found in: nav-menu-template.php

You want child page links to only appear when the parent page is shown?

Have you seen the docs on the function? http://codex.wordpress/Function_Reference/wp_nav_menu

And a tutorial on using WP3 menus: http://justintadlock./archives/2010/06/01/goodbye-headaches-hello-menus

That code you posted is PHP, not JavaScript.

Why don't you achieve this using unobtrusive event handlers?

No need to touch WordPress' awful code :P

Update

Here is some code to look at it. If you're not sure of something, google the keyword alongside with javascript.

I'm pretty damn sure WordPress uses jQuery.

$(function() {

   $('#menu > li').hover(function() {
       $(this).find('ul').show();
   }, function() {
       $(this).find('ul')hide();
   };

});

Also, knowing JavaScript without a library will assist you in debugging and general coding.

This code is similar to the jQuery.

window.onload = function() {
    var menu = document.getElementById('menu');

    var children = menu.childNodes;

    for (var i = 0, childrenLength = children.length; i < childrenLength; i++) {

       if (children[i].nodeType === 3) {
           continue;    
       }
        
       var subMenu = children[i].getElementsByTagName('ul')[0];

       children[i].onmouseover = function() {
           console.log('d');
           subMenu.style.display = 'block';
       }

       children[i].onmouseout = function() {
           subMenu.style.display = 'none';
       }

    }

}

See it on jsFiddle.

Alternatively, if you set up your HTML correctly, you can do it with just CSS.

#menu li ul {
   display: none;
}

#menu li:hover ul {
   display: block;
}

It may be different now but when I designed my wordpress all the navigation was in the header.php file.