Dear surfer, Welcome to the ":: JavaScript menu CodeThatMenu is advanced, cross-browser, state-of-art JavaScript menu control ::" page of the CodeThat.Com,The content of the page can be defined as: CodeThatMenu is an advanced, cross-browser, state-of-art JavaScript menu control that can be easily integrated into any web page. It requires no JavaScript knowledge from the prospective user and comes loaded with the features everybody expects from a modern navigation menu..Most likely you found us using the keywords: "CodeThatMenu, script, menu, javascript, javascript menu, free, free javascript menu, cross-browser, html, xml, css, submenu, toolbar, dropdown, transparent".This page (and site) presumes you have JavaScript enabled and best viewed when it is enabled. Please refer to your browser's documentation to find out how you can enable the JavaScript.You may want to do it as well because we at CodeThat.Com provide these JavaScript solutions and we are useless for you unless you enable the JavaScript. Looking forward to serve you,CodeThat.Com

PRODUCTS

SUPPORT

CODETHAT

Affiliate registration

Our Customers

STUDIO GRID TABLE MENU TREE XPBAR HINT EDITOR TAB FORM CALENDAR SCROLLER SHOPPINGCART TREEPHP PACKER

User
Manual

Introduction Menu types Style customize Menu position Items' actions

Dynamic menu Using XML HTML code as items' text Menu from the database

Build menu in the frame Menu borders Addition features Standard vs PRO

On-line
Builder

PRO

STD

123Guide Examples Download

Order PRO Now Themes FAQ

CODETHATMENU USER GUIDE

The following "10 steps" instruction will guide you step by step through the CodeThatMenu configuration process.

Download package with CodeThatMenu script and unarchive it.

For free version (STD) download use this link.

If you'd like to buy full version (PRO) use this link.

Please bear in mind that CodeThat scripts come in two editions STANDARD and PRO. Editions differ by the features set and license type.

Standard version is given for free and comes with the inscription representing our company's name. Upon registration you will get rid of that text.

Read Standard vs PRO to know the differences between CodeThatMenu Standard and PRO.

Create the basic HTML file.

Your file may look as following:

<HTML>
<HEAD>
<link href="common.css" rel="stylesheet" type="text/css">
<script language="javascript1.2" src="codethatsdk.js"></script>
<script language="javascript1.2" src="CodeThatMenupro.js"></script>
</HEAD>
<BODY>
<p>&nbsp;HELLO WORD!
</BODY>
</HTML>

Now lets create your first CodeThatMenu.

For this purpose you can both create separate config *.js file or write the config construction right to your *.html file. Here we will view second variant.

To describe new menu create an object with following structure:

<script language="javascript1.2">
<!--
var MenuDef = {
	"style" : { },
	"itemover" : { },
	"position" : { },
	"separator" : { },
	"defaction" : { },
	"items" : [ ]
}; 
//-->
</script>

Now we describe menu style, item over style, menu position and separator's style:

var MenuDef =
{
	"type"	 : "bar",
	"style"	 :
	{
		"css" : "xp",
		"box"	 : true,
		"size"	 : [250, 26],
		"bgcolor" : "#D3E5FA",
		"direction" : "v",
		"border" : {
			"color" : "#55A1FF", "size" : 1
		},
		"imgendon" : {
			"src" : "themes_img/arr_on.gif", "width" : 5, "height" : 10
		},
		"imgendoff" : {
			"src" : "themes_img/arr_off.gif", "width" : 5, "height" : 10
		},
		"imgdir" : {
			"src" : "themes_img/dir.gif", "width" : 24, "height" : 24
		},
		"imgitem" : {
			"src" : "themes_img/item.gif", "width" : 24, "height" : 24
		},
		"imgspace" : 5
	},
	"itemover" :
	{
		"css" : "xp", "bgcolor" : "#1665CB", "color" : "white",
		"imgdir" : {
			"src" : "themes_img/dir_over.gif", "width" : 24, "height" : 24
		},
		"imgitem" : {
			"src" : "themes_img/item_over.gif", "width" : 24, "height" : 24
		}
	},
	"separator" :
	{
		"style" :
		{
			"bgimg" : "themes_img/separator.gif",
			"size" : [250, 2],
			"imgitem" : ""
		}
	},
	"position" :
	{
		"absolute" : false,
		"pos" : [30, 20]
	}
}

Hint - if parameters description isn't clearly understanding please have a look to CodeThat Menu User Manual

To add new items to menu use the following structure:

"items" : [
{
	"text" : " ",      // text to be written inside
	"style" : { },     // item style in normal state
	"styleover" : { }, // item style in "mouse over" state
	"styleon" : { },   // for bool items specifies the style when in "on" state
	"menu" : { },      // submenu
	"action" : { },
	"position" : { },
	"type" : " "       // special item type ("bool"/"separator"),
	                   // for hierarchical menu only
} ]

For our example items's definition looks like this:

"items" : [
{
	"text" : "Example of XP-style menu"
},
{
	"text" : "Example of XP-style menu"
},
{
	"type" : "separator"
},
{
	"text" : "Example of XP-style menu"
},
{
	"text" : "Example of XP-style menu"
} ]

Now lets try to open our HTML file in the browser:

So we're further extending our js file by adding the submenu to the existing item.

It Is Done By Adding the Code Like This:

{
	"text" : "Example of XP-style menu",
	"menu" : {
		"style" :
		{
			"direction" : "v",
			"bar" :
			{
				"src" : "themes_img/bar_xp.gif",
				"size" : [6, 65]
			},
			"css" : "xp2",
			"bgcolor" : "white",
			"imgdir" :
			{
				"src" : "themes_img/subdir.gif",
				"width" : 18, "height" : 16
			},
			"imgitem" :
			{
				"src" : "themes_img/subitem.gif",
				"width" : 18,
				"height" : 16
			},
			"size" : [180, 20]
		},
		"separator" :
		{
			"style" :
			{
				"bgimg" : "themes_img/separator.gif",
				"size" : [180, 2],
				"imgitem" : ""
			}
		},
		"itemover" :
		{
			"css" : "xp2",
			"bgcolor" : "#1665CB",
			"color" : "white",
			"imgdir" :
			{
				"src" : "themes_img/subdir_over.gif",
				"width" : 18,
				"height" : 16
			},
			"imgitem" :
			{
				"src" : "themes_img/subitem_over.gif",
				"width" : 18,
				"height" : 16
			}
		},
		"position" :
		{
			"anchor" : "ne",
			"anchor_side" : "nw"
		},
		"items" :
		[
		{
			"text" : "JS code",
			"action" : {
				"js" : "openWin(30, 30);"
			}
		},
		{
			"type" : "separator"
		},
		{
			"text" : "Go to URL",
			"menu" :
			{
				"separator" :
				{
					"style" :
					{
						"bgimg" :
						"themes_img/separator.gif",
						"size" : [100, 2],
						"imgitem" : ""
					}
				},
				"style" :
				{
					"size" : [100, 20]
				},
				"items"	 : [
				{
					"text" : "Item1"
				},
				{
					"text" : "Item2"
				},
				{
					"type" : "separator"
				},
				{
					"text" : "Item3"
				} ]
			},
			"action" :
			{
				"url" : "http://yahoo.com",
				"target" : "_blank",
				"title" : "Yahoo!!!!"
			}
		},
		{
			"text" : "Boolean item",
			"type" : "bool",
			"action" : {
				"on" : "alert(\'on!\');",
				"off" : "alert(\'off!\');"
			}
		} ]
	}

So... A complete code for this example you can see here:

<HEAD>
<link href="xp.css" rel="stylesheet" type="text/css">
<script language="javascript1.2" src="codethatsdk.js"></script>
<script language="javascript1.2" src="menu/CodeThatMenupro.js"></script>

<script language="javascript1.2">
<!--
var MenuDef = {
	"type"	 : "bar",
	"style"	 : {
		"css" : "xp",
		"box"	 : true,
		"size"	 : [250, 26],
		"bgcolor" : "#D3E5FA",
		"direction" : "v",
		"border" : {
			"color" : "#55A1FF", "size" : 1
		},
		"imgendon" : {
			"src" : "themes_img/arr_on.gif", "width" : 5, "height" : 10
		},
		"imgendoff" : {
			"src" : "themes_img/arr_off.gif", "width" : 5, "height" : 10
		},
		"imgdir" : {
			"src" : "themes_img/dir.gif", "width" : 24, "height" : 24
		},
		"imgitem" : {
			"src" : "themes_img/item.gif", "width" : 24, "height" : 24
		},
		"imgspace" : 5
	},
	"itemover" : {
		"css" : "xp", "bgcolor" : "#1665CB", "color" : "white",
		"imgdir" : {
			"src" : "themes_img/dir_over.gif", "width" : 24, "height" : 24
		},
		"imgitem" : {
			"src" : "themes_img/item_over.gif", "width" : 24, "height" : 24
		}
	},
	"separator" : {
		"style" : {
			"bgimg" : "themes_img/separator.gif",
			"size" : [250, 2], "imgitem" : ""
		}
	},
	"position" : {
		"absolute" : false, "pos" : [30, 20]
	},
	"defaction" : {
		"title" : "This is an action title"
	},
	"items" : [
	{
		"text" : "Example of XP-style menu",
		"menu" : {
			"style" : {
				"direction" : "v",
				"bar" : {
					"src" : "themes_img/bar_xp.gif",
					"size" : [6, 65]
				},
				"css" : "xp2",
				"bgcolor" : "white",
				"imgdir" : {
					"src" : "themes_img/subdir.gif",
					"width" : 18, "height" : 16
				},
				"imgitem" : {
					"src" : "themes_img/subitem.gif",
					"width" : 18, "height" : 16
				},
				"size" : [180, 20]
			},
			"separator" : {
				"style" : {
					"bgimg" : "themes_img/separator.gif",
					"size" : [180, 2],
					"imgitem" : ""
				}
			},
			"itemover" : {
				"css" : "xp2", "bgcolor" : "#1665CB",
				"color" : "white",
				"imgdir" : {
					"src" : "themes_img/subdir_over.gif",
					"width" : 18, "height" : 16
				},
				"imgitem" : {
					"src" : "themes_img/subitem_over.gif",
					"width" : 18, "height" : 16
				}
			},
			"position" : {
				"anchor" : "ne",
				"anchor_side" : "nw"
			},
			"items"	 : [
			{
				"text" : "JS code",
				"action" : {
					"js" : "openWin(30, 30);"
				}
			},
			{
				"type" : "separator"
			},
			{
				"text" : "Go to URL",
				"menu" : {
					"separator" : {
						"style" : {
							"bgimg" :
							"themes_img/" + 
							"separator.gif",
							"size" : [180, 2],
							"imgitem" : ""
						}
					},
					"style" : {
						"size" : [100, 20]
					},
					"items"	 : [
					{
						"text" : "Item1"
					},
					{
						"text" : "Item2"
					},
					{
						"type" : "separator"
					},
					{
						"text" : "Item3"
					} ]
				},
				"action" : {
					"url" : "http://yahoo.com",
					"target" : "_blank",
					"title" : "Yahoo!!!!"
				}
			},
			{
				"text" : "Boolean item",
				"type" : "bool",
				"action" : {
					"on" : "alert(\'on!\');",
					"off" : "alert(\'off!\');"
				}
			} ]
		}
	},
	{
		"text" : "Example of XP-style menu"
	},
	{
		"type" : "separator"
	},
	{
		"text" : "Example of XP-style menu"
	},
	{
		"text" : "Example of XP-style menu"
	} ]
}; 
//-->
</script>

</head>

<body>

<script language="javascript1.2">
<!--
var menuTest1 = new CMenu(MenuDef, 'menuTest1');
menuTest1.create();
menuTest1.run();
//-->
</script>

</body>

If you prefer to keep the menu at the separate file you should paste menu definition to .js file. Your .html file will look like the:

<HEAD>
<link href="common.css" rel="stylesheet" type="text/css">
<script language="javascript1.2" src="codethatsdk.js"></script>
<script language="javascript1.2" src="menu/CodeThatMenupro.js"></script>
<script language="javascript1.2" src="menu/YOUR_MENU.js"></script>
<script language="javascript1.2">
<!--
var YourMenu = new CMenu(YourMenuDef, 'YourMenu'); 
//-->
</script>

</HEAD>
<BODY>
<p>&nbsp;HELLO WORD!
<p>
      <script language="javascript1.2">
<!--
YourMenu.create();
YourMenu.run(); 
//-->
</script>
</BODY>
</HTML>

Hint - for using CodeThat Scripts you aren't limited only by html files. For example, you can build it in the *.php files. We've made it at this site :)

Congratulations! You have just created your first CodeThatMenu enhanced web page.

To make your life easier we do plan to supply you with on and off line menu builders in the nearest time.

Try an Example >> [popup]

[ Home ] [ Forum ] [ Contacts ] [ Site Map ] [ News ] [ Links ] [ Sales & Prices ] [ Downloads ]

[ Go Top ]