Smart Folding Menu Tree Script

[Theon]

I need help setting this script up. I can't seem to get the links and sub-links laid out to show the sequence I need. All the links seem to want to line up in a row or with a tabbed-type inset.

The documentation is a little light.

[jscheuer1]

Start with a blank html page and, using a text editor, follow the instructions on the demo page. Also:

Warning: Please include a link to the DD script in question in your post. See this thread for the proper posting format when asking a question.

And:

Please post a link to the page on your site that contains the problematic script so we can check it out.

[Theon]

Referring to: http://dynamicdrive.com/dynamicindex1/navigate1.htm

You write: "Start with a blank html page and, using a text editor, follow the instructions on the demo page."

What instructions on the demo page? Thats why I'm asking for help.

You ask where the page is on the web? I haven't uploaded it yet as it doesn't work.

[Twey]

The instructions under "Directions" in big bold text.

[Theon]

I'm not incorporating step 4, but I have went over and keep getting confused at
<li id="foldheader">News</li>
<ul id="foldinglist" style="display:none" style=&{head};>

I have tried numerous ways of setting up what goes first and I get interesting results:

Here is what I ended up with which does not line up the topics and sub-topics as I really need them :

<font face="Verdana">

<ul>
<li id="foldheader">Home</li>
<ul id="foldinglist" style="display:none" style=&{head};>
<li><a href="index.html">Home</a></li>
</ul>

<li id="foldheader">Products</li>
<li id="foldheader">Motorcycle</li>
<li id="foldheader">Billet</li>
<li id="foldheader">Driving Lights</li>
<ul id="foldinglist" style="display:none" style=&{head};>
<li><a href="bullet.html">Bullet</a></li>
<li><a href="shorty.html">Shorty</a></li></ul>
<li id="foldheader">Turn Signals</li>
<ul id="foldinglist" style="display:none" style=&{head};>
<li><a href="turn-signals-bullet.html">Bullet</a></li>
<li><a href="turn-signals-micro.html">Micro B</a></li>
<li><a href="turn-signals-shorty.html">Shorty</a></li>
<li><a href="turn-signals-xs.html">XS</a></li>
</ul>

<li id="foldheader">Off-Road</li>
<li id="foldheader">Accessories</li>
<li id="foldheader">Parts</li>
<li id="foldheader">Specifications</li>
<ul id="foldinglist" style="display:none" style=&{head};>
<li><a href="motorcycle.html">Motorcycle</a></li>

<li id="foldheader">Motorcycle</li>
<ul id="foldinglist" style="display:none" style=&{head};>
<li><a href="motorcycle.html">Motorcycle</a></li>
<li id="foldheader">Billet</li>
<ul id="foldinglist" style="display:none" style=&{head};>
<li><a href="http://www.javascriptkit.com">JavaScript Kit</a></li>
<li><a href="http://www.freewarejava.com">Freewarejava.com</a></li>
</ul>

[jscheuer1]

Well, you have the general idea but, I think at least in your above example, that you have failed to grasp the basic unit:

   <li id="foldheader">News</li>
   <ul id="foldinglist" style="display:none" style=&{head};>
      <li><a href="http://www.cnn.com">CNN</a></li>
      <li><a href="http://www.abcnews.com">ABC News</a></li>
      <li><a href="http://www.news.bbc.co.uk">BBC News</a></li>
   </ul>

a li (list item) 'foldheader' above an ul (unordered list) 'foldinglist' which itself has its own li's.

All these units are contained in the one overall ul:

<ul>

unit

unit

unit

unit

unit

</ul>

Don't worry about the nested level yet but, it is just a new 'foldinglist' ul placed below an inner li, labeled as a 'foldheader' of an outer ul 'foldinglist'.

[Theon]

Ok, please bear with me. Here's the source code I'm starting with even though I know it needs some help. If someone can lay it out so it will work as I explained below the source code it would be very much appreciated.

<ul>
<li id="foldheader">Home</li>
<ul id="foldinglist" style="display:none" style=&{head};>
<li><a href="index.html">Home</a></li>
</ul>

<li id="foldheader">Products</li>
<li id="foldheader">Motorcycle</li>
<li id="foldheader">Billet</li>
<li id="foldheader">Driving Lights</li>
<ul id="foldinglist" style="display:none" style=&{head};>
<li><a href="bullet.html">Bullet</a></li>
<li><a href="shorty.html">Shorty</a></li></ul>
<li id="foldheader">Turn Signals</li>
<ul id="foldinglist" style="display:none" style=&{head};>
<li><a href="turn-signals-bullet.html">Bullet</a></li>
<li><a href="turn-signals-micro.html">Micro B</a></li>
<li><a href="turn-signals-shorty.html">Shorty</a></li>
<li><a href="turn-signals-xs.html">XS</a></li></ul>

is at http://freespiritmercantile.com/test.html
if you click on the sub-links, they don't go anywhere at this time

A list with index.html unfolded should show under Home a list with index.html unfolded.
Under "Products" Motorcycle should be indented, then Billet indented, then Driving Light indented, Bullet & Shorty as sub-links
Turn Signals should line up indented as far in as Driving Lights, then the 4 styles of turn signals would be sub-links

I hope this makes sense...

[jscheuer1]

Could you be more clear here:

A list with index.html unfolded should show under Home a list with index.html unfolded.
Under "Products" Motorcycle should be indented, then Billet indented, then Driving Light indented, Bullet & Shorty as sub-links
Turn Signals should line up indented as far in as Driving Lights, then the 4 styles of turn signals would be sub-links

Also, the linked page's code is different from that in your post. Anyways, why not start with the demo code and simply substitute your text and links?

Once you get that far, if you need something added, just ask.

[Theon]

The linked page was shortened.

I tried to start with the demo code but you hit a point where its beyond a simple substitution trying to retain what I need for the menu on my site.

[jscheuer1]

That's what I am saying, rather than go on blindly from that point, just use the demo code. Once you have exhausted its ability to represent what you want, stop. Put that up as a demo and ask us to help with just the next item. Going one step at a time, you will soon get the hang of it after one or two times, most likely.

To do it any other way is to invite more confusion than is required.