CodeThatMenu User Manual 

 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		:[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}
                    }

  BORDERS and SHADOWS, ITEMOVER, CSS, DIRECTION

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":"" }

  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 complite 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"}

  "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 complite code here - Box Example

Read more about CodeThatMenu >>