PDA

View Full Version : A New Generation of Tree Menu



Antoniohawk
Jul 21st, 2004, 03:45 AM
I think that this is probably the only worthwhile project that I have ever worked on. Unlike a lot of heavily laden javascript tree menus, mine relies on a tiny bit of javascript (130 bytes, 390 bytes with image preloading). I could list a bunch of things about it, but I'll just let you guys take a look and play with the source code.

As far as comments go, I couldn't care less what you have to say about it, just say something. Well, if you start flaming me I will be forced to string you up by your toenails and inform George of your imminent banning, but other than that, please comment. For those who can see past the source code, this is a wishlist, so feel free to buy me as much as you would like. :)

At the moment, the urls of some of the places are really, really, really (repeated 500 times) long. I'm gonna have to jump over to [tinyurl (http://tinyurl.com/)] one of these days and take care of those. Amazon.com should be crucified for its lack of intelligible urls.

Anyway, here are the goods.
Tree Menu [http://null.ithium.net/andrew/NewGenMenuTree/wishlist2.html]
CSS [http://null.ithium.net/andrew/NewGenMenuTree/wishlist2.css]
Javascript [http://null.ithium.net/andrew/NewGenMenuTree/linkMenu.js]

Tested in:
Windows

Firefox 0.9.2
Firefox 0.8
Internet Explorer 6.0*
Internet Explorer 5.5*
Netscape 7.1
Netscape 4*

Mac

Safari
Opera
OmniWeb
Mozilla
Chimera
Firefox


*Known Issues:
- The <del> tag doesn't work in Netscape 4.
- Weird extra spacing when a section of the tree is closed in Win IE.

bradyj
Jul 21st, 2004, 04:29 AM
Holy @#$, that's cool:) I like it!! You did a great job!! I have no idea how it works:), but I think it's cool -- very small loading, what browsers don't handle it? My Mac ones do, but their modern.

Great job :thumbsup:

Antoniohawk
Jul 21st, 2004, 04:36 AM
A hell of a lot of browsers should support it. I shortened the javascript by like half by removing some DOM and that probably added a bunch of browsers to the list. I've only checked it in Firefox and IE6 on Windows, so who knows. Thanks for the comments Brady, I'm glad that we both like it. :)

Raraken
Jul 21st, 2004, 05:08 AM
I've seen them before on a couple websites, but this version seems much more efficent. :thumbsup:

Antoniohawk
Jul 21st, 2004, 05:36 AM
Thanks. I had seen a lot of other menus like this that had a lot of extra markup, plus they used <div>s instead of lists which is a big no-no. :)

I take back what I said about IE6. It's not showing up at all. As for IE 5.5, it has some padding-left/margin-left issues. It looks like I have some more work ahead of me.

WA
Jul 21st, 2004, 05:55 AM
Have you tried the script in IE6 Win XP? For me the page appears blank. However, Firefox works just fine, and very nice indeed!

Antoniohawk
Jul 21st, 2004, 06:08 AM
I guess that withholding the javascript's ending tag just didn't sit too well. We now have liftoff in Firefox, IE6, and IE5.5. Now to figure out why IE is packing on the weight on the left.

WA
Jul 21st, 2004, 06:23 AM
That's strange. http://null.ithium.net/andrew/NewGenMenuTree/wishlist2.html still returns a blank page for me in IE6 Win XP...

Antoniohawk
Jul 21st, 2004, 06:39 AM
Sorry about that George, I guess that I didn't upload the new version. It should work now, with the exception that there are definite padding/margin issues still. If anyone knows what's causing that, please tell me.

We are up and running ladies and gentlemen. It seems that IE likes to tack on a huge left margin to <ul> elements, so setting it to zero did the trick.

llizard
Jul 21st, 2004, 12:20 PM
A hell of a lot of browsers should support it. I shortened the javascript by like half by removing some DOM and that probably added a bunch of browsers to the list. I've only checked it in Firefox and IE6 on Windows, so who knows. Thanks for the comments Brady, I'm glad that we both like it.

Me three. Wow. That is impressive.

Running Win2K at 800x600 screen resolution, I looked in Firefox0.8, IE6, Opera7, NS7.1, and NS4 (CSS enabled AND disabled). Have I already said that the page is impressive?

The only thing that doesn't work is the <del> in NS4 - because, of course, the bozos people who deprecate tag names decided for some strange reason that they didn't like <strike> or <s> anymore. But it isn't a big deal to have the strikeouts missing on the ancient browser. If you really care about the ancient browsers, you could use a CSS hack and put a small note beside any of the titles that have been struck through that would only be visible in ancient browsers. (Heh heh, perhaps easier said than done - the note(s) would show up in any browser with CSS disabled)

ronaldb66
Jul 21st, 2004, 02:00 PM
Those are some very impressive menus, Sir!
Way to go, man: zippy, lightweight, standards compliant, and based around lists; what else could we wish (besides a total absence of JS... :p )?

Antoniohawk
Jul 21st, 2004, 09:15 PM
Thanks for the comments everyone. llizard, I added the browsers that you mentioned, but I still need someone with a Mac to check it out and tell me what works and doesn't. Hey Brady, if you get the chance, tell me what browsers it was working in for ya.

bradyj
Jul 21st, 2004, 09:21 PM
Works perfect in:
Safari, Opera, OmniWeb, Mozilla/Chimera/Firefox for Mac.

Mac IE only has the issue that it doesn't allow you to click on the + or - sign to minimize the tree, you have to click on the name. That doesn't seem major, though.

Antoniohawk
Jul 21st, 2004, 09:55 PM
Thanks Brady. That's really weird that you can't click on the plus/minus signs. They are background images of the <a>, so they should work.

bradyj
Jul 21st, 2004, 10:13 PM
is the <a> a display: block property? IE mac gets weird with background image links.

Antoniohawk
Jul 21st, 2004, 10:34 PM
Test it out now. The only thing that I don't like about display: block is that it makes the <a> as wide as the container, thus creating a huge border onclick and also allowing you to click on it from way aways.

Can someone check it in NN4 again? I think that I might have fixed the <del> tag problem.

bradyj
Jul 21st, 2004, 10:36 PM
bingo -- works in all, and looks the same in all actually, I'm not seeing a shift (or maybe just subtle).

Antoniohawk
Jul 21st, 2004, 11:14 PM
Here's what I'm seeing in Firefox on Windows.
http://null.ithium.net/andrew/NewGenMenuTree/images/displayBlock.gif

ronburk
Jul 22nd, 2004, 02:58 AM
Windows XP, 1280x1024, normal fonts.

When I close an item, it seems to leave way too much space between that item and the one that follows. Ironically, it seems to not have this problem under Opera...

Antoniohawk
Jul 22nd, 2004, 07:51 AM
Thanks for checking it out for me ronburk, could you possibly take a screenshot of the space in question?

I just checked it out and you're right. I'll have to go figure out what's causing that. Thanks again for the heads-up.

squirellplaying
Jul 25th, 2004, 03:05 AM
Holy @#$, that's cool:) I like it!! You did a great job!! I have no idea how it works:), but I think it's cool
I agree. That thing is crisp.

In order to expand my knowledge I have a question!
Question:
How does this work?


function door(obj){
obj = obj.parentNode;
obj.className = (obj.className == 'open') ? 'closed' : 'open';
return false;
}


So you pass in the iteam(s) you want to change. I get that. Then it takes that obj and if it open then it changes the class to closed, and vice versa?

Antoniohawk
Jul 25th, 2004, 03:24 AM
I'm not sure if you've ever used ternary operators before, but they are awesome. What the javascript is doing, is the following.

function door(obj){ accepts an object which is the the referring <a>.
obj = obj.parentNode; : We want to hide the <li>, not the <a>, so we refer obj to the parent of the <a> which is the <li>
The next line is the ternary operator. It says that the classname of the <li> is going to be equal to the result of the following if statement. If the <li>'s classname is open, it is set to closed. Else, it is set to open.
The last line just keeps the links from jumping to the top of the page when you click them.


Hopefully that was a good enough explanation. If not, just let me know. :)

squirellplaying
Jul 25th, 2004, 03:46 AM
I understand! Thanks, now I get the code completely.

llizard
Jul 25th, 2004, 04:24 PM
Can someone check it in NN4 again? I think that I might have fixed the <del> tag problem.

Still no lines through in NS4 but I really wouldn't worry about it too much if I were you - unless you are worried that there are many many folks using NS4 who are going to go ahead and get these things for you without realizing they have been crossed off on your wish list.

How many people are still using NS4 anyway? I feel like I might be the last one in the world who even opens up NS4 and javascript, images, java are usually disabled when I do use it! (I enabled javascript just to see if <style type="text/javascript">tags.del.textDecoration = 'line-through'</style> was what you were using as a fix for NS4....

I suppose if you're really concerned about the tiny percentage of NS4 users, you could throw

del {text-decoration:line-through;}

into your stylesheet. And even then for NS4, the line would only show if javascript and CSS were enabled.


--------------
I have to say that I still wonder what goes through the minds of the people who set the tags and why <strike> was changed to <del>. You have to love these guys - but sometimes planned obsolescence really gets to me.



The STRIKE tag
[...]
Since this tag is new, support for it is not universal. If you absolutely require strikethrough text, you will have to use an image.

(STRIKE in WDG HTML 3.2 Reference (http://www.htmlhelp.com/reference/wilbur/font/strike.html))




STRIKE strike-through text style
[...]
Note: future revisions to HTML may be phase out STRIKE in favor of the more concise "S" tag from HTML 3.0.

(STRIKE in W3C HTML 3.2 Recommendation (http://www.w3.org/TR/REC-html32#font-style))


(Note that <del> does not appear in HTML3.2.)



Since DEL is poorly supported among browsers, authors may wish to use a font style element such as STRIKE (deprecated in HTML 4.0) to attempt to convey the meaning of DEL to non-supporting visual browsers.
(<del> in WDG HTML 4.0 Reference (http://www.htmlhelp.com/reference/html40/phrase/del.html))




STRIKE and S: Deprecated.

(strike in W3C HTML 4.01 Recommendation (http://www.w3.org/TR/html401/present/graphics.html#edef-STRIKE)
del in W3C HTML 4.01 Recommendation (http://www.w3.org/TR/1999/REC-html401-19991224/struct/text.html#edef-del) )

canadianjameson
Jul 25th, 2004, 05:44 PM
i'm intrigued and bewildered... but thats probably due to my inability to shake the mental image of you coding this in your underwear with yesterdays five oclock shadow still everpresent, all the while relentlessly chanting "i'm SO much cooler than that napster guy!" :D :D :D

Dude this is sweet. It's clean, efficiently coded and displayed, cross-browser compatible, and most importantly: shexEh!

my only comments are from an aesthetics point of view... and maily cause i like to think my opinion counts :rolleyes:

1) whenever a menu is closed, it leaves a space between it and the menu preceeding. I think (if possible) this should be optional at best because the point of tree menu's is to condense many link options into a small space, and this takes away from that goal.

2)Some topic headers are red, and the underlines are red. I'd expand upon that color coding notion and do the following:
- all links start out black.
- when one is opened, it turns red.
- this trend continues until a final link is reached, all the while underlining in red the onMouseOver's as you go.
- when a menu is closed, the red disappears.

Hope i helped :)
Cheers, and NICELY done.

Antoniohawk
Jul 25th, 2004, 05:58 PM
(I enabled javascript just to see if <style type="text/javascript">tags.del.textDecoration = 'line-through'</style> was what you were using as a fix for NS4....
I guess that I could always enclose the item in a <strike> or <s> tag, but it wouldn't validate. I'm thinking that validation in this situation is second to crossbrowser compatability.

As you have seen, that javascript stylesheet is what I was using to just address NN4. From what you've said, I guess that that method didn't work. I'll plop del { text-decoration: line-through; } in there and if you would be so kind as to check the result, I would be most grateful. :)


1) whenever a menu is closed, it leaves a space between it and the menu preceeding. I think (if possible) this should be optional at best because the point of tree menu's is to condense many link options into a small space, and this takes away from that goal.
That space is not intended, and linked to the display: block that was applied to the <a> for Mac IE. I'm gonna go snoop around for a way to address only Mac IE and just send the display: block that way.


2)Some topic headers are red, and the underlines are red. I'd expand upon that color coding notion and do the following:
- all links start out black.
- when one is opened, it turns red.
- this trend continues until a final link is reached, all the while underlining in red the onMouseOver's as you go.
- when a menu is closed, the red disappears.
I'll keep that in mind jameson, thanks for the tips. :)

This is turning into quite the hack-fest. Thanks everyone again for commenting, keep 'em coming! :)

llizard
Jul 26th, 2004, 03:59 PM
I guess that I could always enclose the item in a <strike> or <s> tag, but it wouldn't validate. I'm thinking that validation in this situation is second to crossbrowser compatability.

As you have seen, that javascript stylesheet is what I was using to just address NN4. From what you've said, I guess that that method didn't work. I'll plop del { text-decoration: line-through; } in there

Is it already plopped? Bad news. The line-throughs are not showing in NS4 with javascript and CSS enabled. And of course, with CSS disabled, in NS4 (and any ancient browser), the linethrough does not show. If you think that those with ancient browsers may be accessing this page, you may have to add <strike> and thumb your nose at the validation people who are somewhat short sighted.

(Do I have the right link?? Is this correct? http://null.ithium.net/andrew/NewGenMenuTree/wishlist2.html)

Antoniohawk
Jul 26th, 2004, 11:07 PM
Is it already plopped? Bad news. The line-throughs are not showing in NS4 with javascript and CSS enabled. And of course, with CSS disabled, in NS4 (and any ancient browser), the linethrough does not show. If you think that those with ancient browsers may be accessing this page, you may have to add <strike> and thumb your nose at the validation people who are somewhat short sighted.

(Do I have the right link?? Is this correct? http://null.ithium.net/andrew/NewGenMenuTree/wishlist2.html)
Yup, that's the correct link. I was away from the computer for quite awhile this weekend and never got around to plopping in the new version. Take a gander at it now.

llizard
Jul 27th, 2004, 12:06 AM
I was away from the computer for quite awhile this weekend and never got around to plopping in the new version. Take a gander at it now.

Nope. Still no lines-through in NS4 (tried with javascript/CSS enabled AND with javascript/CSS disabled)

I know that NS4 is very persnickety about styles. I wonder if it is choking because you have



del {
text-decoration: line-through;
}

after /*[---------------Experimental---------------]*/

Or maybe NS4 is just ignoring <del> altogether because it doesn't recognize it. Whatever NS4's problem is (ahem... excuse me, that should read: "problems are, and they are legion") , I think everyone will agree that trying to get NS4 to display newer coding is a major pain. I have a sneaking suspicion that the only way to get the lines to show up in NS4 is to add <strike></strike>. (Really, is it worth the bother?)

bradyj
Jul 27th, 2004, 12:55 AM
Really, though... why are we coding for NN4?:)

bcarl314
Jul 27th, 2004, 06:15 PM
This is totally sweet, clean, precise, and all around neat-o! :D

Kudos to you.


Thanks for checking it out for me ronburk, could you possibly take a screenshot of the space in question?

I just checked it out and you're right. I'll have to go figure out what's causing that. Thanks again for the heads-up.

As far as the IE padding thing, this seems to fix it....



.open a.parent, .open a.sub, .closed a.parent, .closed a.sub {
width:100%;
}


But I only tested on WinXP IE 6, and Firefox 0.8.

Antoniohawk
Jul 28th, 2004, 05:53 AM
Thanks for the comments and the code Bcarl. :) I'll have to check that out. I was thinking that I might just serve up Mac IE with the display block if possible, but this might just work instead.

dysfunctionGazz
Jul 29th, 2004, 02:01 PM
Off topic I know, but gotta take my hat off to you're wish list.

BUSH rock. You should check out my band too (see below!)

I dont know enough about tree menus to really comment but it looks nice! :thumbsup:

Antoniohawk
Aug 4th, 2004, 05:53 AM
I think that we need to get this thread up to 5 pages, how about you guys? ;) Here's a new version of my menu, windows style. It has quite a few bugs and only looks decent in Firefox at the moment. That's where you guys come in! The 16 x 16 icons are having their tops cut off for some reason that I can't find. In IE the padding is going wacky and the icons are no where to be seen. Any ideas are welcomed with open arms. :)

[http://null.ithium.net/andrew/NewGenMenuTree/xpTree/xpTree.html]

P.S.
Brady if you're around, could you check out the original in Mac IE? I used a hack to address the display: block; issue.

bradyj
Aug 4th, 2004, 06:01 AM
In Safari, Mac IE and OmniWeb, all I see is the text, no icons... but it works. In Firefox and Opera, I see the icons and it works... :confused:

Antoniohawk
Aug 4th, 2004, 06:12 AM
Thanks Brady, how does [this (http://null.ithium.net/andrew/NewGenMenuTree/wishlist2.html)] work in Mac IE?

llizard
Aug 4th, 2004, 02:57 PM
[http://null.ithium.net/andrew/NewGenMenuTree/xpTree/xpTree.html]


Cool. Works like a charm in Opera7 too.

bradyj
Aug 4th, 2004, 04:56 PM
Thanks Brady, how does [this (http://null.ithium.net/andrew/NewGenMenuTree/wishlist2.html)] work in Mac IE?

The links will not collapse :(

Antoniohawk
Aug 4th, 2004, 05:10 PM
Thanks for the browser check llizard. Lol, I don't think that the new stylesheet ever got uploaded, sorry about that. As you can see, I have no file control and can't seem to keep anything straight. This is the part that's the Mac IE hack just in case someone thinks that it looks a little funky.

Main style. wishlist2.css
/*\*//*/
@import "ie5mac.css";
/**/
Hack style sheet. ie5mac.css
.open a.parent { display: block; } /* Solve Mac IE link problem */

.open a.sub { display: block; } /* Solve Mac IE link problem */

.closed a.parent { display: block; } /* Solve Mac IE link problem */

.closed a.sub { display: block; } /* Solve Mac IE link problem */
P.S.
This is only for the original tree menu, not the windows xp one.

ReadMe.txt
Aug 25th, 2004, 03:04 AM
i guess this might be a little dated now, but just read through this thread and the menu seems really nifty - i dont suppose you wrote some sort of php script to build this from a text file or something?

Makes menu updating or similar a sinch. (sp?)

Antoniohawk
Aug 25th, 2004, 03:09 AM
Nope, I don't know much php, but I am working on a way to construct the menu from an xml file via javascript. I'm glad that there is still some interest in my menu. Thanks for resurrecting my thread Readme. :)

Oh, by the way, I think that it might be 'cinch', not sure though.

johnnyb
Sep 14th, 2004, 09:48 PM
Hi,

If its cool with Antonio I'm going to use this for my website - and I will make a script in PHP that builds the menu from a MySQL Database - hopefully.

If you like I can post a link here when I'm done.

John

ReadMe.txt
Sep 14th, 2004, 10:26 PM
peronsally i'd have it build from a space or tab indented text file, but i guess it's just personal preference. A text file would be simpler to update and more portable imo.

Antoniohawk
Sep 14th, 2004, 11:49 PM
Hi,

If its cool with Antonio I'm going to use this for my website - and I will make a script in PHP that builds the menu from a MySQL Database - hopefully.

If you like I can post a link here when I'm done.

John
Feel free John. Please post a link when you're done. :)

mindlessLemming
Sep 15th, 2004, 12:54 AM
Seeing as this thread has been resurrected, I may as well show you an implementation of Andrew's tree menu...
http://stuff.mindlesslemming.com/bird/template.htm

It's not finished, and I'm not putting up for review...But it is based on this menu, and Andrew did write most of the js :D

(@Antoniohawk: Things have been put a bit behind schedule - haven't forget our deal though ;))

Antoniohawk
Sep 15th, 2004, 04:06 AM
(@Antoniohawk: Things have been put a bit behind schedule - haven't forget our deal though ;))
No problem. :)
Totally off topic: when you get the chance, email me some photos of your bonsai, I've already killed two of them. :(

bradyj
Sep 15th, 2004, 05:01 AM
No problem. :)
Totally off topic: when you get the chance, email me some photos of your bonsai, I've already killed two of them. :(

:confused: elaborate?

mindlessLemming
Sep 15th, 2004, 07:07 AM
:confused: elaborate?
I'm buying Andrew a CD off eBay for writing the js for that site's menu.
I've got over a dozen bonsai that I've grown from seed/cuttings/wild and he wants to see photos as he has killed some of his own...
I think that's the jist
:rolleyes:

gsnedders
Sep 15th, 2004, 10:54 AM
Now... I've got to try and get that menu off Andrew... You Shaggygoogler :D

Yes, I know it's at the beginning of the thread

bradyj
Sep 15th, 2004, 05:11 PM
I've got over a dozen bonsai that I've grown from seed/cuttings/wild and he wants to see photos as he has killed some of his own...

heh, funny -- my girlfriends Dad is a member of a Bonsai club, they have shows by my apartment in SF, since I live in japantown. That's funny - AntonioHawk, you need to water them every now and them, it's good for plants :D

Antoniohawk
Sep 15th, 2004, 09:25 PM
The mere fact that you're whacking off the roots to stunt their growth might be a reason for premature death lol. I would be most grateful if you could grace me with some tutelage of the art of the bonsai Andrew-san. :)

AaronW
Sep 15th, 2004, 09:30 PM
Well I guess we're all still talking about trees... Hehe.

That's neat. I wrote one of those once, but it was far nastier than that. Ha.

Edit: I didn't mean to imply this was nasty... It's not. Mine was. There. All clear.

johnnyb
Oct 2nd, 2004, 05:02 AM
So I promised I'd put the PHP here that will build this menu when it was done and that's what I'm here to do.

This pair of functions builds the menu from the database that powers my CMS. Each record in the table 'page' has a field 'PARENT_ID' which is the 'PAGE_ID' of it's parent page. The script uses this to define the parent-child relationship.

Also, note that I use this in a script that writes static html pages so it may be somewhat slower than you want to use to dynamically generate a page every time it loads, I haven't checked the speed however, so I don't really know.

The function menu_maker is called from the page where you want the menu and writes the beginning and end code of the menu and also calls the function make_menu. make_menu is a recursive function which has a loop in it that creates the menu.

I've only tested the function two levels deep, I will have deeper branches on my website soon but it hasn't happened yet. Also, I have changed the menu a bit. The menu items which can be expanded have pages in my site, so if you click on the page title you go to that page. To expand and shrink the menu you have to click on the plus or minus sign. Also, the page that the menu is being displayed on had a different CSS class which would make it bold if the text was bigger than is is on my site.

You can see the menu and this script in action at http://www.the-ballet.com/encyclopedia.php and at http://www.the-ballet.com/studiostage.php and all of their child pages.

So, here's the code:




<?php

function make_menu( $level,$CNX,$page,&$opener,&$subMenu ){
$subjectQuery = "SELECT page.PAGE_TITLE, page.PAGE_ID, page.PAGE_FILE_NAME, page.NEXT_PAGE, page.PARENT_PAGE, ballet.BALLET_TITLE, person.LAST_NAME FROM page LEFT JOIN ballet ON ballet.BALLET_ID = page.BALLET_ID LEFT JOIN person ON person.PERSON_ID = page.PERSON_ID WHERE PARENT_PAGE = ".$level." ORDER BY person.LAST_NAME,ballet.BALLET_TITLE";
$subjectResult = mysql_query($subjectQuery,$CNX) or die(mysql_error());
while($subjectRow = mysql_fetch_assoc($subjectResult)){
//check if there are children
$checkQuery = "SELECT page.PAGE_TITLE, page.PAGE_ID, page.PAGE_FILE_NAME, page.NEXT_PAGE, page.PARENT_PAGE, ballet.BALLET_TITLE, person.LAST_NAME FROM page LEFT JOIN ballet ON ballet.BALLET_ID = page.BALLET_ID LEFT JOIN person ON person.PERSON_ID = page.PERSON_ID WHERE PARENT_PAGE = ".$subjectRow["PAGE_ID"]." ORDER BY person.LAST_NAME,ballet.BALLET_TITLE";

// $checkQuery = "SELECT page.PAGE_TITLE, page.PAGE_ID, page.PAGE_FILE_NAME, page.NEXT_PAGE, page.PARENT_PAGE FROM page WHERE PARENT_PAGE = ".$subjectRow["PAGE_ID"]." ORDER BY PAGE_TITLE";
$checkResult = mysql_query($checkQuery,$CNX) or die(mysql_error());
if( mysql_num_rows($checkResult) > 0 ){
make_menu($subjectRow["PAGE_ID"], $CNX, $page, &$opener,&$subMenu);

if ($subjectRow["PAGE_ID"] == $page or $page == 53 or $page == 10) {
$opener = "open";
}
echo '<li class="';
echo $opener; // this is where I need to have the variable already set
echo '"><a href="#" class="icon" onclick="return door(this);"></a>'.'<a href="'.$subjectRow["PAGE_FILE_NAME"].'" class="parent">'.$subjectRow["PAGE_TITLE"]."</a>\n";
echo '<ul class="item">'."\n";
echo $subMenu."</ul></li>\n";
$subMenu = NULL;
$opener = "closed";

} else {
// $opener shoule be set in this if...else statement
if ($subjectRow["PAGE_ID"] == $page) {
$subMenu = $subMenu.'<li><a href="'.$subjectRow["PAGE_FILE_NAME"].'" class="parent">'.$subjectRow["PAGE_TITLE"]."</a></li>\n";
$opener = "open";
} else {
$subMenu = $subMenu.'<li><a href="'.$subjectRow["PAGE_FILE_NAME"].'">'.$subjectRow["PAGE_TITLE"]."</a></li>\n";
}

}



//reset child checking query and result to nothing
mysql_free_result($checkResult);
$checkQuery = NULL;
} // end the while loop



//echo $theString;
$theString = NULL;
return ;
mysql_free_result($subjectResult);
} // end make_menu function

function menu_maker($level,$CNX,$page) {

echo '<ul id="menuTree">'."\n";
if ($page == 53) {
echo '<li class="announceheading">Encyclopedia:</li>'."\n";
} elseif ($page == 10) {
echo '<li class="announceheading">Studio to Stage:</li>'."\n";
}

$subMenu=NULL;
$opener = "closed";
make_menu($level,$CNX,$page,$opener,$subMenu);

echo "</ul>";

} // end menu_maker function

?>


Enjoy,

John.

gsnedders
Oct 2nd, 2004, 10:15 AM
and what do you have in the database? What goes where?

AaronW
Oct 2nd, 2004, 01:40 PM
The recursion method, while it does work, invovles a potentially HUGE number of queries. I wrote a tree menu last year and, for a while, used this same method. Eventually, I decided there's gotta be a better solution...

And for me, I used a tree/branch naming method for my ids.



id | tree | category
+---+------+---------+
1 | 1 | animals
2 | 1.1 | cats
3 | 1.2 | dogs
4 | 1.3 | chickens
5 | 2 | countries
6 | 2.1 | Canada
7 | 2.2 | America


Something to that effect. Then you only query once, and loop through the array (with recursion, still) and explode () the tree field, assign children to parents, and voila.

Just a suggestion for future versions ;)

Antoniohawk
Oct 3rd, 2004, 02:28 AM
I don't know much about php so I can't really comment on the code, but it looks good to me. :)

johnnyb
Oct 3rd, 2004, 07:07 AM
Aaron - I know it invovles a potentially HUGE number of queries, that's why I only use it to write static pages, (well, sort of static, they're still PHP but the menu is static).

The database table that we're querying has stuff like what to name the file, META tag info, title tag info, etc. It also has relationships to other tables which give all the information needed to make pages in my CMS.

John

AaronW
Oct 3rd, 2004, 12:43 PM
But why can't you fetch all the fields, all relevant rows, from all relevant tables in ONE query and use that single result set to step through and build the tree? I' quite sure you wouldn't lose any functionality...

I guess if you're sure you would, I'm just missing something. Just hoping someone who isn't using the PHP inside your CMS will write it up the tree way, or at least cache the output.

Antoniohawk
Oct 3rd, 2004, 06:34 PM
Since I need to learn php anyway, maybe this will be a good way to do so. Expect to see the script in a couple of years. ;)

gsnedders
Oct 3rd, 2004, 07:34 PM
I only started in February... Well, I started XHTML, CSS and PHP :D

cbw
Oct 27th, 2004, 10:29 PM
I found a nice way to get related MySQL data for this kind of tree at http://www.sitepoint.com/forums/showthread.php?p=975494

It's not really recursion, but it gets the job done, and produces a nice table of related data, with null values indicating dead ends.

My problem now is writing the algorithm in PHP to put the closing </li> and </ul> tags in the right places--the logic is getting really messy in the first few attempts. If anybody comes up with a set of clean conditionals to handle when each nested group ends I'd really appreciate it.

I want my PHP logic to be as elegant as the JS tree that it supports :confused:

gsnedders
Oct 28th, 2004, 02:17 PM
Works in Mac/Camino.

canadianjameson
Nov 2nd, 2004, 03:14 AM
can someone post the final version of the tree (somewhere i can DL it?)

Thanks
-- MEE!

Antoniohawk
Nov 2nd, 2004, 01:45 PM
The html/javascript/css version? Or the one that utilizes php and the mySQL database?

canadianjameson
Nov 4th, 2004, 02:08 AM
i was thinking the html js css one, but the other one would be nice too :)

Antoniohawk
Nov 6th, 2004, 11:42 PM
One sec and I'll zip it up for ya.

cbw
Nov 8th, 2004, 03:32 PM
could you zip up the php/MySQL part, too? That'd be great. :thumbsup:

Antoniohawk
Nov 8th, 2004, 09:16 PM
I don't have that code, but if you look a page back, someone posted some. I have no ties to it so you'll have to direct all questions to that specific author. :)

cbw
Nov 9th, 2004, 05:37 PM
Doh!

As often as I tell my users to read the effing manual, you'd think I'd have the sense to look through all the posts before asking. sorry.

pardicity3
Nov 16th, 2004, 06:08 PM
i guess this might be a little dated now, but just read through this thread and the menu seems really nifty - i dont suppose you wrote some sort of php script to build this from a text file or something?

Makes menu updating or similar a sinch. (sp?)
I just read this post for the first time yesterday and I quite liked your idea ReadMe. So, I whipped up a little script that should do just what you are looking for (without the use of MySQL). Basically you just create a menu file using tabs to denote different levels, and then you include the .php file I made wherever you want your menu to appear:



Menu.txt
item1 item1URL
item1.1 item1.1URL
item1.2 item1.2URL
item1.2.1 item1.2.1URL


HTML
<?php

$filename = "/path/to/Menu.txt";
$allOpen = -1;
$openChar = "%"; //can only be ONE character
include("/path/to/createMenu.php");

?>


The variables $allOpen and $openChar are explained in the readmen file I attached to this post. Essentially though if you set $allOpen to -1 the script will automatically set to open all items with itemname's ending in the character given to $openChar. If an item's name does not end in the $openChar it is closed. If $allOpen = 0, all items are closed and if $allOpen = 1, all items are opened.

Hopefully I didn't overcomplicate this at all. I attached .zip file with all the contents you will need for installation. Good Luck!

send2bill
Jan 12th, 2005, 06:43 PM
i am a beginner. i have a html page. i have a list of links that would look neato keen in a tree. i read every page of thread but didnt' see how to put all this into a web page. probably too basic for the audience.
so i displayed the example and looked at the source. saw lots of 'ul' and 'li' tags...so, what does the .js do if you've already put stuff in lists?
how do I look at the .js file or do I not need to?

so far my web page looks like this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>pearl test </title>
<meta name="description" content="">
<meta name="keywords" content="">
</head>
<body bgcolor="#FFFFFF" text="#000000" link="#0000FF" vlink="#FF00FF" alink="#FF0000">


</body>
</html>

Antoniohawk
Jan 12th, 2005, 10:14 PM
Use the following code and then just grab the css and javascript files from the zip on some page around here. You don't really need to do anything with the js file, but you can look at it if you want by downloading the aforementioned zip file. The purpose of the javascript is to tie the action of opening and closing the different "branches" of the tree to the appropriate css to do so.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>pearl test </title>
<meta name="description" content="">
<meta name="keywords" content="">

<link href="wishlist2.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="linkMenu.js"></script>

</head>
<body bgcolor="#FFFFFF" text="#000000" link="#0000FF" vlink="#FF00FF" alink="#FF0000">

<ul id="menuTree">
<li class="open"><a href="#" class="parent" onclick="return door(this);">Wishlist</a>
<ul>
<li class="open"><a href="#" class="sub" onclick="return door(this);">Books</a>
<ul class="item">
<li><a href="http://www.oreilly.com/catalog/googlehks/index.html">101 Google Hacks <span class="author">by Tara Calishain, Rael Dornfest</span></a></li>
<li><a href="http://www.amazon.com/exec/obidos/tg/detail/-/0140291873/104-9591490-2899969">Syrup <span class="author">by Max Barry</span></a></li>

<li><a href="http://www.amazon.com/exec/obidos/tg/detail/-/0066214130/002-7784712-5624040">State of Fear <span class="author">by Michael Crichton</span></a></li>
<li><a href="http://www.amazon.com/exec/obidos/tg/detail/-/0553804146/002-7784712-5624040">Life Expectancy <span class="author">by Dean Koontz</span></a></li>
</ul>
</li>
<li class="open"><a href="#" class="sub" onclick="return door(this);">Music</a>
<ul class="item">

<li class="open"><a href="#" class="sub" onclick="return door(this);">CDs</a>
<ul class="item">
<li><a href="http://www.amazon.com/exec/obidos/tg/detail/-/B00004ZBEG/qid=1086053620/sr=8-1/ref=pd_ka_1/102-9923199-8427368">Stephen Lynch - A Little Bit Special</a></li>
<li><a href="http://www.amazon.com/exec/obidos/tg/detail/-/B00007EL9P/qid=1086053894/sr=8-2/ref=pd_ka_2/102-9923199-8427368">Stephen Lynch - Superhero</a></li>
<li><a href="http://www.amazon.com/exec/obidos/ASIN/B00028HBN4/qid=1088018737/sr=ka-2/ref=pd_ka_2/102-0551188-6434543">Earshot - Letting Go</a></li>
<li><a href="http://www.amazon.com/exec/obidos/ASIN/B00004NRWH/qid=1088923274/sr=2-3/ref=sr_2_3/103-3117648-6503854">Nickelback - The State</a></li>

<li><a href="http://www.amazon.com/exec/obidos/tg/detail/-/B00005Q6IA/qid=1091249835/sr=8-2/ref=pd_ka_2/102-0413697-5076923">Default - Fallout</a></li>
<li><a href="http://www.amazon.com/exec/obidos/tg/detail/-/B00008OWZG/qid=1093046429/sr=8-1/ref=pd_ka_1/103-2471198-4667800">Metallica - St. Anger</a></li>
<li><a href="http://www.amazon.com/exec/obidos/tg/detail/-/B0001EKGHC/qid=1093197403/sr=8-1/ref=pd_ka_1/104-7509694-5418343">Soil - Redefine</a></li>
<li><a href="http://www.amazon.com/exec/obidos/tg/detail/-/B0002TLJEK/qid=1094924782/sr=8-1/ref=pd_cps_1/102-6912170-5609736">Papa Roach - Getting Away With Murder</a></li>
<li><a href="http://www.amazon.com/exec/obidos/tg/detail/-/B0002IU988/002-0744771-7592833">Alter Bridge - One Day Remains</a></li>
<li><a href="http://www.amazon.com/exec/obidos/tg/detail/-/B00005A7TW/102-2203873-7165723">Alien Ant Farm - ANThology</a></li>

</ul>
</li>
<li class="open"><a href="#" class="sub" onclick="return door(this);">Concerts</a>
<ul class="item">
<li></li>
</ul>
</li>
<li class="open"><a href="#" class="sub" onclick="return door(this);">Hardware</a>

<ul class="item">
<li><a href="http://www.radioshack.com/product.asp?catalog%5Fname=CTLG&amp;product%5Fid=42-2551">Y-Adapter Audio Cable</a></li>
<li><a href="http://www.griffintechnology.com/products/radioshark/">radioSHARK</a></li>
<li><a href="http://store.apple.com/1-800-MY-APPLE/WebObjects/AppleStore.woa/71802/wo/S71tipQM1szM2x5FAXjojKhjBGR/1.0.0.11.1.0.6.9.21.0.1.1.1.1.1.1.0.3">iPod Dock</a></li>
</ul>
</li>
</ul>

</li>
<li class="open"><a href="#" class="sub" onclick="return door(this);">Computer Related</a>
<ul class="item">
<li></li>
</ul>
</li>
<li class="open"><a href="#" class="sub" onclick="return door(this);">Clothes</a>
<ul class="item">

<li><a href="http://stores.musictoday.com/store/product.asp?dept%5Fid=1853&amp;pf%5Fid=E2CT06&amp;band%5Fid=585&amp;sfid=2">XL Evanescence T-shirt</a></li>
<li><a href="http://www.thinkgeek.com/tshirts/frustrations/3239/">XL RTFM T-Shirt</a></li>
<li><a href="http://rockmerchuniverse.com/breaking_benjamin_black_with_red_celtic_t_shirt.html">XL Black Breaking Benjamin T-Shirt</a></li>
<li><a href="http://www.geekt-shirts.com/details.asp?affID=&amp;genreID=&amp;catID=2&amp;productID=365">XL Hitchhiker's Guide to the Galaxy Hoodie</a></li>
</ul>
</li>
<li class="open"><a href="#" class="sub" onclick="return door(this);">Toys</a>

<ul class="item">
<li><a href="http://shop.lego.com/product.asp?p=10030&amp;cn=4&amp;d=5&amp;t=3">Imperial Star Destroyer</a></li>
</ul>
</li>
<li class="open"><a href="#" class="sub" onclick="return door(this);">Food</a>
<ul class="item">
<li><a href="http://info.combos.com/combos/pep_pizzacracker.html">Pepperoni Pizza Combos (not Pizzeria Pretzel)</a></li>

<li><a href="http://www.hottamales.com/hot_tamales/hot_tamales.php">Hot Tamales</a></li>
<li><a href="http://shop.store.yahoo.com/drsoda/pepominjumli.html">Pep-O-Mints</a></li>
</ul>
</li>
<li class="open"><a href="#" class="sub" onclick="return door(this);">Misc.</a>
<ul class="item">
<li>Cold Hard Cash! (or <a href="https://www.paypal.com/xclick/[email protected]">Paypal</a>)</li>

<li><a href="http://www.thinkgeek.com/cubegoodies/mugs/299a/">RTFM Mug</a></li>
<li><a href="http://www.thinkgeek.com/cubegoodies/mugs/366f/">WTF? Mug</a></li>
<li><a href="http://www.thinkgeek.com/cubegoodies/mugs/299a/">STFU Mug</a></li>
<li><a href="http://www.mozillastore.com/products/stuff/mug/">Firefox Mug</a></li>
<li><a href="http://www.thinkgeek.com/cubegoodies/posters/despair/32cc/zoom/">Procrastination Poster</a></li>
<li><a href="http://www.artsuppliesonline.com/catalog.cfm?cata_id=5421">Good quality Stainless Steel Ruler with Metric and Standard</a></li>

<li><a href="http://www.harborfreight.com/cpi/ctaf/Displayitem.taf?itemnumber=39103">Bending Brake</a> $29.98 w/ shipping</li>
</ul>
</li>
</ul>
</li>
<li class="closed"><a href="#" class="parent" onclick="return door(this);">Things to Come</a>
<ul class="item">

<li>Seinfeld The Complete Collection DVD</li>
<li>Honda Prelude - Black, Vtec, Automatic Transmission</li>
<li>Toyota 4Runner - Black, '97</li>
<li>Gibson SG - Black, Dual Humbuckers</li>
</ul>
</li>
<li class="closed"><a href="#" class="parent" onclick="return door(this);">Pending Review</a>

<ul class="item">
<li><a href="http://www.amazon.com/exec/obidos/tg/detail/-/B00004UALN/qid=1085896210/sr=8-2/ref=pd_ka_2/103-0750925-2403801">Bush - The Science Of Things</a></li>
<li><a href="http://www.amazon.com/exec/obidos/tg/detail/-/B00002EITV/qid=1085896210/sr=8-3/ref=pd_ka_3/103-0750925-2403801">Bush - Razorblade Suitcase</a></li>
<li>Hands-free headset for home phone</li>
<li><a href="http://www.oreilly.com/catalog/hardwarehks/">Hardware Hacking Projects for Geeks <span class="author">by Scott Fullam</span></a></li>
<li><a href="http://www.oreilly.com/catalog/winxphks/">Windows XP Hacks <span class="author">by Preston Gralla</span></a></li>

<li><a href="http://www.homedepot.com/prel80/HDUS/EN_US/diy_main/[email protected]@@@[email protected]@@@&amp;BV_EngineID=cccgadcljmhfkklcgelceffdfgidgmk.0&amp; CNTTYPE=PROD_META&amp;CNTKEY=Products_2/Safety%20%26%20Security&amp;MID=9876&amp;pos=n25">Protective Ear Muffs</a></li>
<li><a href="http://www.amazon.com/exec/obidos/tg/detail/-/0764569848/002-0463523-0993614?v=glance">iPod Hacks <span class="author">by Scott Knaster</span></a></li>
<li>1 gigabyte Corsair Memory</li>
<li>Aluminum Modders Mesh</li>
</ul>
</li>

<li class="closed"><a href="#" class="parent" onclick="return door(this);">Home Theater PC (HTPC)</a>
<ul class="item">
<li>2x <a href="http://www.amazon.com/exec/obidos/tg/detail/-/B00006HWX4/qid=1088545727/sr=8-1/ref=sr_8_xs_ap_i1_xgl23/102-0855537-5160150?v=glance&amp;s=electronics&amp;n=507846">Hauppauge WinTV PVR 250</a> $133.99 each</li>
<li><a href="http://www.newegg.com/app/viewProductDesc.asp?description=14-102-345&amp;depa=1">ATI RADEON 9600</a> $171.00 - pending</li>
<li><a href="http://store.westerndigital.com/product.asp?sku=2328174">Western Digital 250gb HDD</a> $199.99</li>

<li><a href="http://www.amazon.com/exec/obidos/tg/detail/-/B00007L3MW/qid=1088555806/sr=8-3/ref=sr_8_xs_ap_i3_xgl23/103-9219466-3503803?v=glance&amp;s=electronics&amp;n=507846">Gyration Ultra Mouse and Keyboard Suite</a> $99.99</li>
<li>AMD Athlon XP 2600+ Processor ~$75</li>
<li><a href="http://www.newegg.com/app/ViewProductDesc.asp?description=13-131-209&amp;depa=0">ASUS 24-pin DVI connector for LCD monitor</a> $18.99</li>
</ul>
</li>

</ul>

</body>
</html>

timnicebutdim
May 28th, 2005, 08:07 PM
Great tree... couple of things,

It does not seem to currently be xhtml compliant ( http://validator.w3.org/check?uri=http%3A%2F%2Fnull.ithium.net%2Fandrew%2FNewGenMenuTree%2Fwishlist2.html )

Anyone know of way of fixing that?

Another thing that would be really great to add would be to allow the menu to use a cookie so that it will keep the menu state opened from page to page and to have a graphic showing which page you are on - like this menu - http://www.cirkadia.com/iNavigateProductOverview.html .

The problem with inavigate is that the code is messy and its very slow to render.

If this tree could be xhtml compliant and work similar to inavigate - it would be the best on the net in my opinion.

gsnedders
May 28th, 2005, 09:12 PM
It is XHTML complient - It's just Andrew's wishlist, he needs to escape the &s

timnicebutdim
May 30th, 2005, 09:00 PM
Anyone know of a way a cookie could be used to make the menu items state preserve from one page to the next?

Also i would like to put a graphic or different css on the menu indicating the page someone is at.

Is that possible?

Antoniohawk
Jan 6th, 2006, 04:03 AM
Updated link: [http://www.alexisbarbosa.com/andrew/wishlist2.html]

I removed the plus, minus, and item images because I didn't like the look anymore. I might add them in later, and probably should for usability's sake.

vasam
Jan 11th, 2006, 03:31 PM
wow, works great!

canadianjameson
Jan 11th, 2006, 04:01 PM
still lovin' the tree :D

i thought of a happy comprimize with the images. provide them at the bottom of the page and comment out their use. That way if a users wishes to have them they can, and if they don't then they need not.

Antoniohawk
Jan 12th, 2006, 01:33 AM
That would work. I'm thinking of just redesigning them. Not quite the graphic designer, but I'm sure that I can think of something.

canadianjameson
Jan 12th, 2006, 01:42 AM
well, keep us posted. I haven't had a use for the CSS tree yet but when i do i know where i'll come.

firepages
Jan 22nd, 2006, 07:13 AM
Hey , I remember seeing this script a while back and saying ... I am gonna use that one day..

Well that day has come !

and the link is broken :(

Antoniohawk
Jan 28th, 2006, 09:11 PM
Sorry Firepages.

Updated link: [http://andrew.dotfive.com/wishlist2.html]