MenuWidth Question again ;)

Poster: blaine
Dated: Monday September 20 2004 - 23:21:14 BST

I know there have been quite a few questions on this or simillar questions but I've not yet solved my problem and not sure if there is a solution.

I'd like the horizontal menu located in my siteheader to expand nicely across the page to 100%. If I resize the browser it should resize - after a refresh.
- menuwidth="100%"

Problem I am having is getting the horizontal menuitems to be equally proportioned. If I know there are 5 items across the top them I can set itemwidth="20%" and that works well.

Setting it to "100%" will make the first item very wide and other items cropped tight.

Leaving itemwidth setting out - will not expand the menu to 100%

Is there a way to define a min width and max width or handle the menuitem width better. I Need it to be more dynamic since I depending on your permissions you may have more menuitems across the top then other users or those not logged into the site.

Also, Is there a way to detect the browser has been resized and adjust the refresh the browser - Or is that a bad practice ?

Poster: Ruth
Dated: Tuesday September 21 2004 - 3:52:22 BST

Assuming the menu is not in a table, if you set the following in the menu you will get it to expand across the page with the items centered in the menu span, thereby allowing for different numbers of items depending on permissions and keeping the same look. In the actual menu [not the style definitions, but where you have top=whatever;orientation="horizontal"; put the following

menuwidth="98%";
menualign="center";
screenposition="center";

If you do that then the menu will be positioned in the center of the browser window, it will expand 98% and the items will be whatever size they are depending on the text in them and they will be centered in the span. This means that there will be a wider span of equal distance on the left and right side of the 1st and last item no matter how many of them get put in depending on the permissions.

The reason I did 98% is that for some reason in Netscape if it's 100% it will read the usual built in browser left side margin, but shifts the menu all the way to the right so there is no margin, even if you have 100% on it, but if you put 98% it seems to put the same margin on each side. You could perhaps put in the css margin:0; making there no margin on either left or right in the browser window and then use 100%.

As to your last question, I have no idea. Someone who knows javascript and browser detection might be able to help you, though I think the menu has it's own built in coding for browser detection.

Ruth

Poster: blaine
Dated: Tuesday September 21 2004 - 5:04:05 BST

Hi Ruth,

Thanks for taking the time to reply.

I am actually imbedding the menu in a table row but have also tried closing off the table before the menu and then creating a new table for the content after the menu so that I don't effect the rest of the site.

No difference other then the menu position was effected because it did not line up correctly - understandable. I also tried placing the menu in a div as a container - no effect. Same results for in a table cell, not in a table or in a div.

Removing the itemwidth causes the menu to not expand to the 100% of the browser width. The menu is only as wide as the combined menuitem text size and no bigger. Only by adding itemwidth="25%" will it expand to the 100% - in this case I have 4 items.

Problem is that now when a 5th item is added - the 4 items get slightly smaller but just enough to fit in the 5th item so it's a lot smaller then the others.

Poster: Ruth
Dated: Tuesday September 21 2004 - 22:17:24 BST

Without seeing your layout I can't really give you any more suggestions. Putting it in a table cell means the position is relative. I would need to see the page to play around with it and see if there is any kind of option.

Ruth

Poster: blaine
Dated: Thursday September 23 2004 - 14:45:40 BST

I have setup a demo site with the latest Milonic version code as well.
The site URL is: http://www.portalparts.com/gltest/public_html/index.php

When you are not logged in there are 4 items in the header.

Logging in as demo/demo and you will get 6 items.

This menu uses "menustyle2" and have had to use itemwidth="25%" or else when not logged in - the items will look very odd with blank padding between the items.

Once logged in and there are more items and the last items get compressed to meet their min required width.

I'd like to have then still more proportioned. It understandable that a very long menulabel would mess this up. But assuming we have similar length labels.

It does scale to 100% ok but does need a refresh. I recall an earlier version a few months back where it scaled as I resized the page.

Any ideas on how to better control the menuitem width?

Thanks.

Poster: Ruth
Dated: Friday September 24 2004 - 0:10:44 BST

Hi,
This is the only thing I could figure out that looked OK and would work with both the non logged-in and logged-in and look pretty good [I think]. Get the itemwidth and menuwidth out of the menuStyle2, then in the main menu itself put this

Then in the items [the 4 on the non logged page, of course] use these itemwidths,


What this does is create a 100% span of the menu, then it centers the items so the left and right of the 1st and last menu item are the same width. When you login, it will shift the items and still keep them centered, again leaving the same amount of space on the left and right of the 1st and last item. The new items that are inserted take up whatever space is left over from the 4 main items. The only reason you can do this is that you have a text size specified. If you make it a percentage there would be problems because someone might have their text set at a huge font size. Try it and see what you think. I think it looks pretty even, but it may not be what you like. It's the only thing I can figure out and still have it look when logged-in like it's 100% across the screen with items looking evenly spaced out.

Ruth

Poster: blaine
Dated: Friday September 24 2004 - 4:43:57 BST

Hi Ruth,

I should point out and maybe you noticed when visiting that demo site. The menu is dynamically created from php/mysql using the Menu Builder component that I have created. This site is in-fact a demo site for glMenu - the menubuilder plugin.

I really can not adjust the itemwidth individually - well not without making it more complex for the site admin.

But you did solve one item nicely although I don't really understand the behaviour. Moving the menuwidth="100%" out of the menustyle and placing it in the menudefinition before the style defininition now makes the menu auto scale to 100% as I resize the browser.

I don't know why the behaviour is different. I really wanted most if not all the menu style attributes to be in the external config file. I can still make it configureable - it just needs to now be in 2 places. Odd as I would have expected the settings in the style were just included inline.

I'm still left with some manual tweaking to come up with one setting for the itemwidth since we don't have any way to have more control over this. I think this is an area of weakness.

I also could not get the vertical-alignment to work. Adding valign="top" in the menu definition before the include of the style or in the style definition itself would move the text labels up.

Poster: Ruth
Dated: Friday September 24 2004 - 5:08:34 BST

I'm not really sure I understand about not being able to size the first four items that you see, but you really don't have to put an item size in, I only did it to spread out the items a bit. You could leave all reference to the item size out of it, percentage or fixed, and just use the code I had in the menu definition menualign="center"; and then the items would center in the 100% menu span. So, if you had four it would be in the center with the items the size of the text in them, and the span on right and left looking the same as to empty color space, when they 'expanded' to more items it would still be centered, just being 'wider' as to how many items are there.

For the other things you mentioned, I am code illiterate more or less. I can sort of figure out ok, this must cause the menu to do this, but I have no idea how it works, or how it interacts with the menu. So, I really don't have a clue why it's doing what you say it's doing. Sorry. That might be something about which to contact Milonic.

Ruth

Poster: blaine
Dated: Friday September 24 2004 - 6:15:17 BST

Thanks Ruth - sorry I saw the various itemwidth settings in your 2nd code block and thought thats what you had in mind.

It's actually not looking too bad right now. I prefer the menualign="left" actually. I also like the effect where (in the example on my site) when not logged my size and you size the browser wide, you will see the 4 items are the same width and the background of the menu fills the header. It auto-resizes nicely.