Grow your CSS skills. Land your dream job.

Help with jquery sliding menu

  • # September 11, 2009 at 5:30 pm

    here is the site, it’s the top nav. http://gilleardmarketing.com/index.php

    On the top nav when you hover over Internet Marketing that’s the effect I want but I can’t figure out how to make it stay down depending on where my mouse is. I want it to be able to click on the links.

    Here is the code:

    Here’s the js and jquery:

    Code:
    if(eTarg.className == “internetmarketingSpan”) {
    $(‘ul.menu_body’).slideDown(‘normal’);
    }else if(eTarg.className == “menu_body”) {
    return false;
    }else {
    $(‘ul.menu_body’).slideUp(‘normal’);
    }
    }

    I was trying to target window objects and it was working but it wouldn’t work in this situation for some reason.

    Thanks for any help!

    # September 12, 2009 at 5:20 pm

    you need to have the dropdown submenu be a child element of the internetmarketing li element

    ie

    Code:
    • Submenu 1
    • Submenu 2
    • Submenu 3

Then, the jquery

Code:
$(“ul#menu li”).hover(function(){
//$(this).children(“ul”).css({“display”: “block”});
$(this).children(“ul”).slideDown(400);
}, function(){
//$(this).children(“ul”).css({“display”: “none”});
$(this).children(“ul”).slideUp(200);
});

});

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.

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