www.webdeveloper.com
Results 1 to 4 of 4

Thread: [RESOLVED] Hover enabled horizontal submenus?

  1. #1
    Join Date
    Aug 2010
    Posts
    81

    resolved [RESOLVED] Hover enabled horizontal submenus?

    Hi,
    I'm wanting to make a submenu appear on the page when a menu item is mouse-overed. I can find examples online where UL and LI are used, but that won't work in my layout:
    http://www.girlscoutsmoheartland.org/newpagetest.php

    Here, the menu items like "home" and "for girls" need to generate a horizontal submenu below where "menu item A" and "menu item B" are, and each submenu would appear in the same location as the other submenus, disappearing and appearing as a different menu item above is hovered over.

    All I can find are like this:
    http://htmldog.com/articles/suckerfish/dropdowns/
    and I can't figure a way to conform that to this layout.

    Can someone point me to a site that has a solution for this situation?
    Thanks!
    Liam

  2. #2
    Join Date
    Sep 2008
    Location
    Akron, OH
    Posts
    1,129
    Here's a simple script using your markup:

    Code:
    <?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    	<head>
    		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
    		<title>Title</title>
    		<meta name="language" content="en" />  
    		<meta name="description" content="" />  
    		<meta name="keywords" content="" />
    		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    		<script type="text/javascript">
    			//<![CDATA[  
    				$(document).ready(function(){
    					$('#submenubar').hide();
    					$('#menubar a').hover(function(){
    						hovered = $(this).html();
    						if(hovered == 'home'){
    							$('#submenubar').show();
    						};
    					}, function(){
    						$('#submenubar').hide();
    					});
    				});
    			//]]> 
    		</script>
    	</head>
    	<body>
    		<div id="menubar">
    			<a href="#">home</a>
    			<a href="#">for girls</a>
    			<a href="#">for volunteers</a>
    			<a href="#">shop</a>
    			<a href="#">donate</a>
    		</div>
    		<div id="submenubar">
    			<a href="#">menu item A</a>
    			<a href="#">menu item B</a>
    		</div>
    	</body>
    </html>

  3. #3
    Join Date
    Aug 2010
    Posts
    81
    Quote Originally Posted by cbVision View Post
    Here's a simple script using your markup:
    ...snip...
    Holymoly! That's perfect!!
    I reverse-engineered it a bit and tweaked it so that the last mouse-overed submenu remains visible when mouse-off, and the submenus don't all show during page load, stuff like that.
    But in essence, this is EXACTLY what I was looking for! Thank you so much.

  4. #4
    Join Date
    Sep 2008
    Location
    Akron, OH
    Posts
    1,129
    You're welcome...glad it's working out for you!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles