Collapsible Tree Menu

[nightwing97]

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

[Ruth]

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

[nightwing97]

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://milonic.com/treemenu/collapse/ as an example with the "News" section. Here is the modified collapse_data.js sections:

Code: Select all

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://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=#");
	}

[Ruth]

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: Select all

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: Select all

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

[nightwing97]

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!

[Ruth]

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

[Ruth]

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