Question

I am a newbie to javascript and I am trying to make an onclick dropdown menu.
I want it to look like this:
http://www.instantshift.com/demo/dropdown_menu/
But this is mouseenter/mouseleave (in other words, hover) whereas I would like it to be onclick. How do I change this code to make it onclick?
Also can you please provide me the jquery for the onclick?

My current code for the hover (mouseenter/mouseleave menu) is the following:

$(function(){
$('.dropdown').mouseenter(function(){
    $('.sublinks').stop(false, true).hide();

    var submenu = $(this).parent().next();

    submenu.css({
        position:'absolute',
        top: $(this).offset().top + $(this).height() + 'px',
        left: $(this).offset().left + 'px',
        zIndex:1000
    });

    submenu.stop().slideDown(300);

    submenu.mouseleave(function(){
        $(this).slideUp(300);
    });
});
});
</script>

Once again, I would like to change this to onclick.

Thanks.

Answer 1

I think that you can just trigger the menu with a click, and then any other click will close it.

So, simple modification:

$(function() {
    $('.dropdown').click(function() {
        $('.sublinks').stop(false, true).hide();

        var submenu = $(this).parent().next();

        submenu.css({
            position: 'absolute',
            top: $(this).offset().top + $(this).height() + 'px',
            left: $(this).offset().left + 'px',
            zIndex: 1000
        });

        submenu.stop().slideDown(300);

       //click anywhere outside the menu
       $(document).click(function() {
            var $el = $(this);
            $el.not('.dropdown') && $el.slideUp(300);
        });
    });
});