Board Logo

mouseover font color only works in some parts of menu item
djtizzlemaster - 2/26/2008 at 11:55 PM

The menu item normally has a white background with blue text.

On mouseover, it changes to blue background with white text.

The problem is that the font color only changes to white when the cursor is hovering on a certain part of the menu item. When the cursor is hovering toward any of the outer edges of the item, the font color goes back to blue (but the background stays blue, making the text invisible).

To visualize my problem, check out:

http://johnnytisdale.com/images/hover.jpg

In order to help me with this problem you should know:

Quote:
Originally posted by tigra
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],
];


( from thread http://www.softcomplex.com/forum/viewthread_5/ )

I am using this wrapper function to set font SIZES independently for each menu item within a single block.

I know that you can just put HTML into the item captions. The problem with that is that I need to set the size of my font in PIXELS, not HTML numbers. So instead of <font size=2>, I need it to be <font style="size: 10px"> or whatever. I tried using that in the caption fields in the builder, but that didn't work.

Here's what my version of it looks like:

In menu_items.js:

function wrap(text) {
return('<table class="wrap" cellpadding="0" cellspacing="3" border="0" width="100%"><tr><td>'
+ text + '</td></tr></table>');
}

[wrap('<b>EVENT PLANNING</b>'), 'http://URL', null,

In menu.css:

table.wrap {
padding: 3px;
font-family: tahoma, verdana, arial;
font-size: 14px;
color: blue;
}

table.wrap:hover {
color: white;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}



Thanks,
Johnny Tisdale


~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Deep peace on the running wave to you,
Deep peace on the flowing air to you,
Deep peace on the quiet earth to you,
Deep peace of the shining stars to you,
Deep peace on the gentle night to you,
Moon and stars pour their healing light on you,
Deep peace to you.

-Traditional Gaelic Blessing


tigra - 4/21/2008 at 02:15 PM

see if you experience the same problem with the sample code.
make sure:
1. to remove any css for the menu elements
2. the HTML code inside the menu items occupy all the space inside the menu item both vertically and horizontally


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