Hi, i am a total newbie to jquery.
I have an accordion menu for a project that keeps bouncing as you rollover the submenu links.
If i only have the top level and 1 or 2 of the sub menu it works, but if there is too much or if i add a 3rd level it goes crazy.
Here is my code:
Code:
function mainMenu ()
{
jQuery("nav ul li").hover(function ()
{
jQuery(this).find("ul").fadeIn(0).slideUp(0).slideDown(200);
}, function ()
{
jQuery(this).find("ul").slideUp(200);
});
jQuery("nav ul li").each(function ()
{
if (jQuery(this).find("ul").size() > 0) jQuery(this).find("a").filter(":first").append(" +");
});
}
HTML (this is a wordpress theme, so the html just pulls from the default wordpress custom nav)
Code:
<nav>
<?php wp_nav_menu(array("location" => "primary")) ?>
<div id="mobile_menu_skin">
<?php _e("Navigate To", "cluster") ?>…
<span>+</span>
<div class="clear"></div>
</div>
<div class="clear"></div>
</nav>
This is a video that someone use using the same wordpress theme took showing the problem.
http://youtu.be/lgbxWbmzbaw
So I am thinking that if the code is changed to a click action instead of a hover action this would work better??
Any help?