Board Logo

Setting item colors independently within single block
tigra - 8/13/2002 at 08:10 AM

To set colors independently for each menu item (both free and PRO versions) put simple wrapper function into the menu_item.js

function wrap(text, bg_color, fg_color) {
return('<table cellpadding="0" cellspacing="3" border="0" bgcolor="'
+ bg_color + '" width="100%"><tr><td style="padding: 3px; '
+ 'font-family: tahoma, verdana, arial; font-size: 13px; color:'
+ fg_color + '">' + text + '</td></tr></table>');
}

... and call the wrapper for each cation with parameters (demo structure below is for PRO version):

var MENU_ITEMS =[
[wrap('Home', '#cccccc', 'red'),"/index1.html",null, null],
[wrap('Company', 'green', 'yellow'), null, null],
[wrap('Products', 'blue', 'white'), null, null],
];


dhiru - 9/13/2002 at 06:11 AM

Hi

I used the wrapper function to set the item colors independently, but the problem is i am not able to remove the white border which is shown.

Could u please tell me if there is a solution for this.


tigra - 9/13/2002 at 07:39 AM

Make sure there is no borders in CSS files defined for menu items.


sundevil - 11/5/2002 at 12:54 PM

Tried it, but the link to the page / file now seems to be in the border of the cell. Not in the content.

Have I forgotten something or is this something I have to live with?


tigra - 11/11/2002 at 10:17 AM

Remove/unlink css file. When using inner HTML feature make sure settings don't interfere with CSS formatting.


rkopnisk - 9/8/2004 at 06:16 PM

Nice.

Any way to get the mouse-over color changes and the on-click color changes working with a different set of colors for a single item?

I'm trying to get the leaves (items with no child items) to have a different color scheme from non-leaf menu items (items with child items). The mouse-over and on-click colors are a big part of the look and feel of the site.

Thanks.


tigra - 9/10/2004 at 10:28 PM

You can assign HTML for different states of the item with Tigra Menu PRO and Tigra Menu GOLD. Free version doesn't support this feature.


BlahBlah - 9/23/2004 at 02:59 PM

How would one do this in Gold or Pro?


tigra - 12/9/2004 at 04:40 PM

With Tigra Menu GOLD and Tigra Menu PRO you can replace first element of item's array (text) with array of three elements (text for normal, mouseover and mousedown states). See:

http://www.softcomplex.com/products/tigra_menu_gold/docs/#items_caption
http://www.softcomplex.com/products/tigra_menu_pro/docs/#items_caption


You can modify wrapper function so it accepts additional parameters (colors for all item states) and returns array of three HTML string instead of one HTML string.


tigra - 8/12/2005 at 05:36 PM

Below is improved wrapper function for Tigra Menu PRO and Tigra Menu GOLD. By supporting additional parameters it allows rollover effects.

Code:

function wrap(text, bg_color_off, fg_color_off, bg_color_on, fg_color_on) {

if (!bg_color_on) bg_color_on = bg_color_off;
if (!fg_color_on) fg_color_on = fg_color_off;

return [
'<table cellpadding="0" cellspacing="3" border="0" bgcolor="'
+ bg_color_off + '" width="100%"><tr><td style="padding: 3px; '
+'font-family: tahoma, verdana, arial; font-size: 13px; color:'
+ fg_color_off + '">' + text + '</td></tr></table>',

'<table cellpadding="0" cellspacing="3" border="0" bgcolor="'
+ bg_color_on + '" width="100%"><tr><td style="padding: 3px; '
+'font-family: tahoma, verdana, arial; font-size: 13px; color:'
+ fg_color_on + '">' + text + '</td></tr></table>',

'<table cellpadding="0" cellspacing="3" border="0" bgcolor="'
+ bg_color_on + '" width="100%"><tr><td style="padding: 3px; '
+ 'font-family: tahoma, verdana, arial; font-size: 13px; color:'
+ fg_color_on + '">' + text + '</td></tr></table>'
];
}


MiG - 12/5/2007 at 10:30 AM

Does this still work for current versions of tigra menu pro / gold or has the code for these changed since?

And can you use it in combination with rollover images?
I'm using a specific font for my menu layout (and the rest of the site), which, for copyright reasons, I need to rasterize.

The reason I'm asking this is because I'd like the active button to be highlighted as described here (refers to this code as the basis).


tigra - 12/5/2007 at 08:30 PM

yep, this is the basic idea of using HTML inside the menu items. It works in all menu versions including current ones.
you can modify the code of the wrapper to add highlight for the current document.


xantia09 - 8/28/2011 at 08:48 PM

Hi,
Are there any known issues with displaying the independent colors in FF6? I'm working on a 3-level menu. One menu item in level 1 should be displayed with an independent color. If I install the wrapper the menu loads fine in IE9, but does not show in FF6 (or Safari). I noticed that a one-level menu works fine in all browers.

Thanks


Softcomplex: http://www.softcomplex.com/
Back to forum: http://www.softcomplex.com/forum/