where do I find the file in wordpress that I can edit the menu?

2 Views

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:

Read More
 <?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/

Post Views: 2

Related posts

Leave a Reply

4 comments

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

  3. 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 😛

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