Transparent spacing between menu items?

Poster: redtopia
Dated: Friday August 5 2005 - 22:17:36 BST

I am trying to replicate this design as close as possible:

http://www.redtopia.com/demos/samples/menusample.jpg

Here's what I have so far:

http://www.redtopia.com/demos/samples/menusample2.jpg

Does anyone know if it's possible to create the TRANSPARENT spacing between menu items as seen in the first link above? I know it can be done as a solid line using the separators, but my design calls for transparent spacing.

Any help would be very much appreciated.

Poster: Ruth
Dated: Saturday August 6 2005 - 1:26:43 BST

I can make three suggestions

1. If the menu items are images and overimages, then you can set your onbgcolor and offbgcolor to transparent, set your separator color to transparent and set it at whatever size you want, to get that look you'd need to also set your border at 0

2. you could use a table, having a cell for each item, turning each item into an always visible menu and putting cellpadding in the table which would separate each item.

3. make separators of the image in the background making each separator from the area where it will appear.

Ruth

Poster: mindtech
Dated: Wednesday November 30 2005 - 5:36:14 GMT

The problem is that even if the separator is transparent, the other bgcolor attributes will still block your background... so setting onbgcolor, offbgcolor, and separatorcolor to transparent will let your background come through.

Caveats: I'm guessing you are probably using images/overimages, unless you figured out some cool way to get text to have that translucent-button look shown in your design at the above link (I've seen some posts that describe how to do that, but they were over my head).

However, if you 1) AREN'T using images/overimages and 2) you don't care about either losing the translucent look or are willing to figure how to make text items have a translucent background, then here's another solution that I found useful while doing a similar task:

In your style:

offbgcolor="transparent";
onbgcolor="transparent";
separatorcolor="transparent";


...of course, this means that all your menus and items have no background color of their own, so you will have to declare the proper bgcolors for each menu item. Example:

aI("offbgcolor=#CCC4B7;text=Contact Us;url=contact.php;");


This is quite a bit of cutting and pasting work in your menu_data file, but it's gotta be easier than chopping the background image up into slivers.

Poster: Ruth
Dated: Wednesday November 30 2005 - 7:54:21 GMT

Hi,

Actually, they don't want background color, they want the page background to show through the buttons. I can't make those kinds of buttons, but I finally figured out how to do it, and it's so simple I feel like an idiot

You need a transparent separator image, set the height of the image and the separator size to however much space you want between the items in the style section. Because the separator is transparent the page shows and makes the items look as if they are separate rather than one menu.

Wish I knew where to get those semi-transparent buttons.

Ruth

Poster: Ruth
Dated: Friday December 30 2005 - 14:40:13 GMT

If anyone is still watching this topic, with the new version of the menu you can set transparent separators without having to use separator images.

Set separatorsize=whatever; separatorcolor="transparent"; menubgcolor="transparent";

You have to specify transparent for both separatorcolor and menubgcolor in order to get the transparency. If menubgcolor is not specified as transparent, or if menubgcolor is left out of the style, the default is for it to take the offbgcolor. That is why just setting separatorcolor="transparent"; doens't work by itself.

Ruth