Separate TOp Menu Items

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

Separate TOp Menu Items

Poster: rich_a1
Dated: Thursday February 24 2005 - 19:54:09 GMT

How do you separate the top line menu items? I am trying to add white space to the area between each item.

Poster: Ruth
Dated: Thursday February 24 2005 - 23:34:19 GMT

Is it that you just want the items wider, or do you really want a non mouseover function item inbetween the other items? If the first you can specify itemwidth= whatever you want, or you could use a rawcss="padding=2px 5px 2px 5px"; That would make the padding around items [clockwise starting at the top] 2px on the top and bottom and 5px on the right and left. You'd place that in the style definition for the particular menu. If the second idea I mentioned is what you want, you can put in a 'blank' item setting it as a header for example:

Code:

aI("text=&nbsp;;itemwidth=10px;type=header;headerbgcolor=whatever color you want here;");

Ruth

Poster: rich_a1
Dated: Friday February 25 2005 - 5:15:39 GMT

The second. I will give it a try. Thanks.

Poster: rich_a1
Dated: Saturday February 26 2005 - 12:27:19 GMT

Following your suggestion, I placed a blank space between the top line menu items, but it did not blank out the borders above or below that blank space. Any suggestions?

Poster: Ruth
Dated: Saturday February 26 2005 - 17:32:58 GMT

Hi Rich,
Do you have a url so we can see the menu and it's placement? It almost sounds like you want to make 'different' menus and position them. But, I can't tell if that will work unless I see the page.

Ruth

Poster: rich_a1
Dated: Saturday February 26 2005 - 18:51:07 GMT

I really want a clear separation between the menu items. Maybe different menus will work, but I want to avoid using multiple js files to accomplish it.

Also, an unrelated question - is there any way to create a CSS or HTML menu beneath the milonic menu? If users have scripts blocked, I need a backup navigation.

Poster: Ruth
Dated: Saturday February 26 2005 - 21:49:11 GMT

OK, here's what I have.

1. You need to remove the submenus from the embed_main_menu.js file and put them into the menu_data_orig.js file. The submenus must be built first, so they need to be in the file that is called immediately after the body tag, first thing on the page before anything else.
2. Although you have the main table 100% and centered, and then the table in which the menu is as 100%, you have that cell as 748, so there could be a problem in some browsers. Right now you call the menu in that table cell, in order to make sure that the menu is always centered even if someone has a higher resolution than 800x600, I'd suggest you do the following [it's not required]:

Code:

<TD vAlign=top align=left width=748 bgColor=#ffffff height=20><center>  <table border="0" cellpadding="0" cellspacing="0" align="center" width=748>
        <tr>
        <td vAlign=top align=left width=748 bgColor=#ffffff height=20>
        <SCRIPT src="embedded_main_menu.js" 
            type=text/javascript></SCRIPT></td>
        </tr>
        </table></center>

I just inserted a one cell table that is between center tags and the menu in that cell.

3. To keep the border from being around the header areas, and to keep it as one file set the border to 0, leave the onborder which will put a border around the menu item when you mouseover. It's putting the border in that makes it go all the way around and makes the header not look like a 'space'.

4. This is the embed_main_menu.js file I did.

Code:

with(milonic=new menuname("Main Menu")){
alwaysvisible=1;
position="relative";
orientation="horizontal";
menuwidth=748;
align="center";
style=XPMainStyle;
aI("text=&nbsp;type=header;headerbgcolor=#ffffff;bordercolor=#ffffff;itemwidth=1");
aI("showmenu=;text=Home;");
aI("text=&nbsp;type=header;headerbgcolor=#ffffff;bordercolor=#ffffff;itemwidth=40");
aI("showmenu=Samples;text=Menu Samples;");
aI("text=&nbsp;type=header;headerbgcolor=#ffffff;bordercolor=#ffffff;itemwidth=40");
aI("showmenu=Milonic;text=Milonic;");
aI("text=&nbsp;type=header;headerbgcolor=#ffffff;bordercolor=1;itemwidth=40");
aI("showmenu=Partners;text=Partners;");
aI("text=&nbsp;type=header;headerbgcolor=#ffffff;bordercolor=1;itemwidth=40");
aI("showmenu=Links;text=Links;");
aI("text=&nbsp;type=header;headerbgcolor=#ffffff;bordercolor=1;itemwidth=40");
aI("showmenu=MyMilonic;text=My Milonic;");
aI("text=&nbsp;type=header;headerbgcolor=#ffffff;bordercolor=#ffffff;itemwidth=1");
}
drawMenus();

Try that and see if it will do what you want. You can adjust the header items to whatever you want. I put the first and last to just make sure that the first and last menu item didn't go beyond the beige section right and left borders. Hope that helps.

Ruth

Poster: rich_a1
Dated: Sunday February 27 2005 - 1:05:31 GMT

I followed your recommendations, but now I have a border around the entire top menu that I need to get rid of.

Can you help?

Thanks!

Poster: Ruth
Dated: Sunday February 27 2005 - 2:58:22 GMT

Just posting here for any who read the information I gave in the other thread.

The reason your border shows is because you have margin=2. This is only an analogy, not exact but: think of your menu as a poster board colored that pretty blue, and then think of the items as separate things colored the same but cut out of say a magazine, and you posted each to the board. When you set margin at 2px in the main menu, it places a 2px edge around the item you 'pasted' to the board. You have padding set at 1 for that style. I elimated the margin=2 and changed the padding to 3 that kept the size and eliminated what looked like a border.

Ruth

Poster: rich_a1
Dated: Sunday February 27 2005 - 3:18:22 GMT

Fabulous! Thanks!

Industrial Strength JavaScript and DHTML Menus

Separate TOp Menu Items