Cascading Menu Help

[dkirkdrei]

I am using the javascript below in conjuction with PHP to dynamically
build a cascading menu of part assemblies from a database. The
cascading menu allows the user to "drill" down to the single part level
of larger part assemblies This works very well except for when a person
needs to search for a specific item. Edit>Find on this page(ctrl+f)
will not work because unless the menu has been broken down or "cascded"
if you will, the subparts reside only in the source code and not on the
screen within the browser. Is there a way to build this cascading or
"toggle" menu so that all subassemblies are shown from the begining? In
other words, the menu cascades automatically when the page loads.
Thanks in advance for any help that can be given...

<script>
function toggleMenu(currMenu) {
if (document.getElementById) {
thisMenu = document.getElementById (currMenu).style
if (thisMenu.display == "block") {
thisMenu.display = "none"}
else {
thisMenu.display = "block"}
return false}
else {
return true}
}
</script>

I am also using the style below to offset each row as you tier down
into the subassemblies...

<STYLE TYPE="TEXT/CSS">
<!--

.menu {display:none; margin-left:20px}

-->
</STYLE>

 

[ASM]

(e-mail address removed) a écrit :

<STYLE TYPE="TEXT/CSS">
<!--

.menu {display:none; margin-left:20px}

-->
</STYLE>

Except if each main menu links to a page with its own sub-menus,
you can't do this way because without JS : no sub-menu


Usualy to bend and deploy sub-menus blocks you use lists

<ul id="menu">
<li><a href="1.htm">menu 1</a>
<ul>
<li><a href="11.htm">sub-menu 1.1</a></li>
<li><a href="12.htm">sub-menu 1.2</a></li>
<li><a href="12.htm">sub-menu 1.3</a></li>
</ul>
</li>
<li><a href="2.htm">menu 2</a>
<ul>
<li><a href="21.htm">sub-menu 2.1</a></li>
<li><a href="22.htm">sub-menu 2.2</a></li>
<li><a href="22.htm">sub-menu 2.3</a></li>
</ul>
</li>
<li><a href="3.htm">menu 3</a></li>
</ul>

CSS :
=====
#menu li ul { display: block; }
#menu li.hide ul { display: none; }

JS :
====
onload = function() { if(document.getElementById) {
var M = document.getElementById('menu');
var L = M.getElementsByTagName('LI');
for(var i=0; i<L.length; i++) {
if(L.getElementsByTagName('UL') &&
L.getElementsByTagName('UL').length>0)
{
L.className = 'hid';
L.onclick = function() {
this.className = this.className==''? 'hid' : '';
return false; }
}
}
}
}