0

I have a top-level navigation that is being made using a Wordpress built-in function. I then have another function that is taking one of the top level navigation's page id to create a list of it's children pages. I want this div to slide down on hover of the corresponding top menu item.

<header>
...
   <nav class="clear screen">
      <?php wp_nav_menu( array( 'theme_location' => 'primary', 'depth' => 1,) ); ?>
   </nav>
</header>

<div id="dropdown-contain">
        <ul class="solutions-dropdown">
            <li><a href="/solutions/">By Industry</a></li>
            <li><a href="/solutions/by-module/">By Module</a></li>
        </ul>
        <?php 
            // use wp_list_pages to display parent and all child pages all generations (a tree with parent)
            $parent = 85;
            $args=array(
              'child_of' => $parent
            );
            $pages = get_pages($args);
            if ($pages) {
            $pageids = array();
            foreach ($pages as $page) {
                 $pageids[]= $page->ID;
            }

            $args=array(
              //'title_li' => 'Tree of Parent Page ' . $parent,
              'include' => implode(",", $pageids)
            );
            wp_list_pages($args);
            }
        ?>
</div>

#dropdown-contain is being hidden in my style sheet. Since the wp_nav_menu is creating my top-level list, I cannot make my sub-list a nested list, which is why I just made it as a separate div.

Here is the jquery I have at the moment:

$(document).ready(function() {

    $("li.page-item-6").mouseenter(function(){
        $('#dropdown-contain').slideDown().clearQueue();
        $("#dropdown-contain").mouseover(function(){
            $('#dropdown-contain').stop().css('display', 'block');
        });
    });

    $("#dropdown-contain").mouseout(function(){
        $('#dropdown-contain').clearQueue().slideUp();
    });

});

The problem here is that the sub-nav will stay open if you don't hover onto it before exiting. If I just hover over the top level element and don't hover over the sub menu, the sub menu will stay open until I hover on and off of it. So, I tried to include this:

$("li.page-item-6").mouseout(function(){
        $('#dropdown-contain').clearQueue().slideUp();
});

When I include this, the sub menu behaves a little strangely. If I hover over the top list item and off too quickly before the menu has finished sliding down, on the next hover it will only slide to that same point. So after a few hasty hovers, the menu stops sliding completely until I refresh the page.

So in summary, I want to hover over one list item, triggering the slide down of a completely separate div. On mouse out of either the list item or the div, the menu will slide back up without any awkward jumping. If anyone could help me out or find me a link that may be helpful I'd really appreciate it!

user1380540
  • 734
  • 3
  • 12
  • 26
  • tip for future questions: don't copy paste your code—nobody is interested in how your links are created. Instead provide only the code necessary to answer your question (PHP, for example, is a server-side language and thus does not have to do anything with your question) – Peter Oct 29 '12 at 14:55
  • The reason why I included that code is because in search for my answer, many people suggested you use a nested list to create the sub menu. I was trying to demonstrate why that was not an option in this particular case. – user1380540 Oct 29 '12 at 18:38

1 Answers1

0

Try this code:

$(document).ready(function() {
    $("li.page-item-6").mouseenter(function(){
        $('#dropdown-contain').stop(true).slideDown();
    });

    $("#dropdown-contain, li.page-item-6").mouseleave(function(){
        $('#dropdown-contain').stop(true).slideUp();
    });
});

.stop() - Stop the currently-running animation on the matched elements. http://api.jquery.com/stop/

Matheus Azevedo
  • 878
  • 7
  • 18
  • Thanks for the suggestion - it still stays open when you hover off the list item. – user1380540 Oct 29 '12 at 18:37
  • I've edited my answer with another suggestion. Please, check if it works. If not, create a [Fiddle](http://jsfiddle.net/) of your generated markup so we can check this up. – Matheus Azevedo Oct 29 '12 at 19:50
  • The dropdown-contain now slides up when you mouse onto it. I've had no luck trying to get this fiddle working. If you expand the results window and actually click on solutions, you'll see what the current code I have is doing on the live site. But again, as it stands in the fiddle, the script is not working as expected. – user1380540 Nov 01 '12 at 18:06
  • You didn't posted the link for us to see. That would help greatly. – Matheus Azevedo Nov 01 '12 at 18:50
  • And [this](http://stackoverflow.com/questions/1273566/how-do-i-check-if-the-mouse-is-over-an-element-in-jquery) will solve your problem. – Matheus Azevedo Nov 01 '12 at 18:57