PDA

View Full Version : Smart Folding Menu Tree Script



Theon
05-19-2006, 09:00 PM
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
05-20-2006, 04:54 AM
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 (http://www.dynamicdrive.com/forums/showthread.php?t=6) 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
05-20-2006, 10:30 PM
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
05-20-2006, 11:01 PM
The instructions under "Directions" in big bold text. :)

Theon
05-21-2006, 12:32 AM
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
05-21-2006, 05:04 AM
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
05-21-2006, 07:06 PM
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
05-21-2006, 07:37 PM
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
05-22-2006, 04:47 AM
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
05-22-2006, 05:31 AM
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.

Theon
05-22-2006, 05:42 AM
Ok, its up at http://freespiritmercantile.com/test.html
I can't seem to get the first line to work correctly and it should be simple as that section is a straight substitution of the link.

jscheuer1
05-22-2006, 06:14 AM
Why do you have so many foldingheaders with nothing to expand?

Theon
05-22-2006, 06:48 AM
"Why do you have so many foldingheaders with nothing to expand?"

From what I saw in the demo if you want something indented, you need a foldingheader. If thats not correct, what needs done to get a topic indented?

jscheuer1
05-22-2006, 09:05 AM
That is true but, If they are not headers, they cannot have that id because, if clicked, they will look for content to expand/contract. Another class with the same style would need to be made for items like that:


<style>
<!--
#foldheader, .listless {cursor:pointer;cursor:hand ; font-weight:bold ;
list-style-image:url(fold.gif)}
#foldinglist{list-style-image:url(list.gif)}
//-->
</style>

Then you could have, for example:


<li class="listless">Motorcycle</li>