Can I get this mouseover effect?

closing a group

[nigassma]

So far I have this JS to get a folding menu to work. If you click on "main_link1" "sub_link1", "sub_link2", etc open up. However, the only way to get that group of links to close is to click on another "main_link".

Another downside to to the method that I'm using is that I cannot assign a link to the "main_link". It just acts as a way for visitors to access the links held within it.

I was wondering two things I guess. A) Is there a way to close the link group by clicking again on that same group, or B) Can I assign the opening of the group of <li>'s to a hover effect on the main <ul> (here the mouseoff would close the <li>s).

Any input or discussion would be much appreciated.

----Here's the JS I've got so far----

function changeOpenmenu(id){
var all_uls = new Array();
all_uls[0]='ul_one';
all_uls[1]='ul_two';
all_uls[2]='ul_three';
all_uls[3]='ul_four';
all_uls[4]='ul_five';

for(i=0;i<all_uls.length;i++){
document.getElementById(all_uls[i]).style.display = 'none';
}
the_ul = document.getElementById(id);
the_ul.style.display = 'block';
clearButtons();
}

function clearButtons() {
if (!document.getElementsByTagName) return;
var anchors = document.getElementsByTagName("a");
for (var i=0; i<anchors.length; i++) {
var anchor = anchors[i];
anchor.blur();
}
}

---- Here's the HTML ----
<div id="nav_contain">
<ul id="sidenav">
<li id="li_one"><a href="javascript:changeOpenmenu('ul_one');">main_link</a>
<ul class="sub" id="ul_one">
<li><a href="#">sub_link</a></li>
<li><a href="#">sub_link</a></li>
</ul>
</li>
<li id="li_two"><a href="javascript:changeOpenmenu('ul_two');">main_link</a>
<ul class="sub" id="ul_two">
<li><a href="#">sub_link</a></li>
<li><a href="#">sub_link</a></li>
<li><a href="#">sub_link</a></li>
</ul>
</li>
<li id="li_two"><a href="javascript:changeOpenmenu('ul_three');">main_link</a>
<ul class="sub" id="ul_three">
<li><a href="#">sub_link</a></li>
<li><a href="#">sub_link</a></li>
<li><a href="#">sub_link</a></li>
</ul>
</li>
<li id="li_two"><a href="javascript:changeOpenmenu('ul_four');">main_link</a>
<ul class="sub" id="ul_four">
<li><a href="#">sub_link</a></li>
<li><a href="#">sub_link</a></li>
<li><a href="#">sub_link</a></li>
</ul>
</li>
<li id="li_two"><a href="javascript:changeOpenmenu('ul_five');">main_link</a>
<ul class="sub" id="ul_five">
<li><a href="#">sub_link</a></li>
<li><a href="#">sub_link</a></li>
<li><a href="#">sub_link</a></li>
</ul>
</li>
</ul>
</div>

[ORBiTrus]

replace href=javascript:changeOpenmenu('ul_five');" with:

href='somePageForNonJsPeople'
onmouseover="changeOpenmenu('ul_five');return false"
onmouseout="changeOpenmenu(null);return false"

Next, modify changeOpenmenu to support null id meaning

the_ul = document.getElementById(id);
the_ul.style.display = 'block';

becomes

if (id!= null) {
the_ul = document.getElementById(id);
the_ul.style.display = 'block';
}

Anyways, I'm sure you can finish saddling the horse.

[nigassma]

ORBiTrus,

Thanks for the speedy response. The hover effect works, but not quite as I expected. For some reason the ul's have now lost their styles and if I hover over the main link, it opens up the sublinks but once I roll over the mainlink to try and access the sublinks it doesn't want to stay open.

I guess the horse is still unsaddled

[ORBiTrus]

If you want to do hovers, try using pure CSS menus with an .htc for IE6. You'll find alot of these on here, at ALA, etc.

[nigassma]

Thanks. With JS, however, how do I get the open/close by clicking on the "mainlink" function to work.

Say I want to click on the item to open the subfolder, and then click again to close it.

[ORBiTrus]

Presumably write a

/**
* Closes a menu, and it's children.
*/
function closeMenu (menu) {
var menus = menu.getElementsByTagName('ul');
for (var i=0; i<l; i++)
menus[i].style.display = "none";
menu.style.display = "none";
}

/**
* Opens a immediate generation menu.
*/
function openMenu (menu) {
menu.style.display = "block";
}

/**
* Opens or closes a menu.
*/
function openCloseMenu (menu) {
if (menu.style.display == "block")
closeMenu (menu);
else
openMenu (menu);
}

/**
* Closes all open menus
*/
function closeAllMenus (exclude) {
var src = document.getElementById('menu');
var l = src.childNodes.length;
for (var i=0; i<l; i++)
if (src.childNodes[i].tagName == 'ul' && src.childNodes[i]!= exclude)
closeMenu(src.childNodes[i]);
}

function doMenuChange (id) {
var menu = document.getElementById(id);
closeAllMenus(menu);
openCloseMenu(menu);
}

and use a onclick="doMenuChange('ul_one');"

And if you surround everything with a id='menu' div, then it will work nicely.

To close everything, you can use closeAllMenus(null);

[nigassma]

ORBiTrus,

You're going to have to forgive me for being naive, but I have been able to get the onclick to work, but I don't know how to enlist the ondblcick to close the menu properly.

I have tried this:

<li id="li_one"><a href='#' onclick="doMenuChange('ul_one');" ondblclick="openCloseMenu('ul_one')">About</a>

and get this error in my debug:

Error: menu.style has no properties
Source File: Line 47

which is this:

function openCloseMenu (menu) {
Line 47-> if (menu.style.display == "block")
closeMenu (menu);
else
openMenu (menu);
}

What would be the correct way to use the onclick to both open and close the folder?

Thanks,
Nick

[ORBiTrus]

Right, that's because openCloseMenu takes an object, not an id reference.

Instead, use either:

closeMenu (document.getElementById('ul_one'))

or

closeAllMenus (null)

depending on whichever is best. For proper coding, the Javascript should not depend on the contents of the HTML, which is how I've tried to do it (so I'd use the latter).

[If you really want to do it abstractly, your onclick would be: doChildMenuChange(this.parentNode) and the function doChildMenuChange would run doMenuChange on the first immediate child ul. But that's if you REALLY want to do it the "right" way... even better, you would attach eventListeners to the a's to detect clicks... but that's another story. Ever notice doing it "right" tends to involve more code?]

[nigassma]

Ain't that the truth. I just found that there is a folding tree menu that uses cookies to remember which topics were left open by the site visitor. It's cool and worth a look.

I posted it in a CSS thread:

[webmasterworld.com...]

The actual JS came from a group called AcmeBase and their script called Folding Tree Menu v.1.4 or something to that nature.