View Full Version : Jquery slideDown navigation menu

01-23-2009, 07:08 PM
I am looking to use JQuery which I am really new to and get my navigation submenus to slideDown when the parent is rolled Over. I have multiple parents and children or sub menus and want them to activate individually but without repeating the JQuery over and over again for each.

Obviously the goal is to also slideUp on the mouseOut event.

Here is the code that I have so far:

<style type="text/css">
{ vertical-align: top;
align: left;
position: relative;

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script language="javascript" type="text/javascript">

//jquery slideDown function

$(function showMe() {

$("span").mouseOver(function() {


$("span").mouseOut(function() {



Here is the html markup I am using:

<!--main menu-->
<a href="index.php"><img src="image/home.png" onmouseover="rollOn(this)" onmouseout="rollOff(this)" id="home" vspace="1" hspace="0"></a>
<a href="reforeclosure.php"><img src="image/foreclosures.png" onmouseover="rollOn(this)" onmouseout="rollOff(this)" vspace="1" hspace="0"></a>
<a href="recompare.php"><img src="image/listings.png" onmouseover="rollOn(this); showMe(1)" onmouseout="rollOff(this); " id="hotspot" name="hotspot" vspace="1" hspace="0"></a>
<!--<a href="#"><img src="image/education.png" onmouseover="rollOn(this); showMe(2)" onmouseout="rollOff(this); " id="hotspot" name="hotspot" vspace="1" hspace="0"></a>-->
<!--<a href="#"><img src="image/products.png" onmouseover="rollOn(this); showMe(3)" onmouseout="rollOff(this); " id="hotspot" name="hotspot" vspace="1" hspace="0"></a>-->
<a href="#"><img src="image/resources1.png" onmouseover="rollOn(this); showMe(4)" onmouseout="rollOff(this); " id="hotspot" name="hotspot" vspace="1" hspace="0"></a>
<a href="resupport.php"><img src="image/support.png" onmouseover="rollOn(this); showMe(5)" onmouseout="rollOff(this)" vspace="0" hspace="0"></a>

<td height="42">
<!--sub menu-->
<span id="ex_1" style="display:none;" class="position">
<!--some links-->

<span id="ex_2" style="display:none;" class="position">
<!--some more links-->

<!--end sub menus-->

The rollOn() function is used to change the button images as a standard rollOver.
This code has worked great in the past minus the additions of the JQuery.
Firefox has stated that I need to define the showME()
and that
$("span").mouseOver is not a function. I am just going by what the tutorials have shown me, so I'm not sure what to do with this.

Thanks a lot for all your help

01-26-2009, 05:40 PM
tried editing the original post, but seem to have lost the option.

Could it be that my script source for the jquery is incorrect? Is it better that I upload the file onto my web hoster and call it onto the page from there?