How to set the "Overall Width of Horizontal Menu"

Poster: Janetp
Dated: Saturday June 21 2003 - 12:59:42 BST

I see this is an option in the menu array but there is no example of how to do it.

The text says " Set the Overall Width of Horizontal Menu to specified width or 100% and height to a specified amount"

I tried putting a pixel amount in ie. 500, but that didn't work.

Please advise the correct syntax for using this option.

Thanks

Janet

Re: How to set the "Overall Width of Horizontal Menu&am

Poster: Non
Dated: Thursday July 3 2003 - 10:22:31 BST



If you fill in a pixel amount, you wil get a bar at 100% width of the browser window and the height will be the amount you filled in, like this:

10, // Set the Overall Width of Horizontal Menu to 100% and height to the specified amount (Leave blank to disable)

In this way, you get a horizontal bar behind your menu of 10 pix? height and 100% width of your browser window. I believe the color will be the Mouse Off Background Color. I think this is not what you expected, but this is mostly used for menu's designed without using 3D borders for the menu 'buttons'. Like the menu used on this Milonic Site.

Poster: Janetp
Dated: Thursday July 3 2003 - 10:57:41 BST

I do understand the use for this command. It is to specify the overall width and height for the coloured bar that contains the main menu selections.

I am confused as to how I can set both the height and width to a specific pixel measurement. In the case I am now working on I do not want it to be 100% or any percent, but instead a fixed width to sit within a particular section of the site.

So if I wanted my main menu bar to be 580 pixels wide and 25 pixels high, what would I enter in this area?

Also I am curious about the use of the "0" or "1" at the end of the menu option array e.g.
,"MenuOption","page.html",,,0
Could you please advise when a 0 or when a 1 should be used?

Perhaps there is more detailed documentation somewhere that you could refer me to?

Thanks

Poster: Non
Dated: Thursday July 3 2003 - 13:57:57 BST

As far as I know, it is not possible to set the width of the main menu bar in the way you (and I and many others!) want. The only option you have is to specify the menu width for each menu item, but then the text lay-out will probably not be very nice. Also setting the height will be difficult. I have read about people putting a transparent gif of the desired height in the menu items. Not something I would like to do, but if your web design cannot be altered to solve the problem...

The "0" and "1" you are curious about just specify if you want a seperator bar (line) between the menu items ("1") or not ("0"). Just try it and see if you like it or not, it is only a 'visual' thing, your menu will function just the same.

Regards,
Nadia

Poster: Hergio
Dated: Thursday July 3 2003 - 19:34:31 BST

Try putting "non-breaking spaces" in the labels for your menus. To open up the main menu alittle more and give each menu header alittle more room, you can put these spaces on either side of your label. It will also increase the overall width of your menu. I.E. The creation of one of my menus would be

," Human Resources ","show-menu=hr","# onbordercolor=0000ff;offbordercolor=000000;","",1

Especially if you turn on your separators like Non mentioned, it looks nicer rather than having your menu labels squished up against the separators.

Good luck!

Poster: Hergio
Dated: Thursday July 3 2003 - 19:38:21 BST

I just noticed that the non breaking spaces that I placed into my last post did not show up because they are being rendered by the browsers. This is what your code SHOULD look like if you want to include them.

," Human Resources ","show-menu=hr","# onbordercolor=0000ff;offbordercolor=000000;","",1

Poster: Janetp
Dated: Friday July 4 2003 - 0:41:44 BST

Thanks Hergio,
that is in fact what I had done when I couldn't figure out how to make the width setting do what I wanted. It works quite well. A bit fiddly to get it "exactly right" but it is a good work-around

Poster: kevin3442
Dated: Tuesday July 8 2003 - 1:29:42 BST

Hi All,

You could try the following function to adjust the menu's width (e.g., place it at the top of the menu_array.js file, just where the editable properties start).


You could call the function in the body's onload event, like so:


This would make the menu 500 px wide; adjust as needed. The "extra width" is simply added to the right side of the menu. I don't know how well this works across all browsers, so you may want to test your target browsers (I know it works in IE6 and NS7 on Windows).

As far as height, there's a way to do that programatically as well, but it ain't pretty... it leaves the menu text not very well justified. I have found that the transparent 1-px gif trick works OK. You'll find a discussion of that approach here. I think you'll also find it in a few other threads if you do a search of the forum.

Finally, you might want to give the new version (v5) of the menu system a try. I haven't delved into it very much myself, but I understand that it is much more adjustable along these lines.

Hope that helps,

Kevin