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>