Web Design Forums

30equals · 25-06-2008, 04:59

another request for help *sigh*

i've got three navigation items, and when i rollover one item, a div with a submenu slides down beneath that nav item. this all works perfectly.

what i can't fix:

when i rollout on one item, and do a rollover on another, the other submenu should disappear and the other appear

but when i hover/navigate in a submenu div the div of course should stay visible.
but it disappears because i have that rollout function attached to the nav item
initially i don't want to add a close button on each submenu div, or let it dissappear when you click on a link in the submenu.

code:

Code:

 $("#oplossingen  a").mouseover(function() {
	  		
	  		$('#subMenuOplossingen').slideDown('slow');
			$('#subMenuOplossingen').css("visibility","visible");
	   });
	   
	   	   
	   $("#oplossingen  a").mouseout(function() {
	  		$('#subMenuOplossingen').slideUp('fast');
			
	   });

i tried adding

Code:

$("#oplossingen > *").mouseover(function() {
	  		
	  	$('#subMenuOplossingen').slideDown('slow');
		$('#subMenuOplossingen').css("visibility","visible");
	   });

but then of course it still slides up before going back down

i hope this is somewhat clear..

and i know it's a stupid thing, but i'm kinda new to jquery, and i'm a bit stuck

thanx!

pgo · 25-06-2008, 10:27

Just threw this together. It works. Explanation in the JavaScript comments.

One thing I will say, storing your elements in arrays is handy and can really speed up your scripts. This is because if you repeat a selector - for instance $("ul#nav > li") - jQuery has to decode that and traverse the DOM to find it each time. Also, be as specific as possible for your purposes when building selectors - the more specific your selector, the faster jQuery can traverse the DOM.

After storing the <li>s, you can find any children of a stored element easily by adding that as a context for your DOM search - $("a", navItems) - will find all <a> elements within the context of your stored "navItems" array (which, as you'll recall stores $("ul#nav > li").

So, $("a",navItems) means the same thing as $("ul#nav > li a"), but it's faster because jQuery doesn't have to traverse the entire DOM to find those elements each time.

HTML Code:

<!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>
	<title>jQuery</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.5.2/build/reset/reset-min.css">
	<style type="text/css">
		#nav {
			float:left;
			width:100%;
		}
		#nav li {
			float:left;
			width:150px;
			border:1px solid red;
			margin-right:5px;
		}
		#nav li a {
			display:block;
			padding:5px;
			background:#666;
			color:#fff;
		}
		#nav li a:hover, #nav li a:active {
			background:red;
		}
		#nav li div {
			padding:5px;
			background:#ccc;
			color:#666;
		}
	</style>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			// Store the nav items in an array to make script
			// execution faster/more efficient.
			var navItems = $("ul#nav > li");
			// Hide the <div> boxes.
			$("div",navItems).hide();
			$(navItems).hover(
				// Onmouseover (on the <li>s), slideDown the associated <div>.
				function(){
					$(this).children("div").slideDown("fast");
				},
				// Onmouseout, slideUp the associated <div>.  Using the hover
				// on the <li> instead of the <a> keeps the <div> visible if
				// you mouse off the <a> because the <div> is a child of the
				// <li> and therefore the <li> grows to contain the <div>.
				function(){
					$(this).children("div").slideUp("fast");					
				}
			);
		});
	</script>
</head>
<body>
	<ul id="nav">
		<li>
			<a href="#">Link 1</a>
			<div>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
		</li>
		<li>
			<a href="#">Link 2</a>
			<div>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
		</li>
		<li>
			<a href="#">Link 3</a>
			<div>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
		</li>
		<li>
			<a href="#">Link 4</a>
			<div>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
		</li>
	</ul>
</body>
</html>

30equals · 26-06-2008, 11:52

pgo

works perfectly !!!

of course i had to make some adaptions, but i got it working with my code.

thanx a lot

25-06-2008, 04:59	#1 (permalink)
30equals Senior Member Join Date: Jan 2006 Posts: 146	jquery rollover/rollout conflict another request for help sigh i've got three navigation items, and when i rollover one item, a div with a submenu slides down beneath that nav item. this all works perfectly. what i can't fix: when i rollout on one item, and do a rollover on another, the other submenu should disappear and the other appear but when i hover/navigate in a submenu div the div of course should stay visible. but it disappears because i have that rollout function attached to the nav item initially i don't want to add a close button on each submenu div, or let it dissappear when you click on a link in the submenu. code: Code: $("#oplossingen a").mouseover(function() { $('#subMenuOplossingen').slideDown('slow'); $('#subMenuOplossingen').css("visibility","visible"); }); $("#oplossingen a").mouseout(function() { $('#subMenuOplossingen').slideUp('fast'); }); i tried adding Code: $("#oplossingen > *").mouseover(function() { $('#subMenuOplossingen').slideDown('slow'); $('#subMenuOplossingen').css("visibility","visible"); }); but then of course it still slides up before going back down i hope this is somewhat clear.. and i know it's a stupid thing, but i'm kinda new to jquery, and i'm a bit stuck thanx!

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search

26-06-2008, 11:52	#3 (permalink)
30equals Senior Member Join Date: Jan 2006 Posts: 146	pgo works perfectly !!! of course i had to make some adaptions, but i got it working with my code. thanx a lot

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)