CODEWITHSUNDEEP
jquerynavigation
Jeff Prachyl
Jeff Prachyl

Reputation: 277

jQuery nav - need show grandchildren links on child hover - jsfiddle

My nav is 90% working, but I'm having trouble getting my grandchildren (tertiary nav) to display once the child (sub-nav) link has been hovered.

Here is a jsfiddle of what I have so far: http://jsfiddle.net/CSwgQ/1/

Just FYI: Each child link under 'About' currently has a grandchild link for testing.

<script type='text/javascript'>
            jQuery(document).ready(function($){
                var lastopen = null;
                var timeout = null;

                jQuery("#access ul li ul").show();
                jQuery("#access ul li ul li").hide();

                function showmenu(element)
                {
                    element.css("background","url('/var/www/wp-content/themes/GreatWall/images/arrow.png') no-repeat bottom");
                //  var children = element.find("ul li");
                    var children = element.children('ul').children('li')
                    children.show();
                }

                function hidemenu(element, fade)
                {
                    element.css("background","transparent");
                    var children = element.find("ul li");

                    fade = typeof(fade) != 'undefined' ? fade : false;
                    if(fade)
                    {
                        children.fadeOut(300);
                    }
                    else
                    {
                        children.hide();
                    }
                }

                jQuery("#access ul li").each(function(i,v){
                jQuery(v).mouseover(function(e){if(timeout != null){clearTimeout(timeout); timeout = null;} if(lastopen != null){hidemenu(lastopen);} lastopen = jQuery(this); showmenu(lastopen);});
                jQuery(v).mouseout(function(e){if(timeout != null){clearTimeout(timeout); timeout = null;} timeout=setTimeout(function(){hidemenu(lastopen, true); lastopen = null;},1500);});
                });

                //jQuery("#access ul li ul").css("display", "block");
                //jQuery("#access ul li").each(function(i,v){var width = 0; jQuery(v).find("ul li").each(function(ii,vv){width += jQuery(vv).width();}); var mid = jQuery(v).position().left+jQuery(v).width()/2-width/2; jQuery(v).find("ul li:first").css("margin-left", Math.min(Math.max(0, mid), 940-width));});
                //jQuery("#access ul li").each(function(i,v){var width = 0; jQuery(v).find("ul li").each(function(ii,vv){width += jQuery(vv).width();}); var mid = jQuery(v).position().left; jQuery(v).find("ul li:first").css("margin-left", Math.min(Math.max(0, mid), 940-width));});
                //jQuery("#access ul li ul").css("display", "none");
            });

            </script>

Any help would be greatly appreciated! Thanks in advance

Upvotes: 0

Views: 540

Answers (1)

Jai
Jai

Reputation: 74738

Try this script: http://jsfiddle.net/CSwgQ/3/

Is this what you looking for:

jQuery(document).ready(function ($) {
    $('.menu li').each(function(){
        $(this).hover(function(){
        $('> ul',this).show();
        },function(){
        $('> ul',this).delay(1000).fadeOut();
        });
    });
});

Upvotes: 1

Related Questions