Cascading Menu Help

Discussion in 'Javascript' started by dkirkdrei@yahoo.com, Dec 19, 2006.

  1. Guest

    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>
     
    , Dec 19, 2006
    #1
    1. Advertising

  2. ASM Guest

    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; }
    }
    }
    }
    }


    --
    Stephane Moriaux et son (moins) vieux Mac déjà dépassé
    Stephane Moriaux and his (less) old Mac already out of date
     
    ASM, Dec 19, 2006
    #2
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Humpty Dumpty
    Replies:
    0
    Views:
    419
    Humpty Dumpty
    Jan 16, 2004
  2. gregory stevenson

    Cascading Menu scripts

    gregory stevenson, Jan 24, 2004, in forum: Javascript
    Replies:
    2
    Views:
    111
    gregory stevenson
    Jan 24, 2004
  3. Cascading Menu Recommendation

    , May 9, 2005, in forum: Javascript
    Replies:
    1
    Views:
    89
    Richard Cornford
    May 10, 2005
  4. gb
    Replies:
    0
    Views:
    114
  5. Replies:
    1
    Views:
    99
    Julian Turner
    Oct 3, 2006
Loading...

Share This Page