Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    Regular Coder
    Join Date
    May 2008
    Posts
    446
    Thanks
    23
    Thanked 5 Times in 5 Posts

    Jquery slideDown navigation menu

    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:

    Code:
    <style type="text/css">
    span.position
    {	vertical-align: top;
    	align: left;
    	position: relative;
    }
    </style>
    
    
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script language="javascript" type="text/javascript">
    
    //jquery slideDown function
    
    $(function showMe() {
    
    	$("span").mouseOver(function() {
    		$(this).slideDown(500);
    			
    	});
    	
    	$("span").mouseOut(function() {
    		$(this).slideUp(500);
    			
    	});
    	
    });
    </script>
    Here is the html markup I am using:

    Code:
    <!--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>
    
    </td>
    </tr>
    <tr>
    <td height="42">
    <!--sub menu-->
    <span id="ex_1" style="display:none;" class="position">
    <!--some links-->
    </span>
    
    <span id="ex_2" style="display:none;" class="position">
    <!--some more links-->
    </span>
    
    <!--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

  • #2
    Regular Coder
    Join Date
    May 2008
    Posts
    446
    Thanks
    23
    Thanked 5 Times in 5 Posts
    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?

    Thanks


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •