Embedding nav within a table

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

Embedding nav within a table

Poster: Kristamk2447
Dated: Friday December 30 2005 - 20:18:18 GMT

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:

_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()

moving

Poster: Migru
Dated: Friday December 30 2005 - 22:10:53 GMT

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://www.milonic.com/menusample11.php
http://www.milonic.com/forum/viewforum.php?f=14

Poster: Ruth
Dated: Friday December 30 2005 - 23:15:53 GMT

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

Poster: John
Dated: Tuesday January 3 2006 - 1:36:23 GMT

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:

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

Poster: kevin3442
Dated: Wednesday January 4 2006 - 5:38:57 GMT

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:

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:

with

Code:

<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

Embedded menu with submenu that "tracks" with main

Poster: Kristamk2447
Dated: Wednesday January 4 2006 - 18:38:38 GMT

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

Embedded menu with sub that adjusts when page resized - code

Poster: Kristamk2447
Dated: Wednesday January 4 2006 - 18:40:36 GMT

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

Poster: John
Dated: Wednesday January 4 2006 - 18:42:47 GMT

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.

Collaps-menu in a table and IFRAME - sample

Poster: Migru
Dated: Wednesday January 4 2006 - 23:28:58 GMT

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

treemenu

Poster: Migru
Dated: Thursday January 5 2006 - 11:36:40 GMT

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

Poster: Ruth
Dated: Thursday January 5 2006 - 14:29:15 GMT

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://www.milonic.com/menusample2.php

Ruth

Collapsing and Cascading embedded menus

Poster: Kristamk2447
Dated: Thursday January 5 2006 - 17:35:55 GMT

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

collapsable menu in a table

Poster: Migru
Dated: Friday January 6 2006 - 20:20:44 GMT

Hi

Pls see my post of January 6

here:
http://www.milonic.com/forum/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