[RESOLVED] Hover enabled horizontal submenus?

**mechphisto** · 08-27-2010 11:25 AM

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

**cbVision** · 08-27-2010 04:06 PM

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>

**mechphisto** · 08-30-2010 12:33 PM

Originally Posted by cbVision

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.

**cbVision** · 08-30-2010 03:27 PM

You're welcome...glad it's working out for you!

Thread: [RESOLVED] Hover enabled horizontal submenus?

Thread Tools

Display

[RESOLVED] Hover enabled horizontal submenus?

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions