Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > Cascading Menu Help

Reply
Thread Tools

Cascading Menu Help

 
 
dkirkdrei@yahoo.com
Guest
Posts: n/a
 
      12-19-2006
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>

 
Reply With Quote
 
 
 
 
ASM
Guest
Posts: n/a
 
      12-19-2006
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[i].getElementsByTagName('UL') &&
L[i].getElementsByTagName('UL').length>0)
{
L[i].className = 'hid';
L[i].onclick = function() {
this.className = this.className==''? 'hid' : '';
return false; }
}
}
}
}


--
Stephane Moriaux et son (moins) vieux Mac déjà dépassé
Stephane Moriaux and his (less) old Mac already out of date
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Query regarding Cascading Menu arjun.zacharia@gmail.com Javascript 1 10-03-2006 02:08 PM
HELP needed on cascading menu - "onmouseout" event?!??? gb Javascript 0 01-24-2006 11:49 PM
Cascading Menu Recommendation JMosey@gmail.com Javascript 1 05-10-2005 07:56 PM
Cascading Menu scripts gregory stevenson Javascript 2 01-24-2004 09:11 PM
Lazy cascading menu in Tkinter with postcommand Humpty Dumpty Python 0 01-16-2004 09:46 PM



Advertisments
 



1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57