![]() | ||||||||||
![]() | ||||||||||
| ||||||||||
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 :[width, height] : item 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 :{"color":string, "width":int} : shadow parameters border :{"color":string, "width":int} : border parameters 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 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":"" }
With CodeThatMenu you can specify various bullet images for menu items:
"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} }
You can see an example and complite code here - Bullet Images Example
You can use various colors for items' background and even specify background image.
"style":{"bgcolor":"#669002"} "style":{"bgimg":"img/grass.gif"}
There are several types of styles:
As far as menu can be of two types
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 }
You can see an example and complite code here - Box Example Read more about CodeThatMenu >>
|