Grow your CSS skills. Land your dream job.

jQuery Multi Level Navigation

  • # March 25, 2010 at 5:16 pm

    Hi guys,

    great forum!

    i’m trying to get a multi level navigation to work in wordpress with jQuery.

    It has this structure:

    Parent
    -Child
    –Grandchild
    –Grandchild
    -Child
    Parent
    -Child

    and so on.

    Now, the navigation shoud only show the parents and the child elements when loading the page. only onclick the grandchildren of the specific child should be visible.

    so far that works, but my problem now is, that the anchor links in the grandchildren li tags do not work anymore?
    any ideas?

    Code:
    $(document).ready(function() {

    $(“#main_navi li ul li”).addClass(‘prior’);
    $(“#main_navi li ul li ul”).hide();

    $(‘li.prior’).click(function(){
    $(this).children().slideDown()
    return false;
    });

    });

    thanks in advance

    # March 27, 2010 at 1:26 pm

    Hard to tell without a live demo, but it might be the return false… That selector is targeting list items, not anchor links. Clicking a list item doesn’t have any default action you would need to prevent, so it’s probably not needed.

    # March 30, 2010 at 5:28 am

    hey chris!
    thanks for your help. i had no chance to test it without the return false yet.
    cuz it’s a business page i can’t get u a live demo but perhaps the code of my sidebar.php could make it all a lil bit clearer.

    Code:
Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".