0

Hello,

i want to use jquery to make a fade in/ fade out menu / sub menu structure.
the structure works, the only this is that when i hover from the topic to the corrisponding submenu the submenu fades out and back in.
how can i stop that? the function .stop() doesn't work, it will give me other problems, like if you hover from menu to sub menu over and over the opacity of the sub menu will get to 0 and then i need to reload the page.

here is my code:

jquery:

$(document).ready(function(){
		var config = {
			sensitivity: 8, // number = sensitivity threshold (must be 1 or higher)    
     		interval: 300, // number = milliseconds for onMouseOver polling interval    
     		over: makeTall, // function = onMouseOver callback (REQUIRED)    
     		timeout: 700, // number = milliseconds delay before onMouseOut    
     		out: makeShort // function = onMouseOut callback (REQUIRED)	
		};
		$("#center").load('body.php');
		$("#nav_webservices, #nav_menu_services").hoverIntent (setVisibleWebServices, setHiddenServices);
		$("#nav_productfoto, #nav_menu_productfoto").hoverIntent (setVisibleProductfoto, setHiddenProductfoto);
		$("#nav_overons, #nav_menu_overons").hoverIntent (setVisibleOverOns, setHiddenOverOns);
});
function makeTall(){};
function makeShort(){};
function setVisibleWebServices() {
	/*$('ul#nav_menu_services').css ('visibility','visible');*/
	$("ul#nav_menu_services").fadeIn ("slow");
}
function setHiddenWebServices() {
	/*$('ul#nav_menu_webservices').css ('visibility','hidden');*/
	$("ul#nav_menu_webservices").fadeOut ("slow");
}
function setVisibleProductfoto() {
	$('ul#nav_menu_productfoto').fadeIn ("slow");	
}
function setHiddenProductfoto() {
	$('ul#nav_menu_productfoto').fadeOut ("slow");
}	   
function setVisibleOverOns() {
	$('ul#nav_menu_overons').fadeIn ("slow");	
}
function setHiddenOverOns() {
	$('ul#nav_menu_overons').fadeOut ("slow");
}

the html and css:

html {
	font: small1/1.4 "Tahoma", "Geneva", "sans-serif";
}
body {
	height: 100%;
	font-size: 80%;
}

#header {
	/*positioning: absolute;*/
	width: 970px;
	height: 150px;
	background: #D9E4E6 url(../images/E-motion-web.png) no-repeat;
	margin-top: 10px;
	margin-left: 10px;
	margin-right: 10px;
}

#topmenu {
	position: absolute;
	width: 680px;
	height: 20px;
	background: #C60F0F;
	margin-left: 290px;
	margin-top: 68px;
	color: #D9E4E6; /* text color */
}

#container {
	width: 990px;
	height: 100%;
}

#left {
	float:left;
	width: 277px;
	height: 100%;
	background: #D9E4E6;
	margin-top: 20px;
	margin-left: 10px;
	text-align: justify;
}

#center {
	float: right;
	width: 663px;
	height: 100%;
	background: #D9E4E6;
	margin-top: 20px;
	margin-left: 20px;
	margin-right: 10px;
	margin-bottom: 20px;
	padding-left: 10px;
}

#topmenu ul, #topmenu il {
	margin: 0;
	padding: 0;
}

#topmenu ul {
	list-style-type: none;	
}

#topmenu li {
	display: block; /* om clickveld te vergroten */	
	background: #C60F0F; /* achtergrond kleur menu */
	width: 140px;
	height: 20px;
	margin: 0 5px 0 0;
	padding: 0;
}

#topmenu a {
	display: block;
	color: #D9E4E6; /* text color */
	margin: 0;
	padding: 0 3px;
	text-decoration: none;	
}

#topmenu a:link, #topmenu a:visited {
	font-family: Tahoma, Geneva, sans-serif;
	color: #D9E4E6;
	text-decoration: none;	
}

#topmenu a:hover {
	background: #900F0F;
	opacity: 1;
}

ul.horizontaal_menu li {
		float: left;
}

ul.menu_vert {
	position: absolute;
	top: 20px;
	display: none;
	opacity: 1;
}

ul#nav_menu_top 		{ left: 0px  }
ul#nav_menu_webservices { left: 145px }
ul#nav_menu_productfoto { left: 290px }
ul#nav_menu_overons 	{ left: 435px }

#nav_menu_top li.current a {
	background: #FF0F0F;
	font-weight: bold;
}

#footer {
	clear:both;
	background: #D9E4E6;
	text-align:center;
	margin-left: 10px;
	margin-right: 10px;
}
-->
</style>
<script src="../javascripts/jquery-1.4.js" type="text/javascript"></script>
<script src="../javascripts/jquery.hoverIntent.minified.js" type="text/javascript"></script>
<script src="../javascripts/icte-motion.js" type="text/javascript"></script>

</head>

<body id="">
<div id="container">
	<div id="header"><div id="topmenu">
    <ul id="nav_menu_top" class="horizontaal_menu">
      <li id="nav_home"><a href="#">Home</a></li>
      <li id="nav_services" ><a href="#">services</a></li>
      <li id="nav_productfoto" ><a href="#">Productfotografie</a></li>
      <li id="nav_overons" ><a href="#">Over ons</a></li>
    </ul>
    <ul id="nav_menu_services" class="menu_vert" >
      <li id="nav_webdevelopment"><a href="#">webdevelopment</a></li>
      <li id="nav_applicatie"><a href="#">Applicatie design</a></li>
      <li id="nav_onderhoud"><a href="#">Onderhoud</a></li>
      <li id="nav_watishet"><a href="#">Wat is het</a></li>
    </ul>
    <ul id="nav_menu_productfoto" class="menu_vert" >
      <li id="nav_productfoto"><a href="#">Productfoto</a></li>
      <li id="nav_zelfdoen"><a href="#">Wat kan ik zelf doen</a></li>
    </ul>
    <ul id="nav_menu_overons" class="menu_vert" >
      <li id="nav_referenties"><a href="#">Referenties</a></li>
      <li id="nav_wiezijnwij"><a href="#">Wie zijn wij</a></li>
      <li id="nav_contact"><a href="#">Contact</a></li>
   </ul>
    </div></div>
	<div id="center" class="column">

	</div>
    <div id="left" class="column">
   test
    </div>
  <div id="footer"> Powered by  © 2009 - </div>
</div>
</body>
</html>
2
Contributors
1
Reply
2
Views
7 Years
Discussion Span
Last Post by alex.tepes
0

I am in hurry with some things but I had the same problem and here's my solution:

JS:
!!! I use jQuery in place of $

jQuery(document).ready(function () 
{
			var subid;
			jQuery(".hds_subm").mouseover(function () {
				subid=jQuery(this).attr('id');
				if(jQuery("#SS_"+subid).hasClass("hds_preg_out"))
					{
						jQuery("#SS_"+subid).removeClass("hds_preg_out");
						jQuery("#SS_"+subid).fadeIn(0);
					}
				else
					{
						jQuery("#SS_"+subid).fadeIn(1000);
					}
			});
			jQuery(".hds_subm").mouseout(function () {
				subid=jQuery(this).attr('id');
				jQuery("#SS_"+subid).addClass("hds_preg_out");
				
				var delay;
				delay=function() { hideSubMenu(subid); }
				setTimeout(delay,100);
			});
});





function hideSubMenu(subid)
{
	if(jQuery("#SS_"+subid).hasClass("hds_preg_out"))
		{
			jQuery("#SS_"+subid).fadeOut(500, function() { jQuery("#SS_"+subid).removeClass("hds_preg_out"); } );
		}
}

hds_preg_out is a class used on each submenu item to check if I prepare it to fade out.

HTML:

<div class="clearfix">
                    	<div class="hds_link_meniu">
                        	<a href="#">ABOUT</a>
                        </div>
                    	<div class="hds_link_meniu"><a href="#">INQUIRE</a></div>
                    	<div class="hds_link_meniu"><a href="#">CRITIQUES</a></div>
                    	<div class="hds_link_meniu"><a href="#">PRIVATE</a></div>
                    	<div class="hds_link_meniu hds_subm" id="sub_1">
                        	PHOTOGRAPHY
                            <div class="hds_submenu_block" id="SS_sub_1">
                            	<a href="#">Wedding gallery 1</a>
                            	<a href="#">Wedding gallery 2</a>
                            	<a href="#">Misc gallery</a>
                            	<a href="#">Other...</a>
                            </div>
                        </div>
                    </div>

CSS:

.hds_link_meniu
{
	height:16px;
	line-height:16px;
	margin:0px;
	padding:0px 12px 0px 12px;
	color:#666666;
	font-family:Tahoma, Geneva, sans-serif;
	font-weight:bold;
	text-decoration:none;
	float:right;
	font-size:12px;
}

.hds_subm
{
	position:relative;
	cursor:pointer;
}

.hds_link_meniu a:link, hds_link_meniu a:visited, hds_link_meniu a:active
{
	color:#666666;
	font-family:Tahoma, Geneva, sans-serif;
	font-size:12px;
	font-weight:bold;
	text-decoration:none;
}
.hds_link_meniu a:hover
{
	color:#000;
	font-family:Tahoma, Geneva, sans-serif;
	font-size:12px;
	font-weight:bold;
	text-decoration:none;
}


.hds_submenu_block
{
	position:absolute;
	left:0px;
	top:16px;
	width:100%;
	display:none;
	background-color:#FFF;
	border:1px solid #FFF;
	padding-top:5px;
}



.hds_submenu_block a:link, hds_submenu_block a:visited, hds_submenu_block a:active
{
	color:#666;
	display:block;
	font-family:Tahoma, Geneva, sans-serif;
	font-size:11px;
	font-weight:normal;
	text-decoration:none;
	line-height:14px;
	padding:3px 0px 3px 0px;
	background-color:none;
	padding-left:12px;
}
.hds_submenu_block a:hover
{
	color:#000;
	display:block;
	font-family:Tahoma, Geneva, sans-serif;
	font-size:11px;
	font-weight:normal;
	text-decoration:none;
	line-height:14px;
	padding:3px 0px 3px 0px;
	background-color:#eee;
	padding-left:12px;
}

Edited by alex.tepes: code updated

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.