Installation « Documentation

Installation Guide for jsDOMenuBar Version 1.1

Since jsDOMenuBar is an add-on for jsDOMenu, you need to install jsDOMenu at the same time. Thus, installing jsDOMenuBar is very similar to installing jsDOMenu.

In order for jsDOMenuBar to work, you need at least four files:

  1. jsdomenu.js: Contains the source code for jsDOMenu.
  2. jsdomenubar.js: Contains the source code for jsDOMenuBar.
  3. jsdomenu.inc.js: Contains the function createjsDOMenu() where you enter the Javascript codes to create the menus and menu items, customize the appearances, etc.
  4. [theme_name].css: Theme file that contains the CSS statements that style the menu bar, menu bar item, etc. An example of a theme file that is provided is classic.css.
  5. jsdomenu.config.js: Optional. Contains all the global public properties that you can override.

Assume your web page is named index.html, and it has nothing except the basic HTML elements:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
 "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>

<title>My Homepage</title>
</head>
<body>
<p>Welcome to my homepage.</p>
</body>
</html>

Insert the onload event handler initjsDOMenu() in the <body> start tag:

<body onload="initjsDOMenu()">

Insert the location of the theme file (e.g. classic.css) before the </head> closing tag:

<link rel="stylesheet" type="text/css" href="classic.css" />

Insert the locations of the three source files (jsdomenu.js, jsdomenubar.js and jsdomenu.inc.js) before the </head> closing tag:

<script type="text/javascript" src="jsdomenu.js"></script>
<script type="text/javascript" src="jsdomenubar.js"></script>
<script type="text/javascript" src="jsdomenu.inc.js"></script>

The resulting index.html should look like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
 "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<link rel="stylesheet" type="text/css" href="classic.css" />
<script type="text/javascript" src="jsdomenu.js"></script>
<script type="text/javascript" src="jsdomenubar.js"></script>
<script type="text/javascript" src="jsdomenu.inc.js"></script>
<head>
<title>My Homepage</title>

</head>
<body onload="initjsDOMenu()">
<p>Welcome to my homepage.</p>
</body>
</html>

If you override any global public property in jsdomenu.config.js, then you need to insert the location of jsdomenu.config.js before the location of jsdomenu.js, i.e.:

<script type="text/javascript" src="jsdomenu.config.js"></script>
<script type="text/javascript" src="jsdomenu.js"></script>

Take note that the ordering is important. The file jsdomenu.config.js must be declared before jsdomenu.js.

Next, you need to enter the Javascript codes inside the function createjsDOMenu() that is in the file jsdomenu.inc.js. View the Reference page to learn how to create and customize jsDOMenuBar.

Back to Documentation


Compiled on 16 January 2005.

The latest version is available at http://www.tohzhiqiang.per.sg/projects/jsdomenubar/docs/install.php.