Milonic provide full featured pull down web menus for some of the worlds largest companies
click here to see what it can do for you

Download Milonic DHTML Menu
Buy Milonic DHTML Menu

Back To Start Of Archive
Taken From The Forum: Help & Support for DHTML Menu Version 5+
Forum Topic: Click to view post
Last Updated: Saturday July 14 2012 - 06:07:36

Image menu in table expands the page when its clicked


Poster: Surfergirl
Dated: Monday April 23 2007 - 1:43:49 BST

http://adventur.server283.com/index1.htm

Its an image menu inside a table. The problem is the menu expands horizontaly when you
click on it.
every menu click moves expands the table, then it shrinks back to what it should be.

I see this on IE7 on a PC WindowsXP, Milonic 5.772

MAIN MENU
Code:
with(milonic=new menuname("Main Menu")){
alwaysvisible=1;
orientation="horizontal";
style=menuStyle1;
position="relative";


aI("image=/Milonic/menu/pc2home-off.gif;overimage=/Milonic/menu/pc2home-on.gif;
url=/index1.htm;title=Meridian Club Home;");
aI("image=/Milonic/menu/pc2about_off.gif;
overimage=/Milonic/menu/pc2about_on.gif;
url=/pine-cay/private-island/small-hotel/club.htm;showmenu=about;
title=About the Meridian Club on Pine Cay;");
aI("image=/Milonic/menu/pc2accommodation_off.gif;
overimage=/Milonic/menu/pc2accommodation_on.gif;
url=/pine-cay/private-island/small-hotel/rooms.htm;showmenu=accommodation;
title=Meridian Club Accomomdation;");
aI("image=/Milonic/menu/pc2activities_off.gif;
overimage=/Milonic/menu/pc2activities_on.gif;
url=/pine-cay/private-island/activities.htm;
showmenu=activities;title=Meridian Club Accomomdation;");
aI("image=/Milonic/menu/pc2dining_off.gif;
overimage=/Milonic/menu/pc2dining_on.gif;
url=/pine-cay/private-island/small-hotel/dining.htm;
title=Dining on Pine Cay;");
aI("image=/Milonic/menu/pc2wedding_off.gif;
overimage=/Milonic/menu/pc2wedding_on.gif;
url=/pine-cay/private-island/small-hotel/weddings.htm;
title=Weddings and Honeymoons on Pine Cay;");
aI("image=/Milonic/menu/pc2inquiries_off.gif;
overimage=/Milonic/menu/pc2inquiries_on.gif;
url=/forms/inquiries.htm;showmenu=inquiries;
title=Inquire to the Meridian Club on Pine Cay;");
}
drawMenus();



SUBMENU

Code:
fixMozillaZIndex=true; //Fixes Z-Index problem  with Mozilla browsers but causes
odd scrolling problem, toggle to see if it helps
_menuCloseDelay=500;
_menuOpenDelay=150;
_subOffsetTop=2;
_subOffsetLeft=-2;

with(menuStyle1=new mm_style()){
borderwidth=0;
headerbgcolor="#ffffff";
headercolor="#000000";
padding=0;
pagebgcolor="#82B6D7";
pagecolor="black";
}

with(menuStyle=new mm_style()){
bordercolor="#999999";
borderstyle="solid";
borderwidth=1;
fontfamily="Verdana, Tahoma, Arial";
fontsize="75%";
fontstyle="normal";
headerbgcolor="#ffffff";
headercolor="#000000";
offbgcolor="#eeeeee";
offcolor="#000000";
onbgcolor="#ddffdd";
oncolor="#000099";
outfilter="randomdissolve(duration=0.3)";
overfilter="Fade(duration=0.2);Alpha(opacity=90);Shadow(color=#777777', Direction=135,
Strength=3)";
padding=4;
pagebgcolor="#82B6D7";
pagecolor="black";
separatorcolor="#999999";
separatorsize=1;
subimage="arrow.gif";
subimagepadding=2;
}



with(milonic=new menuname("about")){
overflow="scroll";
style=menuStyle;
aI("text=Meridian Club;url=/pine-cay/private-island/small-hotel/club.htm;")
aI("text=Pine Cay;url=/pine-cay/private-island/pinecay.htm;")
aI("text=Location;url=/pine-cay/private-island/small-hotel/map.htm;")
aI("text=Travel To;url=/pine-cay/private-island/small-hotel/traveltopinecay.htm;")
aI("text=FAQ;url=/pine-cay/private-island/small-hotel/details.htm;")
aI("text=Staff;url=/pine-cay/private-island/small-hotel/staff.htm;")
}

with(milonic=new menuname("accommodation")){
style=menuStyle;
aI("text=Beachfront Club Rooms;url=/pine-cay/private-island/small-hotel/rooms.htm;")
aI("text=Sand Dollar Cottage;url=/pine-cay/private-island/small-hotel/sanddollar.htm;")
aI("text=Family Cottages;url=/pine-cay/private-island/small-hotel/cottages.htm;")
aI("text=Rates & Reservations;url=/pine-cay/private-island/small-hotel/rates.htm;")
aI("text=Special Offers;url=/pine-cay/private-island/small-hotel/specials.htm;")
}

with(milonic=new menuname("activities")){
style=menuStyle;
aI("text=Activities;url=/pine-cay/private-island/activities.htm;")
aI("text=Diving & Snorkeling;url=/pine-cay/private-island/diving.htm;")
aI("text=Bonefishing;url=/pine-cay/private-island/bonefishing.htm;")
aI("text=Eco-Tours;url=/pine-cay/private-island/ecotours.htm;")
aI("text=Middle Caicos;url=/pine-cay/private-island/middlecaicos.htm;")
}

with(milonic=new menuname("inquiries")){
style=menuStyle;
aI("text=Inquire;url=/forms/inquiries.htm;")
aI("text=Newsletter;url=/forms/newsletter.htm;")
aI("text=Acclaims;url=/pine-cay/private-island/small-hotel/acclaims.htm;")
aI("text=What Guests Say;url=/pine-cay/private-island/small-hotel/guests-say.htm;")
}


drawMenus();

[/url]


Poster: Ruth
Dated: Monday April 23 2007 - 2:55:40 BST

Hi,

When you click what? The items are set to go to a different url when clicked so I'm
not understanding what you mean by it expands, if you click a main menu item you
go to a different page.

Ruth


Poster: Surfergirl
Dated: Monday April 23 2007 - 12:15:00 BST

Thanks Ruth, I will try to explain better.

From the browser view (IE7), any menu item clicked on, the table (760px) that holds the design,
expands while the menu images download. If the screen is set to 1280px
wide, the table looks like it expands to 1000 pixels and then when the
menu images finish downloading the table collapes back to the normal
760 px.

Beside the expansion, its seems strange that once the menu has
downloaded it's having to download for every page, like its
not in the cache.

I'm not sure what you mean by going to a different URL -
http://adventur.server283.com/index1.htm is the home
page and the other pages are several folders down.

Thank you for your help.


Poster: Surfergirl
Dated: Monday April 23 2007 - 12:22:31 BST

Does it have to do with declaring the item width of each image in the main menu?


Poster: Surfergirl
Dated: Monday April 23 2007 - 12:44:13 BST

this is what I tried but it doesn't stop the movement
Code:
with(milonic=new menuname("Main Menu")){
alwaysvisible=1;
orientation="horizontal";
style=menuStyle1;
position="relative";
overallwidth=760;

aI("image=/Milonic/menu/pc2home-off.gif;
overimage=/Milonic/menu/pc2home-on.gif;itemwidth=190;
url=/index1.htm;title=Meridian Club Home;");
aI("image=/Milonic/menu/pc2about_off.gif;
overimage=/Milonic/menu/pc2about_on.gif;itemwidth=80;
url=/pine-cay/private-island/small-hotel/club.htm;
showmenu=about;
title=About the Meridian Club on Pine Cay;");
aI("image=/Milonic/menu/pc2accommodation_off.gif;
overimage=/Milonic/menu/pc2accommodation_on.gif;itemwidth=132;
url=/pine-cay/private-island/small-hotel/rooms.htm;showmenu=accommodation;
title=Meridian Club Accomomdation;");
aI("image=/Milonic/menu/pc2activities_off.gif;
overimage=/Milonic/menu/pc2activities_on.gif;itemwidth=95;
url=/pine-cay/private-island/activities.htm;showmenu=activities;
title=Meridian Club Accomomdation;");
aI("image=/Milonic/menu/pc2dining_off.gif;
overimage=/Milonic/menu/pc2dining_on.gif;itemwidth=72;
url=/pine-cay/private-island/small-hotel/dining.htm;
title=Dining on Pine Cay;");
aI("image=/Milonic/menu/pc2wedding_off.gif;
overimage=/Milonic/menu/pc2wedding_on.gif;itemwidth=94;
url=/pine-cay/private-island/small-hotel/weddings.htm;
title=Weddings and Honeymoons on Pine Cay;");
aI("image=/Milonic/menu/pc2inquiries_off.gif;
overimage=/Milonic/menu/pc2inquiries_on.gif;itemwidth=97;
url=/forms/inquiries.htm;showmenu=inquiries;
title=Inquire to the Meridian Club on Pine Cay;");
}
drawMenus();


am I getting close?


Poster: Ruth
Dated: Monday April 23 2007 - 17:15:01 BST

Hi,

OK, I tried on my other computer which is on dial-up and I see what's happening. Try using the preloadimages.js module for the menu images. What's happening, I think, is that there are so many images loading on the page that not all the menu images are getting loading while other images are being loaded so when you click one of the main menu items, since the overimage is not loaded yet the browser 'blank' space where the image should be shows and that space seems wider than the images.

http://www.milonic.com/menumodules.php

Another thing you can try is using the newest method to put the menu in a table.

1. put the main menu back in the menu_data.js file, just the menu not the drawMenus(); at the end of that main file.

2 add buildAfterLoad=true; at the top

Code:
fixMozillaZIndex=true; //Fixes Z-Index problem  with Mozilla browsers but causes odd scrolling problem, toggle to see if it helps
_menuCloseDelay=500;
_menuOpenDelay=150;
_subOffsetTop=2;
_subOffsetLeft=-2;
buildAfterLoad=true;


3. on the page call all the menu files in that table cell instead of the others after the body tag and the main in the cell, put all of them in the cell. Of course you no longer would have a main file since the menu is back in the menu_data.js file

See if that helps. I'd still use the preloadimages.js file though since you have images.

Ruth


Poster: Surfergirl
Dated: Sunday April 29 2007 - 21:27:15 BST

Thank you very kindly Ruth. Both the upgrades you recommended have been instituted with no adverse effect. I am away from the "slow" DSL for a few weeks but am anxious to check it when I return. Thank you again.

©1998-2012 Milonic Solutions Ltd. UK Registered Company #4406835
Privacy Policy | License Agreement | Contact Us | Tech Support