Menu width and item spacing. What's the proper syntax?

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

Menu width and item spacing. What's the proper syntax?

Poster: vikenk
Dated: Thursday October 12 2006 - 16:04:25 BST

Hello all,

Long time since Ive been here :>(

To this day, I'm still confused as to what the proper syntax is for menuwidth and menuitem spacing. My desire is simple. For a given menu, I want to set the menu to span 100% of with of the page (or containing table) and the menu to evenly space and center all the menu items. So, If I start with 5 menu items, it should evenly space and center the 5 menu items. If I add two more, it should then adjust and evenly space the menu items.

Unfortunately, the menu width related items are not defined in the Menu Quick reference guide (http://www.milonic.com/menuproperties.php). Their definitions are empty.

If I have the menu in a table that is set to, say, 800px wide, I should just be able to set the menu to:

menuwidth="100%";

This would tell the menu to span the full width of the table, right? So, it should span the width and set the menu items accordingly. This also assumes that the menu is properly positioned (relative) in the menu. If I change the table to 700px, the menu should respond accordingly. But it doesn't always work that way. I had a menu perfectly positioned this way, but when I added two menu items, the added menu items were squished on the right side and all the items were uneven. So, I then set menuwidth=800 (to match the table) but the menu items again were squished in the middle with no spacing.

So, what's the proper syntax? If I use "menuwidth=100;" does this automatically mean 100 pixels? Can I use percent? menuwidth="100%";

Must I set an itemwidth or menuheight as well?

I'm just frustrated. Evenly spacing and centering menu items should be simple and automatic. I just upgraded to menu version 5.760 but I'm still having the problems.

Thanks.

Poster: Ruth
Dated: Thursday October 12 2006 - 21:00:15 BST

Hiya Stranger

Nice to see you!

Can you give me a page so I can test [play

] I gotta see things.

Ruth

Poster: vikenk
Dated: Friday October 13 2006 - 3:23:16 BST

HI Ruth,

I'll do my best to get some examples up ASAP, but I can't right now. In the meantime, can you try to provide an answer to my main question: What syntax is allowed with the menuwidth properties? Is the default value in pixels? Can I use percentages?

Poster: Ruth
Dated: Friday October 13 2006 - 4:03:07 BST

Hi Vikenk,

The default value in the menu is px wherever that is relevant. You can use percentages with menuwidth. To work up what you want I really need to know what you mean by evenly spaced and centered. You see some people want the span to be 100% but the items to be smaller and sit in the middle of the span not all the way across it.

Try this if you want the items to spread evenly all the way across it

Code:

menuwidth="100%";
itemwidth="100%";

I tried that with the download in a table and they spread out evenly, then I copied and pasted 3 more items and it stayed spread out, but at my resolution all the items with two or more words wrapped since that was the only way to keep them even.

Hope this helps

Ruth

Poster: vikenk
Dated: Monday October 16 2006 - 18:20:56 BST

Hi Ruth,

I finally got around to making some examples for you. YOu can see them here:

http://www.vikenk.com/ray/milonic.htm

I've made the menu relative positioned in the table and included the script in the html so you can see it all by just viewing the source. There's some odd behavior when the menu width and item width are set to 100%.

I'm not sure what the cause of this is. Thanks for looking. Gotta go now. Need to get back my day job!

Poster: Ruth
Dated: Monday October 16 2006 - 22:03:00 BST

Hi,

Well, I see what's going on but have no idea why. I did find a solution unless these extra items are being added automatically then I'm not sure how to do it. Try this

Code:

<TABLE id=menu style="MARGIN-BOTTOM: 30px">
  <TBODY>
  <TR>
    <TD style="COLOR: white">add <U><B>a 3rd item of separator only</B></U> </TD></TR>
  <TR>
    <TD 
    style="BORDER-RIGHT: white 1px solid; BORDER-TOP: white 1px solid; BORDER-LEFT: white 1px solid; BORDER-BOTTOM: white 1px solid">
      <SCRIPT type=text/javascript>with(milonic=new menuname("Main Menu")){
alwaysvisible=1;
position="relative";
orientation="horizontal";
menuwidth="100%";
itemwidth="100%";
style=menuStyle;
aI("text=Home;url=index.htm;");
aI("text=Corvettes;pointer=default");
aI("text=Classics;url=classics.htm");
aI("text=Frames;url=frames.htm");
aI("text=About Us;pointer=default");
aI("text=Contact Us;url=contact_us.htm;");
aI("text=Resources;url=contact_us.htm;");
aI("text=Pictures;url=contact_us.htm;");
aI("text=New;url=contact_us.htm;separatorcolor=#000000;");
aI("separatorsize=0;");
}

drawMenus();</SCRIPT>
    </TD></TR></TBODY></TABLE>

What happens here is that a separator is put at the end and since you have the previous item with the color changed to black to match your background it doesn't show. But that seems to make the last item match the others.

I'll report this to Andy.

Ruth

Poster: vikenk
Dated: Tuesday October 17 2006 - 3:17:02 BST

I see what you mean, Ruth. Adding a "dummy" last menu item and use it as a sacrificial lamb of sorts. I'll give that a try. Thanks!

Industrial Strength JavaScript and DHTML Menus

Menu width and item spacing. What's the proper syntax?