font variant property in menu_data.js

Having problems with DHTML Menu? There is usually somebody here who knows the answer.
Post Reply
leduf
Beginner
Beginner
Posts: 3
Joined: Sun Apr 17, 2005 3:27 pm

font variant property in menu_data.js

Post by leduf »

Hi everybody,

We are a small town in Luxembourg and would like to use your menu which is just great and IMHO second to none (I personally have used the Brothercake menu for our Intranet site). My question is: is it possible to use the FontVariant property in the menu_data.js either in the general horizontal and/or vertical style parameters or individually at the menu and/or submenu levels since we would like to use small-caps ?

Lots of thanks in advance,

leduf
User avatar
Ruth
 Team
 Team
Posts: 8763
Joined: Thu May 15, 2003 5:02 am
Location: Yucaipa, CA
Contact:

Post by Ruth »

Hi leduf,
leduf wrote:We are a small town in Luxembourg and would like to use your menu which is just great and IMHO second to none
Thank you. I agree whole-heartedly :)
leduf wrote:is it possible to use the FontVariant property in the menu_data.js in the general horizontal and/or vertical style parameters
In short yes, but not as a menu parameter such as fontvariant, at least I couldn't get that to work. You have two ways to do it.

1. you can use rawcss="font-variant:small-caps"; in the general style

2. you can create a class in your style sheet if you have one, or the head of the page[s] and use the offclass=""; onclass=""; parameters in the menu.

If you use the latter, you will have to also put in text-decoration:none; because Firefox and Netscape for some reason use the small caps and stick an underline in there also, even though there is no text-decoration specified. Strange.

Code: Select all

<style type="text/css">.var{font-variant:small-caps;text-decoration:none}</style>
If you are only using this in one or two menus and this is the only difference, then you can use the copy of method to create a style for those menus. So, let's say that you only want the font-variant to be different in two menus and nothing else to be different in those menus. You would place this, assuming the style name is subStyle

Code: Select all

variantStyle=new copyOf(subStyle);variantStyle.rawcss="font-variant:small-caps";
Note there are no beginning or ending {}

If you were using the offclass onclass method, then it would be the same as above but with variantStyle.offclass="var";variantStyle.onclass="var";

Keep in mind that not all browsers render such things a font-variant, just like some browsers have problems with font-weight: bolder, lighter, 900 etc.

Hope this helps.

Ruth
leduf
Beginner
Beginner
Posts: 3
Joined: Sun Apr 17, 2005 3:27 pm

Post by leduf »

Hi Ruth,

First thing thanks a lot for taking your time to post me so quickly with an impressive and detailed reply all the more since today is a Sunday. I will try both your suggestions and keep you posted if I can make either work. Thanks as well for the caveat that it could not be gracefully or at all supported by all browsers, I will keep that in mind.

leduf
leduf
Beginner
Beginner
Posts: 3
Joined: Sun Apr 17, 2005 3:27 pm

Post by leduf »

Hi again Ruth,

The rawcss way is OK with both H and V menus and it renders great at least with IE6.

Thanks again

leduf
User avatar
Ruth
 Team
 Team
Posts: 8763
Joined: Thu May 15, 2003 5:02 am
Location: Yucaipa, CA
Contact:

Post by Ruth »

You are very welcome. As to browser that don't support it, they should take the default font settings.

Ruth
Post Reply