Collapsible Tree Menu

Taken From The Forum:
Forum Topic:
Last Updated: Saturday July 14 2012 - 06:07:48

Collapsible Tree Menu

Poster: nightwing97
Dated: Wednesday April 6 2005 - 21:43:35 BST

Using http://www.milonic.com/treemenu/collapse/ as an example, how/would it be possible to have the page load with "News" expanded?

Poster: Ruth
Dated: Wednesday April 6 2005 - 23:35:17 BST

Download the Milonic Open Menus by Url Bolt-on Module

You would put that last in your menu file calls. That should each submenu on its related page[s] when you get there.

Ruth

Worked but....

Poster: nightwing97
Dated: Monday April 11 2005 - 5:18:14 BST

Thanks Ruth that worked. However, now I have another question. How do you make an expandable section link to another page and still open expanded? openmenusbyurl works fine as long as you dont add a url to an expandable section. Still using http://www.milonic.com/treemenu/collapse/ as an example with the "News" section. Here is the modified collapse_data.js sections:

Code:

with(new menuname("main Tree Menu")){
top=15
left=10
style = tstyle1;
alwaysvisible = 1;
itemwidth=200
//margin=AllMargin
//position="relative"
aI("text=MILONIC;url=http://www.milonic.com;");
aI("text=Home;");
aI("text=News;showmenu=News;type=tree;image=blue_blip.gif;overimage=red_blip.gif;url=index1.htm;");
aI("text=Finance;showmenu=Finance;type=tree;image=blue_blip.gif;overimage=red_blip.gif;");
aI("text=Sports;showmenu=Sports;type=tree;image=blue_blip.gif;overimage=red_blip.gif;");
aI("text=Entertainment;showmenu=Entertainment;type=tree;image=blue_blip.gif;overimage=red_blip.gif;");
aI("text=Music;showmenu=Music;type=tree;image=blue_blip.gif;overimage=red_blip.gif;");
aI("text=Games;");
aI("text=Relationships;");
aI("text=Travel;");
aI("text=Shopping;");
}

   with(new menuname("News")){
   style = sub1Style;
   margin=AllMargin
   aI("text=National;url=#;");
   aI("text=International;url=index2.htm;");
   aI("text=Technology;url=index3.htm");
   aI("text=Politics;url=#");
   aI("text=Campaign 2004;url=#");
   aI("text=Health & Wellness;url=#");
   }

Poster: Ruth
Dated: Monday April 11 2005 - 7:43:39 BST

OK, I don't have the sample to be able to work with it on my desktop. I have a made up sample that I use so I don't have to upload pages constantly to test. So, I'll have to give you directions based on that, not the sample. These are the menus I have set up, they do use the same code and styles.

Code:

with(new menuname("main Tree Menu")){
top=15
left=10
style = tstyle1;
alwaysvisible = 1;
itemwidth=200
//margin=AllMargin
//position="relative"

aI("text=Test Item 1;showmenu=test1;type=tree;image=blue_blip.gif;overimage=red_blip.gif;");
aI("text=Test Item 2;showmenu=test2;type=tree;image=blue_blip.gif; overimage=red_blip.gif;url=index1.htm;"); 
}


   with(new menuname("test1")){
   style = sub1Style;
   margin=AllMargin
   aI("text=Test 1 - 1;url=page1-1.htm;");
aI("text=Test 1 - 2;url=page1-2.htm;");
aI("text=Test 1 - 3;url=page1-3.htm;");
aI("text=Test 1 - 4;url=page1-4.htm;");
}


   with(new menuname("test2")){
   style = sub1Style;
   margin=AllMargin
   aI("text=Index Test;url=index1.htm;");
   aI("text=Test 2 - 1;url=page2-1.htm;");
aI("text=Test 2 - 2;url=page2-2.htm;");
aI("text=Test 2 - 3;url=page2-3.htm;");
aI("text=Test 2 - 4;url=page2-4.htm;");

}

You'll see that in the main menu, Test Item 2 shows the test2 menu and also has the link index1.htm. The link has to be placed in the same menu as the one you want to open when you get to the page. That's the only way I could get it to work. I did test some other things and you can make the aI a header, as long as you have the url=index1.htm; in it. Even though it shouldn't work because it will have type=header. That way you could put something there, some comment or something. Or you could make it type=header and just put an image in the aI string. Something decorative, as long as you have the url property. So,

Code:

aI("text=Welcome to the News Room;url=index1.htm;type=header;");

You could then define the headerbgcolor and headercolor in the tstyle1. Or you could substitute for text= image="whateverimage" and the rest that is in the above.

Ruth

Poster: nightwing97
Dated: Friday April 22 2005 - 17:13:38 BST

I am having 2 other problems:
1. I need to get a sub-menu highlighted when it is clicked. Currently, it's parent stays selected. You can see this at
http://www.phlod.com/habitat/sandbox/ka ... tudent.htm

Student Opportunities is the parent.
Campus Chapters, etc are the children.
When I click on Campus Chapters, I'd like Campus Chapters to be highlighted white and Campus Chapters to go back to the blue.

2. I followed your suggestion for putting in the hidden link in a submenu so that it can open expanded. We are using a one pixel gif instead of text which makes it smaller but now we have a line under the parent menu. See how Student Opportunities has a blue line under it? Any way to get rid of the line?

Thanks for you help!

Poster: Ruth
Dated: Friday April 22 2005 - 22:21:21 BST

The only thing that I can find to get rid of the line, is to eliminate the separatorsize=5; that you have in the style.

As to the highlighting, pagebgcolor will highlight the path you took to get where you are. I don't know of a way to have it only highlight one part of the path.

Perhaps someone else who reads this can help.

Ruth

Poster: Ruth
Dated: Saturday April 23 2005 - 3:15:44 BST

Hello again,

Well, I found out how to fix the image so it will be the down arrow and how to do the color. You need to download the Bolt-on Module changecolorsbyclick.js

Place the call for that just below your openmenusbyurl.js file.

Ruth

Industrial Strength JavaScript and DHTML Menus

Collapsible Tree Menu

Worked but....