different fonts, colors in menu - is it possible?

bASAEF

02-03-2004, 11:16 AM

Hi,
I found some very cool javascript menus for my site - with many sublevels, fully customizable and all, the problem is I need to have text with two different colors and also two different fonts. In all the menus I tried I could choose from only a certain font family, and also the text color on mouseover and on "not mouseover".

For example, this (http://www.dynamicdrive.com/dynamicindex1/hvmenu/horizon.htm) is a very good menu - it works great and is exactly the thing I need. So can anyone please tell me what script to add so that I can have the above mentioned options - two different fonts (font families will do) and two different colors for one and the same text level.

Here's an example to make myself more understandable:
Open the link and see how the first button looks - it says "Home".This is how I need it to look: >> Home

The arrows are red and are Courier, while "Home" is another font and color.

So I wasn't able to find any menu with these kinda options.

Please help. Thanks in advance.

bASAEF

Roy Sinclair

02-03-2004, 02:45 PM

Look at the accessible web menu here (http://www.codingforums.com/showthread.php?s=&threadid=31904) . Since it's design is built on html you can simply have additional html code within the menu to alter the font and color for parts of the text. Don't you DARE use the <font> tag for that though ;) .

bASAEF

02-03-2004, 05:17 PM

Thanks, but unfortunately this menu works worse than the one I have - I cannot sacrifice speed and ease of use...:confused:

RadarBob

02-03-2004, 09:07 PM

Cascading Style Sheets to the rescue!
*Define two "styles" each w/ a unique name.
*On the tag containing that text you want to effect set "class=styleOne" for example.

"Cascading" in CSS means that styles are inhereted by "inside" tags - like <tr> tags inside of <table>. This inheritance does not over-ride any explicit stylings on these "inside" tags.

You might want to use <span> tags around the pieces of text you want different, just so you can "hang" the class attribute on it.

The <style> tag goes in the <head>

<style>
.typeOne {
color: green; /* why it's not called "font-color" is beyond me */
font-family: Garamond, sans-serif;
/* if Garamond is not on .this computer, the default sans-serif font will be applied. */
font-weight: bold;
font-size: 14px;
font-style: italic;

/* a shorthad for (most of) the above: */
font: italic bold 14px sans-serif;
}

.typeTwo {
color: blue;
font: Times serif;
/* if .this computer does not have Times font, the default serif font will be used */
}
</style>

// somewhere in your HTML
<anyoldtag id='file_menu' class='typeTwo'> some text </anyoldtag>

// somewhere in your javascript, to change the style.
getElementById('file_menu').className = 'typeOne';
// yes, it is "className", not "class" when referencing with DOM.

bASAEF

02-04-2004, 02:03 PM

Ok - problem solved!!!
THx X10