Embedding nav within a table

Having problems with DHTML Menu? There is usually somebody here who knows the answer.
Post Reply
Kristamk2447
Beginner
Beginner
Posts: 8
Joined: Fri Dec 30, 2005 9:02 pm

Embedding nav within a table

Post by Kristamk2447 »

Hi, Thanks in advance to anyone who can provide assistance. I am very new to manipulating scripts.
I'd like to embed my nav inside a table so that it moves with the page. I have tried unsucessfully so far. Here is the test link,
http://www.newmanimages.com/2/index2.html

I would like the nav to stay in the table below the logo and move with the page. Any help would be greatly appreciated.

I also and wanting to know how to use this nav with iframes.

Thank you,

Krista

Code: Select all

_scrollAmount=5      // Used for Netscape 4 scrolling
_scrollDelay=10	     // Used for Netscape 4 scrolling

_menuCloseDelay=500  // The delay for menus to remain visible on mouse off
_menuOpenDelay=150   // The delay for opening menus on mouse over
_subOffsetTop=0;     // Sub menu offset Top position
_subOffsetLeft=0;  // Sub menu offset Left position

Goverfilter="Alpha(style=1,opacity=25,finishOpacity=100,startX=0,
finishX=100,startY=100,finishY=0);Fade(duration=0.2);
Shadow(color='#777777', Direction=135, 
Strength=5)"
Goverfilter="Fade(duration=0.2);Alpha(opacity=90);Shadow(color='#777777', 
Direction=135, Strength=5)"
Goutfilter="randomdissolve(duration=0.3)"
Goutfilter=""
Goverfilter=""

AllMargin=0

treeOffset=0;  // Used to set the offset of sub menus
singleMasterMenu=true // Informs the system to on;y have one menu open at a time

with(tstyle1=new mm_style()){
offcolor = "#999999";
onbgcolor = "#000000";
oncolor = "#CDCDCD";
offbgcolor="#000000"
ondecoration="underline"
borderstyle = "solid";
subimage=""
onsubimage=""
bordercolor="000000"
borderwidth=1
padding = 4
fontsize = "10px";
fontfamily = "arial, verdana, tahoma";    
subimageposition="top right" ;
separatorsize=1
separatorcolor="#000000";
image="trans.gif"
subimagepadding=3
imagepadding=2
itemwidth=140
}


sub1Style=new copyOf(tstyle1)
sub1Style.offcolor = "#999999";
sub1Style.offbgcolor="#000000"
sub1Style.separatorcolor="#000000"

sub2Style=new copyOf(tstyle1)
sub2Style.offcolor = "#999999";
sub2Style.offbgcolor="#000000"
sub2Style.separatorcolor="#000000"


tstyle1.clickcolor="#CCCCCC"
tstyle1.clickbgcolor="#000000"


with(new menuname("main Tree Menu")){
top=70
left=70
style = tstyle1;
alwaysvisible = 1;
itemwidth=150
//margin=AllMargin
//position="relative"
aI("text=Ashland;showmenu=1;type=tree;
image=http://www.newmanimages.com/2/nav/menu_off.gif;
overimage=http://www.newmanimages.com/2/nav/menu_on.gif");
aI("text=Ashland People;showmenu=2;type=tree;
image=http://www.newmanimages.com/2/nav/menu_off.gif;
overimage=http://www.newmanimages.com/2/nav/menu_on.gif");
aI("text=Oregon;showmenu=3;type=tree;
image=http://www.newmanimages.com/2/nav/menu_off.gif;
overimage=http://www.newmanimages.com/2/nav/menu_on.gif");
aI("text=The Coast;showmenu=4;type=tree;
image=http://www.newmanimages.com/2/nav/menu_off.gif;
overimage=http://www.newmanimages.com/2/nav/menu_on.gif");
aI("text=California;showmenu=5;type=tree;
image=http://www.newmanimages.com/2/nav/menu_off.gif;
overimage=http://www.newmanimages.com/2/nav/menu_on.gif");
aI("text=Featured Galleries;showmenu=6;type=tree;
image=http://www.newmanimages.com/2/nav/menu_off.gif;
overimage=http://www.newmanimages.com/2/nav/menu_on.gif");

}

	with(new menuname("1")){
	style = sub1Style;
	margin=AllMargin
	aI("text=Downtown Scenics;url=http://newmanimages.com");
	aI("text=Ashland Springs;url=http://newmanimages.com");
	aI("text=Festival of Light;url=http://newmanimages.com");
	aI("text=Lithia Park;url=http://newmanimages.com");
	aI("text=Ashland Creek;url=http://newmanimages.com");
	aI("text=Ashland Closeups;url=http://newmanimages.com");
    aI("text=Ashland Outskirts;url=http://newmanimages.com");
	aI("text=Emigrant Lake;url=http://newmanimages.com");
	aI("text=Mt. Ashland;url=http://newmanimages.com");
	}


	with(new menuname("2")){
	style = sub1Style;
	margin=AllMargin
	aI("text=Random Humans;url=http://newmanimages.com");
	aI("text=Musicians;url=http://newmanimages.com");
	aI("text=Demonstrations;url=http://newmanimages.com");
	aI("text=Fourth of July;url=http://newmanimages.com");
	aI("text=Halloween;url=http://newmanimages.com");
	}

	with(new menuname("3")){
	style = sub2Style;
	margin=AllMargin
	aI("text=Table Rocks;url=http://newmanimages.com");
	aI("text=Crater Lake;url=http://newmanimages.com");
	aI("text=Rivers and Lakes;url=http://newmanimages.com");
	aI("text=Towns and Farms;url=http://newmanimages.com");
	aI("text=Portland;url=http://newmanimages.com");

	}

	with(new menuname("4")){
	style = sub1Style;
	margin=AllMargin
	aI("text=Sunsets and Sunrises;url=http://newmanimages.com");
	aI("text=Towns and Beaches;url=http://newmanimages.com");

}

	with(new menuname("5")){
	style = sub1Style;
	margin=AllMargin
	aI("text=Mt. Shasta;url=http://newmanimages.com");
    aI("text=Yosemite National Park;url=http://newmanimages.com");
	aI("text=More from California;url=http://newmanimages.com");

}

	with(new menuname("6")){
	style = sub1Style;
	margin=AllMargin
	aI("text=Best of the Best;url=http://newmanimages.com");
	aI("text=Trails;url=http://newmanimages.com");
	aI("text=Signs;url=http://newmanimages.com");
	aI("text=People;url=http://newmanimages.com");

	}

drawMenus()
Migru
Milonic Guru
Milonic Guru
Posts: 669
Joined: Tue Nov 01, 2005 8:22 pm
Location: Hamburg - Germany
Contact:

moving

Post by Migru »

Hi

Moving with the page ?
It is moving with the page.
I have resized it, scroll bars come up, and everything moves.

Michael

iframes Please see
http://milonic.com/menusample11.php
viewforum.php?f=14
User avatar
Ruth
 Team
 Team
Posts: 8763
Joined: Thu May 15, 2003 5:02 am
Location: Yucaipa, CA
Contact:

Post by Ruth »

If you want it in the table, you have to place it based on the sample that Michael provided. Otherwise, you have it set to be always at 70px from the top and 70px from the left. There is also a link below my name for table information.

Ruth
User avatar
John
 Team
 Team
Posts: 5967
Joined: Sun May 19, 2002 8:23 pm
Location: Phoenix, AZ
Contact:

Post by John »

I've got a couple other problems here.

1. You're about 10 levels down in your menu version. Current is 5.738, you're running 5.729. You'll need to be current for further help.

2. You have defined Goverfilter= 3 times in your style, and Goutfilter= twice. The proper syntax is something like this...

Code: Select all

outfilter="randomdissolve(duration=0.3)";
overfilter="Fade(duration=0.2);Alpha(opacity=90);Shadow(color=#777777', Direction=135, Strength=3)";
John
User avatar
kevin3442
Milonic God
Milonic God
Posts: 2460
Joined: Sat Sep 07, 2002 12:09 am
Location: Lincoln, NE
Contact:

Post by kevin3442 »

EDIT: Well... some bad news. I was trying the solution below, and it seemed to work... the main menu tracks nicely with the table. But then I noticed that if you resize the window while a submenu is open, the main menu remains relative to the table, but the submenu's position stays relative to the window. I tried two other solutions, neither of which worked. 1. Put all of the menu code into the table cell -- usually a bad idea --, and 2. Left the menu code external to the table (as it originally was) and tried to position it with screenposition="center" combined with a negative left offset. The submenus still don't track, even with the latest release (5.738). The only possibility I see is to manuall set the horizontal position of each submenu relative to center, but that'd be a big pain. Maybe there's a better solution in the works... I don't know... been away from the forums for a long time. I put this edit up here, Krista, so that you'd read it before attempting the "solution" below. You can still try if you'd like. Maybe we can make an onresize handler that would collapse the menu on resize, so that the submenu positioning problem would be masked for the time being; not elegant, but it might be a good bandaid for now. Alternatively, have you considered using a regular, vertical cascading menu instead of the tree?

<hr>

Kristamk2447 wrote:I would like the nav to stay in the table below the logo and move with the page
Migru wrote:Moving with the page ?
It is moving with the page.
I have resized it, scroll bars come up, and everything moves.
While it's true that the menu moves as you resize the browser window, it always remains 70px from the top and right; i.e., it is positioned relative to the page origin. I think Krista means that as the contents of the page shift on resize (to recenter), the menu should move so that it remains in the same position relative to the iframe and other content in the tables. Embedding the main menu in the table would achieve that effect.

I've never tried it with a tree menu, but I imagine that the approach would be the same as embedding a cascadig menu in a table cell. You actually place only the main menu in the table cell. All the rest goes in your collapse_data.js file, just as you have it. Specifically:

(1) Remove all of your "main Tree Menu" code from your collapse_menu.js file. So all of the following comes out.

Code: Select all

with(new menuname("main Tree Menu")){
top=70
left=70
style = tstyle1;
alwaysvisible = 1;
itemwidth=150
//margin=AllMargin
//position="relative"
aI("text=Ashland;showmenu=1;type=tree;image=http://www.newmanimages.com/2/nav/menu_off.gif;overimage=http://www.newmanimages.com/2/nav/menu_on.gif");
aI("text=Ashland People;showmenu=2;type=tree;image=http://www.newmanimages.com/2/nav/menu_off.gif;overimage=http://www.newmanimages.com/2/nav/menu_on.gif");
aI("text=Oregon;showmenu=3;type=tree;image=http://www.newmanimages.com/2/nav/menu_off.gif;overimage=http://www.newmanimages.com/2/nav/menu_on.gif");
aI("text=The Coast;showmenu=4;type=tree;image=http://www.newmanimages.com/2/nav/menu_off.gif;overimage=http://www.newmanimages.com/2/nav/menu_on.gif");
aI("text=California;showmenu=5;type=tree;image=http://www.newmanimages.com/2/nav/menu_off.gif;overimage=http://www.newmanimages.com/2/nav/menu_on.gif");
aI("text=Featured Galleries;showmenu=6;type=tree;image=http://www.newmanimages.com/2/nav/menu_off.gif;overimage=http://www.newmanimages.com/2/nav/menu_on.gif");
}
(2) Now place the code for the "main Tree Menu" inside of inline <script> tags, in the table cell where you want the menu. You will need to modify the code for the menu as follows:

(a) Remove the top=70 and left=70 properties from the code. You won't need those, since the menu placement will be relative to the table cell.

(b) uncomment position="relative" to activate that property; you'll need it.

(c) Add a call to drawMenus() at the end of the inline javascript code.

So, again to be specific, in your index2.html file, replace

Code: Select all

<td width="202" align="left" valign="top">&nbsp;</td>
with

Code: Select all

<td width="202" align="left" valign="top">
<script>
with(new menuname("main Tree Menu")){
position="relative";
style = tstyle1;
alwaysvisible = 1;
itemwidth=150
//margin=AllMargin
aI("text=Ashland;showmenu=1;type=tree;image=http://www.newmanimages.com/2/nav/menu_off.gif;overimage=http://www.newmanimages.com/2/nav/menu_on.gif");
aI("text=Ashland People;showmenu=2;type=tree;image=http://www.newmanimages.com/2/nav/menu_off.gif;overimage=http://www.newmanimages.com/2/nav/menu_on.gif");
aI("text=Oregon;showmenu=3;type=tree;image=http://www.newmanimages.com/2/nav/menu_off.gif;overimage=http://www.newmanimages.com/2/nav/menu_on.gif");
aI("text=The Coast;showmenu=4;type=tree;image=http://www.newmanimages.com/2/nav/menu_off.gif;overimage=http://www.newmanimages.com/2/nav/menu_on.gif");
aI("text=California;showmenu=5;type=tree;image=http://www.newmanimages.com/2/nav/menu_off.gif;overimage=http://www.newmanimages.com/2/nav/menu_on.gif");
aI("text=Featured Galleries;showmenu=6;type=tree;image=http://www.newmanimages.com/2/nav/menu_off.gif;overimage=http://www.newmanimages.com/2/nav/menu_on.gif");
}
drawMenus();
</script>
</td>
You should be able to paste the above code block directly into your page code. Let us know the results, OK?

Hope that helps,

Kevin
Kristamk2447
Beginner
Beginner
Posts: 8
Joined: Fri Dec 30, 2005 9:02 pm

Embedded menu with submenu that "tracks" with main

Post by Kristamk2447 »

Thank you Ruth, John and Kevin, I greatly appreciate your input.

I have implemented Kevin's suggestion. I Remove all of my "main Tree Menu" code from your collapse_menu.js file. As he mentioned the submenu does not "track" or move with the main menu when the page is resized.

You mentioned, "maybe we can make an onresize handler that would collapse the menu on resize, so that the submenu positioning problem would be masked for the time being; not elegant, but it might be a good bandaid for now." Is this a possibility?

do you have a sample link of a "regular, vertical cascading menu" that I could look at?

Thanks again, this is my first time with Milonic!

Krista
Kristamk2447
Beginner
Beginner
Posts: 8
Joined: Fri Dec 30, 2005 9:02 pm

Embedded menu with sub that adjusts when page resized - code

Post by Kristamk2447 »

I should have included the most recent test link,
http://www.newmanimages.com/2/index2.html

Code from collapse_data.js,
function highlightme()
{
_I=_mi[_itemRef];
if(_I[19])_I[7]=_I[19]
if(_I[18])_I[8]=_I[18]
itemOff(_itemRef)
}

_scrollAmount=5 // Used for Netscape 4 scrolling
_scrollDelay=10 // Used for Netscape 4 scrolling

_menuCloseDelay=500 // The delay for menus to remain visible on mouse off
_menuOpenDelay=150 // The delay for opening menus on mouse over
_subOffsetTop=0; // Sub menu offset Top position
_subOffsetLeft=0; // Sub menu offset Left position

outfilter="randomdissolve(duration=0.3)";
overfilter="Fade(duration=0.2);Alpha(opacity=90);Shadow(color=#777777', Direction=135, Strength=3)";

AllMargin=0

treeOffset=0; // Used to set the offset of sub menus
singleMasterMenu=true // Informs the system to on;y have one menu open at a time

with(tstyle1=new mm_style()){
offcolor = "#999999";
onbgcolor = "#000000";
oncolor = "#CDCDCD";
offbgcolor="#000000"
ondecoration="underline"
borderstyle = "solid";
subimage=""
onsubimage=""
bordercolor="000000"
borderwidth=1
padding = 4
fontsize = "10px";
fontfamily = "arial, verdana, tahoma";
subimageposition="top right" ;
separatorsize=1
separatorcolor="#000000";
image="trans.gif"
subimagepadding=3
imagepadding=2
itemwidth=140
}


sub1Style=new copyOf(tstyle1)
sub1Style.offcolor = "#999999";
sub1Style.offbgcolor="#000000"
sub1Style.separatorcolor="#000000"

sub2Style=new copyOf(tstyle1)
sub2Style.offcolor = "#999999";
sub2Style.offbgcolor="#000000"
sub2Style.separatorcolor="#000000"


tstyle1.clickcolor="#CCCCCC"
tstyle1.clickbgcolor="#000000"




with(new menuname("1")){
style = sub1Style;
margin=AllMargin
aI("text=Downtown Scenics;url=gallery1/gallery.html;target=gallery;clickfunction=highlightme();");
aI("text=Ashland Springs;url=gallery1/gallery2.html;target=gallery;clickfunction=highlightme();");
aI("text=Festival of Light;url=http://newmanimages.com");
aI("text=Lithia Park;url=http://newmanimages.com");
aI("text=Ashland Creek;url=http://newmanimages.com");
aI("text=Ashland Closeups;url=http://newmanimages.com");
aI("text=Ashland Outskirts;url=http://newmanimages.com");
aI("text=Emigrant Lake;url=http://newmanimages.com");
aI("text=Mt. Ashland;url=http://newmanimages.com");
}


with(new menuname("2")){
style = sub1Style;
margin=AllMargin
aI("text=Random Humans;url=http://newmanimages.com");
aI("text=Musicians;url=http://newmanimages.com");
aI("text=Demonstrations;url=http://newmanimages.com");
aI("text=Fourth of July;url=http://newmanimages.com");
aI("text=Halloween;url=http://newmanimages.com");
}

with(new menuname("3")){
style = sub2Style;
margin=AllMargin
aI("text=Table Rocks;url=http://newmanimages.com");
aI("text=Crater Lake;url=http://newmanimages.com");
aI("text=Rivers and Lakes;url=http://newmanimages.com");
aI("text=Towns and Farms;url=http://newmanimages.com");
aI("text=Portland;url=http://newmanimages.com");

}

with(new menuname("4")){
style = sub1Style;
margin=AllMargin
aI("text=Sunsets and Sunrises;url=http://newmanimages.com");
aI("text=Towns and Beaches;url=http://newmanimages.com");

}

with(new menuname("5")){
style = sub1Style;
margin=AllMargin
aI("text=Mt. Shasta;url=http://newmanimages.com");
aI("text=Yosemite National Park;url=http://newmanimages.com");
aI("text=More from California;url=http://newmanimages.com");

}

with(new menuname("6")){
style = sub1Style;
margin=AllMargin
aI("text=Best of the Best;url=http://newmanimages.com");
aI("text=Trails;url=http://newmanimages.com");
aI("text=Signs;url=http://newmanimages.com");
aI("text=People;url=http://newmanimages.com");

}

drawMenus()


Thanks!

Krista
User avatar
John
 Team
 Team
Posts: 5967
Joined: Sun May 19, 2002 8:23 pm
Location: Phoenix, AZ
Contact:

Post by John »

Not sure if this is what you're after, but I have a vertical tree at http://www.west.asu.edu/recruitment/. You can follow most of those links and find others.

HTH.
John
Migru
Milonic Guru
Milonic Guru
Posts: 669
Joined: Tue Nov 01, 2005 8:22 pm
Location: Hamburg - Germany
Contact:

Collaps-menu in a table and IFRAME - sample

Post by Migru »

Hi,

made a very basic sample of a vertical collapsible menu in a table, together with an IFRAME addressing a number of files which are opened in the iframe.

The table is centered, which creates a small problem:The left offset of the submenus seems to be different to be adjusted (by 1 px) in IE vs. FF.
Adjustment of the left margin within the window seems not to work (under all circumstances - e.g. window width less than table width - but who is doing that ? - in Opera 8.5. (pls see the .css file "margin")

Michael

It is here: http://www.dhyg.de/testpage1.html
Last edited by Migru on Thu Jan 05, 2006 12:40 pm, edited 1 time in total.
Migru
Milonic Guru
Milonic Guru
Posts: 669
Joined: Tue Nov 01, 2005 8:22 pm
Location: Hamburg - Germany
Contact:

treemenu

Post by Migru »

Hi

tried to place the treemenu in a table like a "normal" vertical relative positioned menu, (...the main menu only..). That did not work. (of course, cannot exclude personal error - errare humanum est).

But - I was unable to get it in operation that way.

Michael
User avatar
Ruth
 Team
 Team
Posts: 8763
Joined: Thu May 15, 2003 5:02 am
Location: Yucaipa, CA
Contact:

Post by Ruth »

What is meant by a regular cascading menu is the regular mouseover menu that comes in the download. If you remove the orientation="horizontal"; from the main menu it will be vertical, the submenus open on mouseover or on click and they do not shift the items down, they open to the side, though you can position them to open elsewhere. This is a plain text vertical menu

http://milonic.com/menusample2.php

Ruth
Kristamk2447
Beginner
Beginner
Posts: 8
Joined: Fri Dec 30, 2005 9:02 pm

Collapsing and Cascading embedded menus

Post by Kristamk2447 »

Migru, Ruth and John,
Thanks for the sample site and explanation. Seriously glad you are involved with helping Milonic users. I will be sure to test your ideas.

Krista
Migru
Milonic Guru
Milonic Guru
Posts: 669
Joined: Tue Nov 01, 2005 8:22 pm
Location: Hamburg - Germany
Contact:

collapsable menu in a table

Post by Migru »

Hi

Pls see my post of January 6

here:
viewtopic. ... 7&start=40

where I have made a proposal for aliasim, using the actual treemenu in an IFRAME in order to keep it somewhere else than at the windows left margin.


Michael
Post Reply