Amazon type menu , how can I do this?

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

Amazon type menu , how can I do this?

Poster: Steve(spt)
Dated: Monday August 22 2005 - 18:52:10 BST

Hi,

Hope someone can advise me on how to do this but first I must try and explaine, so stay with me....

I have the menu code setup and running fine. As an amazon type tab menu with submenus that appear when the tab is selected.
See http://www.jupiter-ace.co.uk.

all is fine when seen on a res of 1280x1024, the submenus fit across the table fine, but when viewed in a res of 800x600 or 1024x800 the submenu bar appears out of the table. So is there a way to make the summenu fix in the table cell no matter what size the screen res is?

or is this not possible?

I hope, I have explained this well? Below is a snip of the menu code with some of the parm settings used.

Code:

_subOffsetLeft=-2;
horizontalMenuDelay=true;


forgetClickValue="true";


with(menuStyle=new mm_style()){
bgimage="tab_on_white.gif";
fontfamily="Verdana, Tahoma, Arial";
fontsize="90%";
fontstyle="normal";
fontweight="bold";
itemheight=10;
itemwidth=80;
offcolor="black";
oncolor="red";
openonclick=1;
subimagepadding=3;
clickbgimage="tab_on_white_bk.gif";
}

with(submenuStyle=new mm_style()){
styleid=1;
align="left";
bgimage="tab_subback_bk.gif";
fontfamily="Verdana, Tahoma, Arial";
fontsize="90%";
fontstyle="normal";
fontweight="bold";
itemheight=8;
offbgcolor="black";
offcolor="#ffffff";
oncolor="red";
ondecoration="underline";
openonclick=1;
padding=6;
separatorimage="tab_subback_sep_a.gif";
separatorsize=3;
}

 
with(milonic=new menuname("home")){
menualign="left";
menuwidth="55%";
orientation="horizontal";
screenposition="center";
style=submenuStyle;   
aI("separatorsize=4;");
aI("text=Home;url=index.html;");   
aI("text=Whats New;url=whatsnew.html;");
aI("text=Contact Us;url=contactme.html;");
aI("text=Credits;url=credits.html;");
aI("text=Site Map;url=sitemap.html;");
aI("separatorsize=4;");
}

many thanks in advance and kind regards
Steve(spt)

Poster: slackbladder
Dated: Monday August 22 2005 - 20:49:36 BST

See if this works for you.

Put the following in your jupiter_menu_data.js

Code:

_menuCloseDelay=400;
_menuOpenDelay=100;
_subOffsetTop=2;
_subOffsetLeft=-2;
horizontalMenuDelay=true;


forgetClickValue="true";


with(menuStyle=new mm_style()){
bgimage="tab_on_white.gif";
fontfamily="Verdana, Tahoma, Arial";
fontsize="90%";
fontstyle="normal";
fontweight="bold";
itemheight=10;
itemwidth=80;
offcolor="black";
oncolor="red";
openonclick=1;
subimagepadding=3;
clickbgimage="tab_on_white_bk.gif";
}

with(submenuStyle=new mm_style()){
styleid=1;
align="left";
bgimage="tab_subback_bk.gif";
fontfamily="Verdana, Tahoma, Arial";
fontsize="90%";
fontstyle="normal";
fontweight="bold";
itemheight=8;
offbgcolor="black";
offcolor="#ffffff";
oncolor="red";
ondecoration="underline";
openonclick=1;
padding=3;
separatorimage="tab_subback_sep_a.gif";
separatorsize=3;
}

with(milonic=new menuname("Main Menu")){
alwaysvisible=1;
orientation="horizontal";
screenposition="center";
style=menuStyle;
top=135;   
aI("align=center;keepalive=1;showmenu=home;text=Home");
aI("align=center;keepalive=1;showmenu=what_is;text=What is..");
aI("align=center;keepalive=1;showmenu=docs;text=Documents");
aI("align=center;keepalive=1;showmenu=images;text=Images");
aI("align=center;keepalive=1;showmenu=software;text=Software");
aI("align=center;keepalive=1;showmenu=faqs;text=FAQs");
aI("align=center;keepalive=1;showmenu=emulators;text=Emulators");
aI("align=center;keepalive=1;showmenu=links;text=Links;"); 
}

 
with(milonic=new menuname("home")){
orientation="horizontal";
screenposition="center";left="offset=-125";
top=149;
style=submenuStyle;   
aI("text=Home;url=index.html;");   
aI("text=Whats New;url=whatsnew.html;");
aI("text=Contact Us;url=contactme.html;");
aI("text=Credits;url=credits.html;");
aI("text=Site Map;url=sitemap.html;");
}

with(milonic=new menuname("what_is")){
orientation="horizontal";
screenposition="center";left="offset=-110";
top=149;
style=submenuStyle;
aI("text=..A Jupiter Ace;url=whatisanace.html;");
aI("text=Java Emulator;url=zzace_09.html;");
aI("text=board images;url=ace_board.html");
aI("text=..Forth;url=whatisforth.html;");
}

with(milonic=new menuname("docs")){
orientation="horizontal";
screenposition="center";left="offset=-0";
top=149;
style=submenuStyle;   
aI("text=Users Manual;url=usermanual.html;");
aI("text=ROM listing;url=romlisting.html;");
aI("text=Reviews;url=reviews.html;");
aI("text=Adverts;url=adverts.html;"); 
aI("text=Books;url=books.html;");
aI("text=App circuits;url=circuts.html;");
aI("text=Ace Hardware;url=ace_hardware.html;"); 
aI("text=Ace Users;url=temp.html;"); 
}

with(milonic=new menuname("images")){
orientation="horizontal";
screenposition="center";left="offset=-80";
top=149;
style=submenuStyle;
aI("text=Board Images;url=ace_board.html;");
aI("text=Blank pcb;url=blankpcb.html;");
aI("text=Expansion board pcb;url=expansion_board.html;");
aI("text=Other Hardware;url=other_hardware.html;");
}

with(milonic=new menuname("software")){
orientation="horizontal";
screenposition="center";left="offset=-30";
top=149;
style=submenuStyle;   
aI("text=Rom Downloads;url=roms.html;");
aI("text=Program listings;url=prog_list.html;"); 
aI("text=Index & download;url=software_index.html;");
aI("text=Tape Images;url=tape_collections.html;");
aI("text=S/W Manuals;url=softmanuals.html;");
}
                     
with(milonic=new menuname("faqs")){
orientation="horizontal";
screenposition="center";left="offset=-225";
top=149;
style=submenuStyle;
aI("text=. ACE Format;url=faq_ace_snapshot_format.html;");   
}
 
with(milonic=new menuname("emulators")){
orientation="horizontal";
screenposition="center";left="offset=-130";
top=149;
style=submenuStyle;   
aI("text=Java Emulator;url=zzace_09.html;");
aI("text=MS-Dos;url=ace32.html;");
aI("text=Windows;url=emulators_win.html;");
aI("text=Sam Coupe;url=blaze.html;");
}
 
with(milonic=new menuname("links")){
orientation="horizontal";
screenposition="center";left="offset=-230";
top=149;
style=submenuStyle;
aI("text=Build an Ace!;url=temp.html;");
}

drawMenus();

Then remove:

Code:

from your HTML files (index, etc) - did you split the js due to MAC IE bug? The above code doesn't use relative positioning so should be OK without splitting.

I did this quickly so you may need to play with the settings.

Also you need to upgrade your milonic_src.js files.
[/img]

Poster: Ruth
Dated: Monday August 22 2005 - 21:21:31 BST

Steve(spt) wrote:

So is there a way to make the summenu fix in the table cell no matter what size the screen res is?

Just to clarify, the submenus are not in a table. Only the main menu is in the table, the submenus open from that outside the table. In horizontal orientation main menus the submenus open immediately below the main menu and the subOffsetTop doesn't seem to do anything, though the subOffsetLeft does.

Also, keep in mind, you are using text, that means that things will change depending on what the user has for their font size settings. You have it set at 90%, so if I have my text size in my browser set to largest [IE, FF] or 150% [Netscape] and you have yours set to medium [IE,FF] and 100% [Netscape] the menu will be different for us because our font sizes are different.

Ruth

Poster: Steve(spt)
Dated: Tuesday August 23 2005 - 19:03:16 BST

Many..many thanks slackbladder, for the fix.

and thanks to Ruth.

The site menu work fine now. http://www.jupiter-ace.co.uk

But then I had a message from an Opera 8.02 user, so any one now why the tabs get bunched up in Opera?

kind regards Steve(spt)

Industrial Strength JavaScript and DHTML Menus

Amazon type menu , how can I do this?