Menu Shrinks itself?

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

Menu Shrinks itself?

Poster: ShawnO
Dated: Monday January 31 2005 - 16:15:43 GMT

I am having a problem with my submenu. It has a scroll bar which works great. It there are enough items, it scrolls. If not, the menu shrinks (width wise) the same amount of space as the scroll bar.

I can't post a link because the site is still internal, but I can post the menu code.

Sub Menu With a Scroll Bar (100% working):

Code:

   _menuCloseDelay=1000;
   _menuOpenDelay=100;
   _subOffsetTop=10;
   _subOffsetLeft=-10;
   var menH = 120;
   var menL = 'offset=297';
   
with(menuStyle=new mm_style()){;
   onbgcolor='#005645';
   oncolor='#FFFFFF';
   offbgcolor='#006C50';
   offcolor='#FFFFFF';
   bordercolor='#000000';
   borderstyle='solid';
   borderwidth=1;
   separatorcolor='#000000';
   separatorsize='0';
   padding=1;
   fontsize='10px';
   fontstyle='normal';
   fontfamily='Verdana, Tahoma, Arial';
   fontweight='bold';   headercolor='#000000';
   headerbgcolor='#ffffff';
   subimage='/siteTemplate/images/arrow.gif';
   subimagepadding='2';
   itemwidth=147;
   }

   with(milonic=new menuname('rightmenu')){
   style=menuStyle;
   top='40';
   keepalive=0;
   screenposition='center';
   left=menL;
   overflow='scroll';
   alwaysvisible=1;
   menuheight=menH;
   menuwidth=147;
   aI('text=Business Development;url=/siteTemplate/cityhall/departments/businessdevelopment/;');
   aI('text=Business Directory;url=/siteTemplate/business/businessdirectory/;');
   aI('text=Business Improvement Areas;url=/siteTemplate/cityhall/departments/planning/biaMaps.asp;');
   aI('text=Business Links;url=/siteTemplate/services/links/;');
   aI('text=Business Newsletter;url=/siteTemplate/business/newsletter.asp;');
   aI('text=Business Profile;url=/siteTemplate/business/businessprofile/;');
   aI('text=Community Profile;url=/siteTemplate/business/communityprofile/;');
   aI('text=Development Guide;url=/siteTemplate/business/developmentguide/;');
   aI('text=Licencing;url=/siteTemplate/cityhall/departments/clerks/licencefeeschedule.asp;');
   aI('text=New Developments;url=/siteTemplate/business/newdevelopments/;');
   aI('text=Real Estate;url=/siteTemplate/business/realestate/;');
   aI('text=Small Business Enterprise Centre;url=/siteTemplate/business/businessselfhelp/;');
   }
   drawMenus();

Menu that doesn't have a scroll bar and the menu shrinks:

Code:

   _menuCloseDelay=1000;
   _menuOpenDelay=100;
   _subOffsetTop=10;
   _subOffsetLeft=-10;
   var menH = 120;
   var menL = 'offset=297';

   with(menuStyle=new mm_style()){;
   onbgcolor='#005645';
   oncolor='#FFFFFF';
   offbgcolor='#006C50';
   offcolor='#FFFFFF';
   bordercolor='#000000';
   borderstyle='solid';
   borderwidth=1;
   separatorcolor='#000000';
   separatorsize='0';
   padding=1;
   fontsize='10px';
   fontstyle='normal';
   fontfamily='Verdana, Tahoma, Arial';
   fontweight='bold';   headercolor='#000000';
   headerbgcolor='#ffffff';
   subimage='/siteTemplate/images/arrow.gif';
   subimagepadding='2';
   itemwidth=147;
   }

   with(milonic=new menuname('rightmenu')){
   style=menuStyle;
   top='40';
   keepalive=0;
   screenposition='center';
   left=menL;
   overflow='scroll';
   alwaysvisible=1;
   menuheight=menH;
   aI('text=Heritage Walking Tour;url=/siteTemplate/aboutniagarafalls/history/heritagewalkingtour.asp;');
   }
   drawMenus();

I have tested this on IE 6 and FF1.0. The menu version is 5.691

Thanks,
Shawn

Poster: Ruth
Dated: Monday January 31 2005 - 23:24:16 GMT

Hi Shawn,
I'm not sure what you are saying is wrong. The menu with the scroll bar is wider since it has a scroll bar and that width would be added to the menu width you've got set. So, both menus show as 147, with the scroll bar one having that in addition. I'm using IE5.5 win98se, and also tested Firebird [old firefox] .07, Netscape 7.1. Opera 7.11 is different, the menu with Heritage Walking Tour remains the same size as if there were a scroll bar even though there isn't rather than being 147 wide.

Ruth

Poster: Ruth
Dated: Tuesday February 1 2005 - 1:18:44 GMT

I realized you didn't mention Opera, but that second menu with one item in it staying wider is fixed if you take out the overflow='scroll' from it. If that's what's happening in the FF you might try removing that and see if that fixes it.

Ruth

Poster: ShawnO
Dated: Tuesday February 1 2005 - 13:16:34 GMT

Hi Ruth,

Thanks for the replies. I would like the menu to stay the same width, whether there is a scroll bar or not. Otherwise, the menu will be going wider than it's header graphic when there is a scroll bar.

The result in Opera.... That is what I am looking for. I have not tested it either, but it sounds like it. For example. If I specify the menu to be 147 pixels wide, then it should be, with or without a scroll bar. If the scroll bar needs to appear, then it should make the items that much smaller so that the menu with scroll is still the same original width. (That's what I am hoping for

)

If I remove the 'overflow=scroll' then the menu will push down into my content area and that is not what we are looking for. We used to have the menu appear and disappear as needed but we found people were having a hard time finding it, so we switched to this solution.

Shawn

Poster: ShawnO
Dated: Tuesday February 1 2005 - 14:12:53 GMT

Just tested it in Opera 7.54 and that is exactly what I was looking for.

How do I get the other browsers to see the menu Opera's way?

Thanks,
Shawn

Poster: Ruth
Dated: Tuesday February 1 2005 - 19:23:53 GMT

Hi Shawn,
As far as I know you can't. Drives me nuts that browsers don't see basic things like margins, padding, white space the same way. I think it is Opera that is not acting correctly. I believe browsers place the scroll bar outside the actual 'box' just like they do on your regular browser window. I mean that the browser margins padding etc are figured not including the scroll bar, it sits outside of those parameters. I was thinking that maybe you could size the menu smaller by the width of the scroll bar so that when a menu had a scroll bar it didn't go bigger than the header graphic. That would be an option but at the same time, you can't control the person's browser settings and if they do what I do which is set the scroll bar to real skinny then it wouldn't be the same size as someone else who didn't make their scroll bar the smallest width.
I'm not a code/function person but maybe there is a way to do a browser test and set a size based on that? I know that there is a browser test/find function already in the menu so you could use that as the basis of the function, if a function is an option. But, I don't know what that functin is. Sorry.

Ruth

Poster: ShawnO
Dated: Tuesday February 1 2005 - 20:57:21 GMT

Thanks for your help Ruth.

I will have to do some hacking and coding then to make it work with/without a scroll bar.

If I come up with anything solid, I will post another reply.

Thanks!
Shawn

Poster: Andy
Dated: Wednesday February 2 2005 - 15:38:48 GMT

Hi,

The very nature of the scrollbar menu is so that it will adjust its width based on whether it needs srollbars or not. This means that the width of the menus will change and this is by design for certain conditions.

However, what you can do is force the width by adding a dummy menuitem at the end of your menu.

Here is a dummy item that should do the trick:

aI("text= ;type=header;itemheight=20;headerbgcolor=#006C50;");

Hope this helps
Milonic Support

Poster: ShawnO
Dated: Wednesday February 2 2005 - 16:20:06 GMT

Andy, that worked 100%!

On some pages, it worked and others it didn't. So, I increased the itemheight to 30 and that seems to fix all of my examples.

Thank you for your quick response!

Shawn

Industrial Strength JavaScript and DHTML Menus

Menu Shrinks itself?