Mouseover with Smart Folding Menu Tree Script

[PghPrincess]

In the original script the user has to click on the foldheader to get the submenu(s) to display however I need it to be a mouseover event. I need the user to simply mouseover the image and have the submenu(s) displayed. I've changed the document.onclick=checkcontained to document.onmouseover=checkcontained and it went haywire. So, I changed that line of code from
if (ie4||ns6)
document.onclick=checkcontained

with:

function fmenu(){
if (ie4||ns6){
checkcontained();}
}
and then encased each menu as such:
<div id="foldmenu" onmouseover="fmenu();">

menu here

</div>

However that still doesn't work. Any suggestions??? I'm clueless right now.

[PghPrincess]

My bad, this is in reference to this script
DD Smart Folding Menu Tree Script
http://www.dynamicdrive.com/dynamicindex1/navigate1.htm

[jscheuer1]

Careful what you ask for, you just might get it. There are several problems that arise once these smartfolding unordered lists get triggered onmouseOver. For one a list extends all the way across a page unless contained within a fixed width element. I had the best luck with a table but still the list extends to the largest possible area it can logically encompass, making the mouse over target area much larger than one might like. That somewhat solved, in IE, the most widely used browser, lists extend for the entire height of their contained elements, once again expanding the target area for mouse over beyond what one would prefer. I came up with a way of restricting the target area but, it excludes the folder image, a decent compromise under the circumstances and it did away with the need for a container like the table I mentioned above. Remember though, that before all this, a click was required to expand/contract a list. Now, a mouse over does this. As a result, things jump around sometimes when you least expect it but, as I said at the beginning, that's what you asked for. Here's how:

Change this line in the script:

cur=ns6? e.target : event.srcElement

to:

cur=ns6? e : event.srcElement

and get rid of these two lines:

if (ie4||ns6)
document.onclick=checkcontained

Now, the html markup has to change, where it once looked like this:

<li id="foldheader">News</li>

make it look like this:

<li id="foldheader"><span onmouseOver="checkcontained(this.parentNode)">News</span></li>

Make this change only for those li's that have the foldheader id. That's all there is to it. I have a feeling you will either want further modifications though, or decide that onclick wasn't so bad after all.

[PghPrincess]

Actually this does what I need it to do. Thanks a million!!!

[jscheuer1]

You're welcome,

One other thing I left out but, it is only to allow it to degrade more gracefully in browsers that do not support its features. These lines should be added:

if (!(ie4||ns6))
return;

right after this line:

function checkcontained(e){