Menu
So I’ll explain this issue first and then get into the multiple issues I’m having. The code is posted below all explanations.
I have a dropdown menu, a variation of the suckerfish CSS menu, that has 6 main links. These links are images and must have rollover image swaps on mouseover. Now, the really tricky part is that the mousover states MUST stay in that position when the <ul> is displayed. When it’s not displayed, then it would revert to it’s original image.
I have separate functions that outline each issue:
– a function for the mouseovers– a function for IE to see the UL when the main level links are moused over– funcitons for the 4 main level links with dropdown menus to so the main level link image stays switched. (much thanks to jsKid for help on this one).
These separate issues combined are making one big mess.
Basically, I’d like to have all the functions load all at one time, like one massive window.onload function (which you’ll see below). I can’t seem to get this to work right either.
Also, the code to keep the images in the mouseover state when the UL appears isn’t working either. Can someone offer me some help in this area also?
Here’s the javascript:
[code]
window.onload = goAll();
function goAll() {
/* –(allows IE users to see dropdown menu) — */
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById(“nav”);
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName==”LI”) {
node.onmouseover=function() {
this.className+=” over”;
}
node.onmouseout=function() {
this.className=this.className.replace(” over”, “”);
}
}
}
}
}
/* — (image swaps for main level links) — */
var W3CDOM = (document.createElement && document.getElementsByTagName);
var mouseOvers = new Array();
var mouseOuts = new Array();
function init()
{
if (!W3CDOM) return;
var nav = document.getElementById(‘nav’);
var imgs = nav.getElementsByTagName(‘img’);
for (var i=0;i<imgs.length;i++)
{
imgs[i].onmouseover = mouseGoesOver;
imgs[i].onmouseout = mouseGoesOut;
var suffix = imgs[i].src.substring(imgs[i].src.lastIndexOf(‘.’));
mouseOuts[i] = new Image();
mouseOuts[i].src = imgs[i].src;
mouseOvers[i] = new Image();
mouseOvers[i].src = imgs[i].src.substring(0,imgs[i].src.lastIndexOf(‘.’)) + “-o” + suffix;
imgs[i].number = i;
}
}
function mouseGoesOver()
{
this.src = mouseOvers[this.number].src;
}
function mouseGoesOut()
{
this.src = mouseOuts[this.number].src;
}
/* — (keeps main level mouse over while mouse is on dropdown ul) — */
function overprod() {
var obj= document.getElementById(“ddourproducts”);
var img= document.getElementById(‘navourproducts’);
if (obj.style.display==’none’) {
img.src= ‘images/navourproducts.gif’;
} else {
img.src= ‘images/navourproducts-o.gif’;
}
}
function overtech() {
var obj= document.getElementById(“ddtechmaterials”);
var img= document.getElementById(‘navtechmaterials’);
if (obj.style.display == ‘none’) {
img.src = ‘images/navtechmaterials.gif’;
} else {
img.src = ‘images/navtechmaterials-o.gif’;
}
}
function overshop() {
var obj= document.getElementById(“ddshopfinder”);
var img= document.getElementById(‘navshopfinder’);
if (obj.style.display==’none’) {
img.src= ‘images/navshopfinder.gif’;
} else {
img.src= ‘images/navshopfinder-o.gif’;
}
}
function overabout() {
var obj= document.getElementById(“ddaboutus”);
var img= document.getElementById(‘navaboutus’);
if (obj.style.display==’none’) {
img.src= ‘images/navaboutus.gif’;
} else {
img.src= ‘images/navaboutus-o.gif’;
}
}
} /* end goAll */
Here’s the XTML:
[code]
<body>
<ul id=”nav”>
<li class=”home”><a href=”#”><img name=”navhome” id=”navhome” src=”images/navhome.gif” /></a></li>
<li class=”ourproducts”><a href=”#”><img name=”navourproducts” id=”navourproducts” src=”images/navourproducts.gif” /></a>
<ul id=”ddourproducts”><li><a href=”#”>link</a></li><li><a href=”#”>link</a></li><li><a href=”#”>link</a></li><li><a href=”#”>link</a></li><li><a href=”#”>link</a></li><li><a href=”#”>link</a></li><li><a href=”#”>link</a></li><li><a href=”#”>link</a></li><li><a href=”#”>link</a></li></ul></li>
<li class=”techmaterials”><a href=”#”><img name=”navmaterials” id=”navmaterials” src=”images/navmaterials.gif” /></a>
<ul id=”ddtechmaterials”><li><a href=”#”>link</a></li><li><a href=”#”>link</a></li></ul>
</li>
<li class=”shopfinder”><a href=”#”><img name=”navshopfinder” id=”navshopfinder” src=”images/navshopfinder.gif” /></a>
<ul id=”ddshopfinder”><li><a href=”#”>link</a></li><li><a href=”#”>link</a></li></ul>
</li>
<li class=”aboutus”><a href=”#”><img name=”navaboutus” id=”navaboutus” src=”images/navaboutus.gif” /></a>
<ul id=”ddaboutus”><li><a href=”#”>link</a></li><li><a href=”#”>link</a></li><li><a href=”#”>link</a></li><li><a href=”#”>link</a></li><li><a href=”#”>link</a></li><li><a href=”#”>link</a></li><li><a href=”#”>link</a></li><li><a href=”#”>link</a></li></ul>
</li>
<li class=”searchfootwear”><a href=”#”><img name=”navsearchfootwear” id=”navsearchfootwear” src=”images/navsearchfootwear.gif” /></a></li>
</ul>
</body>
And the CSS:
[code]
/* suckerfish */
#nav {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: #67670f;
}
ul {
padding: 0;
margin: 0;
list-style: none;
}
li.home {
float: left;
position: relative;
width: 51px;
}
li.home img {
border: 0;
}
li.ourproducts {
float: left;
position: relative;
width: 118px;
z-index: 500;
}
li.ourproducts img {
border: 0;
}
li.ourproducts ul {
display: none;
position: absolute;
top: 21px;
left: 0;
width: 118px;
border: solid 1px #ddd;
background-color: #fff;
width: 118px;
voice-family: “”}””;
voice-family:inherit;
width: 116px;
}
li.ourproducts ul a, li.ourproducts ul a:visited {
display: block;
padding: 3px 0 3px 3px;
margin: 0;
color: #67670f;
text-decoration: none;
width: 118px;
voice-family: “”}””;
voice-family:inherit;
width: 113px;
}
li.ourproducts ul a:hover {
display: block;
background-color: #e4e2db;
color: #52432c;
text-decoration: none;
}
/* tech and materials */
li.techmaterials {
float: left;
position: relative;
width: 141px;
z-index: 500;
}
li.techmaterials img {
border: 0;
}
li.techmaterials ul {
display: none;
position: absolute;
top: 21px;
left: 0;
border: solid 1px #ddd;
background-color: #fff;
width: 141px;
voice-family: “”}””;
voice-family:inherit;
width: 139px;
}
li.techmaterials ul a, li.techmaterials ul a:visited {
display: block;
padding: 3px 0 3px 3px;
margin: 0;
color: #67670f;
text-decoration: none;
width: 141px;
voice-family: “”}””;
voice-family:inherit;
width: 136px;
}
li.techmaterials ul a:hover {
display: block;
background-color: #e4e2db;
color: #52432c;
text-decoration: none;
}
/* — shop finder — */
li.shopfinder {
float: left;
position: relative;
width: 102px;
z-index: 500;
}
li.shopfinder img {
border: 0;
}
li.shopfinder ul {
display: none;
position: absolute;
top: 21px;
left: 0;
border: solid 1px #ddd;
background-color: #fff;
width: 102px;
voice-family: “”}””;
voice-family:inherit;
width: 100px;
}
li.shopfinder ul a, li.shopfinder ul a:visited {
display: block;
padding: 3px 0 3px 3px;
margin: 0;
color: #67670f;
text-decoration: none;
width: 102px;
voice-family: “”}””;
voice-family:inherit;
width: 97px;
}
li.shopfinder ul a:hover {
display: block;
background-color: #e4e2db;
color: #52432c;
text-decoration: none;
}
/* — about us — */
li.aboutus {
float: left;
position: relative;
width: 84px;
z-index: 500;
}
li.aboutus img {
border: 0;
}
li.aboutus ul {
display: none;
position: absolute;
top: 21px;
left: 0;
border: solid 1px #ddd;
background-color: #fff;
width: 84px;
voice-family: “”}””;
voice-family:inherit;
width: 82px;
}
li.aboutus ul a, li.aboutus ul a:visited {
display: block;
padding: 3px 0 3px 3px;
margin: 0;
color: #67670f;
text-decoration: none;
width: 84px;
voice-family: “”}””;
voice-family:inherit;
width: 79px;
}
li.aboutus ul a:hover {
display: block;
background-color: #e4e2db;
color: #52432c;
text-decoration: none;
}
/* — search footwear — */
li.searchfootwear {
float: left;
position: relative;
width: 174px;
z-index: 500;
}
li.searchfootwear img {
border: 0;
}
li.searchfootwear ul {
display: none;
position: absolute;
top: 21px;
left: 0;
border: solid 1px #ddd;
background-color: #fff;
width: 174px;
voice-family: “”}””;
voice-family:inherit;
width: 172px;
}
li.searchfootwear ul a, li.searchfootwear ul a:visited {
display: block;
padding: 3px 0 3px 3px;
margin: 0;
color: #67670f;
text-decoration: none;
width: 174px;
voice-family: “”}””;
voice-family:inherit;
width: 169px;
}
li.searchfootwear ul a:hover {
display: block;
background-color: #e4e2db;
color: #52432c;
text-decoration: none;
}
li > ul {
top: auto;
left: auto;
}
li:hover ul, li.over ul {
display: block;
}
Does anyone know what I can do to solve these problems?
Thanks!
-B