Style Customize

CodeThatMenu allows you to customize style for whole submenus and individual items. Different styles can be assigned to ordinary items and for items that are under mouse cursor.

Style specified in the topmost menu describes the default style for the whole menu and all menu items.

When the style attribute is specified in the item's description or submenu description, it overrides the style of the parent.

To specify style for menu and menu items, use the "style" property, as is shown at folowing construction:

"style"	: {
	"css" : "",
	"box" : "",
	"size" : [width, height],
	"align" : "",
	"color" : "",
	"bgimg" : "",
	"bgcolor" : "",
	"shadow" : {
		"color", "width"
	}
	"border" : {
		"color", "width"
	}
	"imgitem" : "",
	"imgdir" : "",
	"imgdiropen" : "",
	"imgendon" : "",
	"imgendoff" : "",
	"z" : ""
}

where

css              : string          // CSS class
box              : bool            // container property
size             : [               // item width/height
	width,
	height
]
align            : string          // text alignment (left/right/center/middle)
color            : string          // color string for the text
bgimg            : string          // url of the background image
bgcolor          : string          // color string
shadow           : {               // shadow parameters
	"color" : string,
	"width" : int
}
border           : {               // border parameters
	"color" : string,
	"width" : int
}
imgitem          : string          // url of the bullet image for non - submenu
                                   // (bar) or plain (tree) items or default
                                   // bullet for a menu item
imgdir           : string          // url of the bullet image for submenu items
imgdiropen       : string          // url of the bullet image for open submenu with
                                   // items
imgendon         : string          // url of the end item bullet when in "on" or
                                   // "opened" state
imgendoff        : string          // url of the end item bullet when in "off" or
                                   // "closed" state
z                : int             // z - index

Borders and Shadows, Itemover, Css, Direction

CodeThatMenu allows you to specify borders and shadows for your menus. For this purpose you should specify border/shadow like it shown at the example:

"style" :
{
	"border" : {
		"color" : "#003882", "width" : 1
	},
	"shadow" : {
		"color" : "gray", "width" : 2
	}
}

To customize style for items under mouse cursor you may use code like following:

"itemover" : {
	"css" : "test1",
	"bgcolor" : "#458EEE",
	"align" : "middle",
	"color" : "white"
}

You can use CSS to set certain properties for your menu:

"style"	 : {
	"css" : "test1"
}

where "test1" is a name of css-style that can be described in a separate css-file or in the html file.

.test1
{
	FONT-SIZE : 8pt;
	FONT-FAMILY : Verdana, Arial;
	TEXT-ALIGN : justify;
	FONT-WEIGHT : bolder;
	MARGIN-LEFT : 5px;
	MARGIN-RIGHT : 5px
}

To determine direction of your menu - horizontal or vertical menu - use the "direction" property. What is more, your topmost menu and its submenus may have different direction.

Horizontal menu/submenu:

"style"	 : {
	"direction" : "h",
}

Vertical menu/submenu:

"style"	 : {
	"direction" : "v",
}

You may want to cancel border/shadow that was defined for menu at whole for a certain menu item or submenu.

"style" : {
	"border" : "",
	"shadow" : ""
}

Example - Borders and Shadows

You can see an example and complete code here - Borders and Shadows Example

Bullet Images

With CodeThatMenu you can specify various bullet images for menu items:

bullet image at the begin of item which has no submenu

bullet image at the begin of item which have submenu

bullet image at the end of item when it's in "on" or "opened" state

bullet image at the end of item when in "off" or "closed" state

"style" : {
	"imgitem" : {
		"src" : "img/bul.gif", "width" : 16, "height" : 16
	},
	"imgdir" : {
		"src" : "img/dir.gif", "width" : 16, "height" : 16
	},
	"imgendon" : {
		"src" : "img/arr_down.gif", "width" : 16, "height" : 16
	},
	"imgendoff" : {
		"src" : "img/arr_right.gif", "width" : 16, "height" : 16
	}
}

Example - Bullet Images

You can see an example and complete code here - Bullet Images Example

Backgrounds

You can use various colors for items' background and even specify background image.

"style" : {
	"bgcolor" : "#669002"
}

"style" : {
	"bgimg" : "img/grass.gif"
}

Example - Backgrounds

You can see an example and complete code here - Backgrounds Example

"Box" Property

There are several types of styles:

menu style

normal item style

"mouse over" item style

As far as menu can be of two types

box

and separate items

the menu style describes either of them depending on "box" property.

When "box" is true, border, shadow, background image and background color properties will be applied to the group of items. Other properties are applied to the item. When "box" is false, all the properties are applied to the particular item of the menu, except for "itemoffset", which describes spacing between items in non-box mode.

"style" : {
	"box" : true
}

Example - "Box" property

You can see an example and complete code here - Box Example

Separators, Opacity and Timer

You can specifies the menu separator's style by using code like this:

"menu" : {
	"separator" : {
		"style" : {
			"bgcolor" : "black", "size" : [1, 30]
		}
	},
	"items"	 : [
	{
		"text" : "Item 2 : 1"
	},
	{
		"type" : "separator"
	},
	{
		"text" : "Item 2 : 2"
	} ]
}

Also you can define an items opacity (IE 5+):

"style" : {
	"opacity" : 50
}

Use a timer to determine delay when submenu is visible after mouse over event:

"timer" : 500

Example - Separators, Opacity and Timer

You can see an example and complete code here - Separators, Opacity and Timer Example

Menu Bar

You can describe the vertical or horizontal bar (direction is chosen depending on "direction" property). If you'd like to stretch the bar by one of the directions, -1 must be specified in the corresponding place.

This feature is availabled for all menu types. But for toolbar menu bar has an addition functionality - you use bar to move toolbar menu over the window.

"style" :
{
	"bar"	 :
	{
		"src" : string,
		"bgcolor" : string,
		"size" : [width, height]
	}
}

Example - Menu Bar

You can see an example and complete code here - Menu Bar Example

Read more about CodeThatMenu >>