Cascade Menu help needed

[Mimi49]

I set up a simple, one-level cascade menu using the script from this url: http://javascript.internet.com/navigation/cascade-menu.html

On rollover, the menu drops down with my link choices that I can scroll through. However, the menu does not hide when I mouse out of the menu area. The example on the above url doesn't close either unless there's a mouse click or the user goes to another menu.

I looked through the CascadeMenu.js file, but don't know what code to add to make the menu hide on mouse out.

Can anyone help?

Thanks!

[96turnerri]

change this in the body tag Onclick="HideMenu(menuBar)" to OnMouseOut="HideMenu(menuBar)" but when i tested it you need to sort out the space between the menu bar and the drop down menu, youll see what i mean when you test it, easily fixed tho

[Mimi49]

Thank you for checking the code and functionality.

When I substituted the code in the body tag, the menu bar was hidden and not the dropdown/cascade section. Like you suggested, there is a space between the menu bar and the dropdown. I made them meet, and it still didn't work. The instant I moused onto the dropdown (or tried to), the cascade disappeared.

I tried to use an OnMouseOut command to make the menuItem hide, but the error message said menuItem was not defined. It is used in the js file, but not recognized in the body tag, I guess.

Still stuck. Can you give me any more input? I really appreciate it.

I'm in the US on Eastern Time, so may seem slow to respond to your post. I'll keep checking this evening and again Friday morning. Thanks so much.

[96turnerri]

i cant seem to edit it to make it join to see what you mean, can you upload your CSS sheet so i can see and hopefully fix the problem

96

[twistedsociety]

Yes! This is exactly what I was looking for! :D Here below is what the first guy was talking about.....I thought it was something in the js file.....but tried that body tag changing deal and when going down to menu items and such it disappears lol... Here below is a post I just copied from another board to paste here hehe...I have the zipped file with css and test page already setup for it to work..just need to download and add to ur computer to test on it. ;)

I really don't know much at all about javascript and such.. but I had gotten this free script for a drop down menu and it seems to be working ok, except for the fact the menus do not close when mousing off of them. :? :( Here is the link to the cascade menu I got: http://javascript.internet.com/navigation/cascade-menu.html

I was wondering if there is anyone here that might be able to help me fix this little problem. :) Here below is the javascript codes that is in the js file I had downloaded. And below that is a direct downloadable zip of an example ready to use and try menu nav, to try any fixings and adjustments on. :)

function InitMenu()
{
var bar = menuBar.children

for(var i=0;i < bar.length;i++)
{
var menu=eval(bar[i].menu)
menu.style.visibility = "hidden"
bar[i].onmouseover = new Function("ShowMenu("+bar[i].id+")")
var Items = menu.children
for(var j=0; j<Items.length; j++)
{
var menuItem = eval(Items[j].id)

if(menuItem.menu != null)
{
menuItem.innerHTML += "<Span Id="+menuItem.id+"_Arrow class='Arrow'>4</Span>"
//var tmp = eval(menuItem.id+"_Arrow")
// tmp.style.pixelLeft = menu.getBoundingClientRect().Right //- tmp.offsetWidth - 15
FindSubMenu(menuItem.menu)}

if(menuItem.cmd != null)
{
menuItem.onclick = new Function("Do("+menuItem.id+")") }

menuItem.onmouseover = new Function("highlight("+Items[j].id+")")

}

}
}
function FindSubMenu(subMenu)
{
var menu=eval(subMenu)
var Items = menu.children
for(var j=0; j<Items.length; j++)
{
menu.style.visibility = "hidden"
var menuItem = eval(Items[j].id)


if(menuItem.menu!= null)
{
menuItem.innerHTML += "<Span Id="+menuItem.id+"_Arrow class='Arrow'>4</Span>"
// var tmp = eval(menuItem.id+"_Arrow")
//tmp.style.pixelLeft = 35 //menuItem.getBoundingClientRect().right - tmp.offsetWidth - 15
FindSubMenu(menuItem.menu)
}

if(menuItem.cmd != null)
{
menuItem.onclick = new Function("Do("+menuItem.id+")") }

menuItem.onmouseover = new Function("highlight("+Items[j].id+")")

}
}
function ShowMenu(obj)
{
HideMenu(menuBar)
var menu = eval(obj.menu)
var bar = eval(obj.id)
bar.className="barOver"
menu.style.visibility = "visible"
menu.style.pixelTop = obj.getBoundingClientRect().top + obj.offsetHeight + Bdy.scrollTop
menu.style.pixelLeft = obj.getBoundingClientRect().left + Bdy.scrollLeft
}

function highlight(obj)
{
var PElement = eval(obj.parentElement.id)
if(PElement.hasChildNodes() == true)
{ var Elements = PElement.children
for(var i=0;i<Elements.length;i++)
{
TE = eval(Elements[i].id)
TE.className = "menuItem"
}
}
obj.className="ItemMouseOver"
window.defaultStatus = obj.title
ShowSubMenu(obj)
}

function Do(obj)
{
var cmd = eval(obj).cmd
window.navigate(cmd)

}

function HideMenu(obj)
{
if(obj.hasChildNodes()==true)
{
var child = obj.children

for(var j =0;j<child.length;j++)
{
if (child[j].className=="barOver")
{var bar = eval(child[j].id)
bar.className="Bar"}

if(child[j].menu != null)
{
var childMenu = eval(child[j].menu)
if(childMenu.hasChildNodes()==true)
HideMenu(childMenu)

childMenu.style.visibility = "hidden"
}
}

}
}
function ShowSubMenu(obj)
{
PMenu = eval(obj.parentElement.id)
HideMenu(PMenu)
if(obj.menu != null)
{
var menu = eval(obj.menu)
menu.style.visibility = "visible"
menu.style.pixelTop = obj.getBoundingClientRect().top + Bdy.scrollTop
menu.style.pixelLeft = obj.getBoundingClientRect().right + Bdy.scrollLeft
if(menu.getBoundingClientRect().right > window.screen.availWidth )
menu.style.pixelLeft = obj.getBoundingClientRect().left - menu.offsetWidth
}
}

Here is the link to download the zipped files ready to try stuff on.
http://www.twisted-society.com/lol.zip

Also....I had contacted the author of this script and such about that and he doesn't really know how to make it work as of yet....but he is still the process I guess, of trying to get it to work. :? I just thought I would ask here for a little quicker assistance hehe. :wink:

twistedsociety

[twistedsociety]

*bumpy bump* :D

[twistedsociety]

O just forget this crappy menu....it's a piece of snitz...and it don't show up in Mozilla.....Geesh!! 98.99% of them out there don't lmao...!! That's why I flushed all mine down the toilet...Y u might be asking....well...cause that is where the crap goes after taking a dump!! <wink>....The only crap that won't clog a toilet....JavaScript Drop Down Menu Scripts....LMAO!! ;) :D (speaking of drop down menu scripts...I gotta take a snitz myself LMAO) hahaha....naa...I call this the 245break.....brb....LMAO LOL!!!

Twisted

[Paul Jr]

As twisted said, this menu refuses to function in any browser but IE. :rolleyes:

A better solution would be something like this (http://www.vladdy.net/Demos/CSSNav.html), or, if you want to get really snazzy, this (http://www.udm4.com/).