Javascript Menu on hover event

Question

I am trying to make a drop down menu work to where when you hover over the menu, it drops down and then on exiting the menu it scrolls back up.

the site I am working on is www.adventuresdev.info/give and the menu is the options titled people, places, projects.

Right now they are set to .click

Here is the .js info

$(document).ready(function () 
{
    $('img.menu_class').click(function () 
        {
            $('ul.the_menu').slideToggle('medium');
        });
    $('img.menu_class2').click(function () 
        {
            $('ul.the_menu2').slideToggle('medium');
        });
        $('img.menu_class3').click(function () 
        {
            $('ul.the_menu3').slideToggle('medium');
        });
        $('img.menu_class4').click(function () 
        {
            $('ul.the_menu4').slideToggle('medium');
        }); 
});

Answer 1

Use jQuery's hover() function.

Syntax: .hover( handlerIn(eventObject), handlerOut(eventObject) )

handlerIn(eventObject)A function to execute when the mouse pointer enters the element.
handlerOut(eventObject)A function to execute when the mouse pointer leaves the element.

Change your code for this:

$(document).ready(function () 
{
    $('img.menu_class').hover(function(){$('ul.the_menu').slideToggle('medium');},function(){$('ul.the_menu').slideToggle('medium');});
    $('img.menu_class2').hover(function(){$('ul.the_menu2').slideToggle('medium');},function(){$('ul.the_menu2').slideToggle('medium');});
    $('img.menu_class3').hover(function(){$('ul.the_menu3').slideToggle('medium');},function(){$('ul.the_menu3').slideToggle('medium');});
    $('img.menu_class4').hover(function(){$('ul.the_menu4').slideToggle('medium');},function(){$('ul.the_menu4').slideToggle('medium');});
});

Regards

Answer 2

Use the jquery hover() event. See this link for example and how to use it. http://api.jquery.com/hover/