PDA

View Full Version : Resolved Need 2 JS rollover menus on same page



hlj71
06-01-2009, 09:31 PM
Hi! I hope someone can help me out. I have been trying to read JavaScript code, but it's starting to make my eyes bug!

I have 2 menus on my site (https://secure.aahanet.org/eWeb/StartPage.aspx?Site=AAHAYC2010) that I would like to have rollover drop down sub-menus. The first one is the light blue row at the top, right of the page. The second one is the dark blue row, slightly middle left of the page (above the yellow bar).

I know there is JS code to use for 1 drop down menu, but I don't know of any code for 2 menus, although I'm sure there is some out there.

Here are the links to the style sheet and the 2 included js menus: https://secure.aahanet.org/eWeb/style/AAHAYC2010_test.css
https://secure.aahanet.org/eWeb/include/AAHAYC2010_menunav1.js
https://secure.aahanet.org/eWeb/include/AAHAYC2010_menunav2.js

How can I get these 2 js menus show the drop down items on the page?

hlj71
06-02-2009, 04:38 PM
I found a code sample on this forum that worked. I will post below in case someone else needs it. I found it in the following thread (Thank You SO MUCH to this person for having such a helpfull posting!! :D): http://www.dynamicdrive.com/forums/archive/index.php/t-12908.html


var initialiseMenu = function() {
var menus = [];

function setClass() {
if (!/(^|\s)over(\s|$)/.test(this.className))
this.className += ' over';
}
function removeClass() {
this.className = this.className.replace(/(^|\s)over(\s|$)/, ' ');
}
window.attachEvent('onunload', function() {
for (var i = 0; i < menus.length; ++i)
menus[i].onmouseover = menus[i].onmouseout
= null;
menus.length = 0;
window.detachEvent('onunload', arguments.callee);
});

return function(id) {
var menu = document.getElementById(id),
nodes = menu.childNodes;

for (var index = 0, length = nodes.length, node; index < length; ++index) {
node = nodes[index];
if (node.tagName == 'LI') {
node.onmouseover = setClass;
node.onmouseout = removeClass;
}
}
menus[menus.length] = menu;
};
}();

window.attachEvent('onload', function() {
initialiseMenu('menu1'); //Change to style used for drop downs
initialiseMenu('menu2'); //Change to style used for drop downs

window.detachEvent('onload', arguments.callee);
});