CODEWITHSUNDEEP
jquerywordpressdrop-down-menu
dcd0181
dcd0181

Reputation: 1503

Animating wp_nav_menu with jQuery

I've been literally pulling my hair out trying to figure out how to get my dropdown menu to animate with jQuery. I'm using wp_nav_menu with a simple script and I'm not sure why it won't work.

Here's the nav source:

<nav id="topNav">
  <div id="navwrap" class="menu-main-container">
    <ul id="menu-main" class="dropdown">
      <li id="menu-item-30" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-30"><a href="http://www.mysite.com/page1-2/">Page1</a>
        <ul class="sub-menu">
          <li id="menu-item-34" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-34"><a href="http://www.mysite.com/sub-page1-1/">Sub-Page1-1</a></li>
          <li id="menu-item-35" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-35"><a href="http://www.mysite.com/sub-page1-2/">Sub-Page1-2</a></li>
        </ul>
      </li>
      <li id="menu-item-31" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-31"><a href="http://www.mysite.com/page2-2/">Page2</a>
        <ul class="sub-menu">
          <li id="menu-item-36" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-36"><a href="http://www.mysite.com/sub-page2-1/">Sub-Page2-1</a></li>
          <li id="menu-item-37" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-37"><a href="http://www.mysite.com/sub-page2-2/">Sub-Page2-2</a></li>
        </ul>
      </li>
      <li id="menu-item-32" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-32"><a href="http://www.mysite.com/page3-2/">Page3</a>
        <ul class="sub-menu">
          <li id="menu-item-38" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-38"><a href="http://www.mysite.com/sub-page3-1/">Sub-Page3-1</a></li>
          <li id="menu-item-41" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-41"><a href="http://www.mysite.com/sup-page3-2/">Sup-Page3-2</a></li>
        </ul>
      </li>
      <li id="menu-item-33" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-33"><a href="http://www.mysite.com/page4-2/">Page4</a>
        <ul class="sub-menu">
          <li id="menu-item-39" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-39"><a href="http://www.mysite.com/sub-page4-1/">Sub-Page4-1</a></li>
          <li id="menu-item-40" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-40"><a href="http://www.mysite.com/sub-page4-2/">Sub-Page4-2</a></li>
        </ul>
      </li>
    </ul>
  </div>
</nav>

And here is the script I wrote to animate the hidden ULs up and down:

<script type="text/javascript">
jQuery(function() {
    jQuery("#navwrap ul.dropdown li").hover(function() {
        jQuery(this).find('ul.sub-menu')
            .stop(true, true).delay(50).animate({ "height": "show", "opacity": "show" }, 200 );
    }, function(){
        jQuery(this).find('ul.sub-menu')
            .stop(true, true).delay(50).animate({ "height": "hide", "opacity": "hide" }, 200 );
    });

});
</script>

Any suggestions as to why this will not work? I've been at this for hours.

Upvotes: 0

Views: 1232

Answers (2)

Sizzles27
Sizzles27

Reputation: 94

I had to hide and show the sub-menu on page load to get my dropdown to work.

$(".sub-menu").hide(); // hide the submenu on page load
$(".current_page_item .sub-menu").show();

Upvotes: 1

Libin
Libin

Reputation: 2462

I had made a jsfiddle example with your code and it is working fine. *Note: I didn't add any CSS.

So check the following problems in your code:

  1. Did the jQuery linked correctly.
  2. Check in firebug or chrome inspect element for any errors.
  3. Check your CSS for any rules that overwriting the Script.

Still you have the problem please provide the site link.

Cheers !!!

Upvotes: 0

Related Questions