Forum Moderators: open
My knowledge of javascript is pretty basic so I don't know how easy/difficult what I'm trying to achieve is but basically it's a dropdown menu which should show on mouseover and disappear on mouseout. The trouble I'm having is that it's looping through the two functions constantly and the submenu is flickering on and off. I've tried various ways but I always end up with this problem.
Anyone who can help please?
Many thanks!
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Peugeot Offers</title>
<script type="text/javascript">
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
oldonload();
func();
}
}
}
function showSubnav(id) {
var divs = document.getElementsByTagName("div");
for (var i=0; i<divs.length; i++ ) {
if (divs[i].className.indexOf("sub_offers_list") == -1) continue;
if (divs[i].getAttribute("id") != id) {
divs[i].style.display = "none";
} else {
divs[i].style.display = "block";
}
}
}
function hideSubnav(id) {
var divs = document.getElementsByTagName("div");
for (var i=0; i<divs.length; i++ ) {
if (divs[i].className.indexOf("sub_offers_list") == -1) continue;
if (divs[i].getAttribute("id") == id) {
divs[i].style.display = "none";
}
}
}
function prepareSubnav() {
if (!document.getElementsByTagName ¦¦ !document.getElementById ¦¦ !document.getElementById("offers_list")) return false;
var nav = document.getElementById("offers_list");
var links = nav.getElementsByTagName("a");
for (var i=0; i<links.length; i++ ) {
var navId = links[i].getAttribute("href").split("#")[1];
if (!document.getElementById(navId)) continue;
document.getElementById(navId).style.display = "none";
links[i].destination = navId;
links[i].onmouseover = function() {
showSubnav(this.destination);
return false;
}
links[i].onmouseout = function() {
hideSubnav(this.destination);
return false;
}
links[i].onclick = function() {
hideSubnav(this.destination);
return false;
}
}
}
addLoadEvent(prepareSubnav);
</script>
</head>
<body>
<ul id="offers_list">
<li><a href="#subnav1">hasSubnav</a>
<div class="sub_offers_list" id="subnav1">
<ul>
<li><a href="#">sublink</a></li>
<li><a href="#">sublink</a></li>
<li><a href="#">sublink</a></li>
</ul>
</div>
</li>
<li><a href="#subnav2">hasSubnav</a>
<div class="sub_offers_list" id="subnav2">
<ul>
<li><a href="#">sublink</a></li>
</ul>
</div>
</li>
<li><a href="#">link</a></li>
<li><a href="#subnav3">hasSubnav</a>
<div class="sub_offers_list" id="subnav3">
<ul>
<li><a href="#">sublink</a></li>
<li><a href="#">sublink</a></li>
</ul>
</div>
</li>
<li><a href="#">link</a></li>
<li><a href="#subnav4">hasSubnav</a>
<div class="sub_offers_list" id="subnav4">
<ul>
<li><a href="#">sublink</a></li>
<li><a href="#">sublink</a></li>
</ul>
</div>
</li>
</ul>
</body>
</html>
Would you like to offer the solution that you found for others reading?
