Introduction

If you are interested in a GUI tool that helps you to create a new theme, Burkhard Eggers of Tapestry JSCookMenu created a Java application Theme Studio for JSCookMenu, which promises to create a new theme in minutes. I have not tried it out myself, but its description sure sounds enticing. (BTW, I am not involved in anyways with his projects, so if you need help with the tool, go to its project forum.)

This document describes how JSCookMenu organizes the menu structure for the viewing purpose. Usually it is easier to modify an existing theme. You can copy the theme to a new directory, and replace ThemeABC with your own theme name. Then starts doing modifications. A theme requires both style sheet and menu properties.

Overview

JSCookMenu builds an independent table for the main menu and each of the sub menus. Since the main menu can be layed out horizontally or vertically, CSS for the two layout may be fine tuned. Use the following DOM hierachy as the guide line in designing the style sheet.

DOM Hierarchy for CSS

• Main Menu Horizontal Layout
• Main Menu Vertical Layout
• SubMenu

Note: '*' is the theme prefix. For example, for the MiniBlack theme, 'ThemeMiniBlack' is its prefix. It should be unique.

Theme Properties

Another important aspect of a theme is its theme properties. It basically defines what should appear to the left and right of the main/sub menu item and such. Notice that there is distinction between a regular menu item and an item that has sub menus (folderItem). These properties are used when user did not specify the corresponding part in the menu tree. The following is the node property for the Panel theme. It is not as scary as it looks. Basically, one specifies the text string/images should be put at appropriet places. Notice that menu splits are also specified.

The default theme property list:

// default theme properties
var _cmNodeProperties =
{
	// theme prefix
	prefix:	'',

  	// main menu display attributes
  	//
  	// Note.  When the menu bar is horizontal,
  	// mainFolderLeft and mainFolderRight are
  	// put in <span></span>.  When the menu
  	// bar is vertical, they would be put in
  	// a separate TD cell.

  	// HTML code to the left of the folder item
  	mainFolderLeft: '',
  	// HTML code to the right of the folder item
  	mainFolderRight: '',
	// HTML code to the left of the regular item
	mainItemLeft: '',
	// HTML code to the right of the regular item
	mainItemRight:	'',

	// sub menu display attributes

	// HTML code to the left of the folder item
	folderLeft:		'',
	// HTML code to the right of the folder item
	folderRight:	'',
	// HTML code to the left of the regular item
	itemLeft:		'',
	// HTML code to the right of the regular item
	itemRight:		'',
	// cell spacing for main menu
	mainSpacing:	0,
	// cell spacing for sub menus
	subSpacing:		0,

	// Below are optional settings
	// If not set, use the default

	// auto disappear time for submenus in milli-seconds
	delay:			500,

	// 1st layer sub menu starting index
	zIndexStart:	1000,
	// z-index incremental step for subsequent layers
	zIndexInc:		5,

	// sub menu header appears before the sub menu table
	subMenuHeader:	null,
	// sub menu header appears after the sub menu table
	subMenuFooter:	null,

	// submenu location adjustments
	//
	// offsetHMainAdjust for adjusting the first submenu
	// 		of a 'hbr' menu.
	// offsetVMainAdjust for adjusting the first submenu
	//		of a 'vbr' menu.
	// offsetSubAdjust for subsequent level of submenus
	//
	offsetHMainAdjust:	[0, 0],
	offsetVMainAdjust:	[0, 0],
	offsetSubAdjust:	[0, 0],

	// act on click to open sub menu
	// not yet implemented
	// 0 : use default behavior
	// 1 : hover open in all cases
	// 2 : click on main, hover on sub
	// 3 : click open in all cases (illegal as of 1.5)
	clickOpen:		1,

	// special effects on open/closing a sub menu
	effect:			null
};

In JSCookMenu 2.0, one can insert additional HTML elements before and after the sub menu table. You can check the Panel theme to see how it is used.

Then, one needs to specify the menu splits. Below are Gray theme splits.

// for sub menu horizontal split
var cmThemeGrayHSplit = [_cmNoClick, '<td colspan="3" class="ThemeGrayMenuSplit"><div class="ThemeGrayMenuSplit"></div></td>'];
// for vertical main menu horizontal split
var cmThemeGrayMainHSplit = [_cmNoClick, '<td colspan="3" class="ThemeGrayMenuSplit"><div class="ThemeGrayMenuSplit"></div></td>'];
// for horizontal main menu vertical split
var cmThemeGrayMainVSplit = [_cmNoClick, '|'];

For a complete theme, three menu splits must be provided. The variables are named in the following fashion:

• Main menu horizontal split: 'cm' + prefix + 'MainHSplit'
• Main menu vertical split: 'cm' + prefix + 'MainVSplit'
• Sub menu horizontal split: 'cm' + prefix + 'HSplit'

Menu splits are special cases of _cmNoClick which prevent JSCookMenu from doing hovering actions. For more infomation of how _cmNoClick is used, read the last example in the demo page.

Finally, when you have finished designing a cool theme, could you send me a copy so that I could put it on the web?