Navigation Bar

Navigation Bar

Mouse over the headers at the top of the page and you'll get a drop-down menu. The individual menu items are highlighted when under the cursor and can be clicked to link to a new page. The headers themselves can also be set as links.

There are many options for this one, including colors and font. You can optionally make the bar float as well, making it stay in the same relative position to the browser window when the page is scrolled.

Using the Script

First, include both the navbar.js and dhtmllib.js files on your page. Then you need to add some code to configure the navigation bar and define your menus.

Setting up the Navigation Bar

To change the look of the bar from the default, you can set the following variables. Be sure to do this after the line that includes navbar.js so it will override the defaults:

	navBarX, navBarY - Defines the starting position of the navigation bar. By default this is (0,0) or the upper left corner of the window.
	navBarWidth - Sets the total width of the navigation bar. You can set it to fit the current window, size automatically or specify a exact width by setting a value as follows. < 0 - bar will be sized to fill the width of the browser window. This is the default. = 0 - size will be calculated automatically based on the number of headers defined and the menu sizes specified (see below). > 0 - the size will be set to the value given or the minimum size needed to display each header and drop-down menu, which ever is greater.
	navBarHeaderWidth - Sets the width of the header items.
	navBarMenuWidth - Sets the width of the drop-down menus. This should be the same as or larger than the header width.
	navBarBorderWidth - Sets the size of the border around each item.
	navBarPaddingWidth - Determines the amount of space between the menu text and the borders.
	navBarBorderColor - The color of the menu borders.
	navBarHeaderBgColor, navBarHeaderFgColor - Background and text colors used for the header items.
	navBarActiveBgColor, navBarActiveFgColor - Background and text colors used to highlight header items when moused over.
	navBarItemBgColor, navBarItemFgColor - Background and text colors used for the drop-down menu items.
	navBarHighBgColor, navBarHighFgColor - Background and text colors used to highlight drop-down menu items when moused over.
	navBarHeaderFontFamily, navBarHeaderFontStyle, navBarHeaderFontWeight, navBarHeaderFontSize - Defines the look of the header font. Standard CSS values are allowed.
	navBarItemFontFamily, navBarItemFontStyle, navBarItemFontWeight, navBarItemFontSize - Does the same for the drop-down menu item font.
	navBarTrackX, navBarTrackY - Set these to true or false. If true, the bar will move when the window is scrolled in that direction so that stays in the same position relative to the browser window. Normally, you only want y-tracking (vertical) on, unless you're sure that your menus will fit within the browser window of a small display like 640x480. Otherwise, the user won't be able to scroll right to see all the items.

Defining the Menus

There is one global variable used for the navigation bar, navBarMenus. Each element in this array represents a single menu which in turn is made up of another array containing pairs of text and links. Links can be either a URL or a string of JavaScript code which will be executed when the item is clicked. The first item of the menu is used as the header.

Probably the easiest way to explain the menu definitions is with an example. Below is a sample page with the script includes, variable settings and menu definition:

<html>
<head>
<script language="JavaScript" src="navbar.js"></script>
<script language="JavaScript" src="dhtmllib.js"></script>
<script language="JavaScript">

// Define navigation bar settings.

navBarY = 0;
navBarX = 0;

navBarHeaderWidth  = 115;
navBarMenuWidth    = 190;
navBarBorderWidth  =   1;
navBarPaddingWidth =   2;

navBarBorderColor   = "#000000";
navBarHeaderBgColor = "#999999";
navBarHeaderFgColor = "#000000";
navBarActiveBgColor = "#666666";
navBarActiveFgColor = "#ffffff";
navBarItemBgColor   = "#cccccc";
navBarItemFgColor   = "#000000";
navBarHighBgColor   = "#000080";
navBarHighFgColor   = "#ffffff";

navBarHeaderFontFamily = "Arial,Helvetica,sans-serif";
navBarHeaderFontStyle  = "plain";
navBarHeaderFontWeight = "bold";
navBarHeaderFontSize   = "10pt";
navBarItemFontFamily   = "Arial,Helvetica,sans-serif";
navBarItemFontStyle    = "plain";
navBarItemFontWeight   = "bold";
navBarItemFontSize     = "8pt";

// Define navigation bar menus.

navBarMenus[0] = new Array("Home", "/");

navBarMenus[1] = new Array(
  "News", "javascript:window.open('news/index.html')",
  "Current Headlines", "news/headlines.html",
  "Special Reports", "news/reports.html",
  "Archive", "news/archive.html");

navBarMenus[2] = new Array(
  "Sports", "javascript:window.open('sports/index.html')",
  "National Football League", "sports/nfl.html",
  "National Basketball Association", "sports/nba.html",
  "National Hockey League", "sports/nhl.html",
  "Major League Baseball", "sports/mlb.html");

navBarMenus[3] = new Array(
  "Weather", "javascript:window.open('weather/index.html')",
  "Current", "weather/current.html",
  "Five day Forecast", "weather/forecast.html",
  "Hurricane Watch Center", "weather/hurricane.html");

navBarMenus[4] = new Array(
  "Entertainment", "javascript:window.open('entertainment/index.html')",
  "Movies", "entertainment/movies.html",
  "Television", "entertainment/tv.html",
  "Books", "entertainment/books.html",
  "Theater", "entertainment/theater.html");

navBarMenus[5] = new Array(
  "Editorial", "javascript:window.open('editorial/index.html')",
  "Debate", "editorial/debate.html",
  "Opinion", "editorial/opinion.html",
  "Letters", "editorial/letters.html");

</script>
<title>My Page</title>
</head>
<body bgcolor="#ffffff" onload="navBarInit();">

<br><br> <!-- leave space for the bar -->
your page contents...

</body>
</html>

In the above example, the 'Home' header has no drop-down menu, it's just a link to the main page. All the other headers open in a new window using JavaScript code. The drop-down menu items will all link to a new page in the current window.

You can have as many menus as you want, with any number of items in each. You should adjust the navBarHeaderWidth and navBarmenuWidth values to get the look you want for the bar.

You can also adjust the width of the entire navigation bar by setting navBarWidth. The default is -1, which will cause it to fill the width of the browser window. Setting it to zero causes the bar to be sized automatically to best fit the headers and drop-down menus. If you want the bar to be a specific width, set it to the size you want (however, if this value is too small to properly display all the menu items, it will be adjusted as though you specified zero).

For framesets, to open a link in another frame specify some code like javascript: top.frames['main'].location = 'about.html' for the link. This would load the frame called "main" with the page "about.html".

Finally, just set the onload event in your <BODY> tag to call initNavBar and create the menus.

How it Works

The navBarInit() function first calls navBarBuild() which reads through the navBarMenus array and dynamically creates a menu for every element. These are all nested within a single, transparent base layer, making it easy to and move the whole bar at once.

The bulk of the navBarBuild() is devoted to creating the necessary HTML code for the layers, sub layers and styles and the menu text. It then adds this all to the page.

navBarInit() then positions each menu and sets up the event handling to highlight items when moused over, handle mouse clicks and reposition the whole bar when the page is scrolled (if tracking is turned on).

Layer Layout

The basic layout of the layers looks like the figure below. A dummy menu is added on the far right as filler. The menus overlap slightly from left to right, allowing the item text to be longer than the header and still fit within the browser window. Item text will wrap automatically if necessary.

Each menu is then clipped so that only the first item, the header, is visible. Note that the base layer needs to be clipped as well, otherwise it might interfere with the page underneath.

When a header is moused over, the menu layer is reclipped to full size, displaying the rest of the menu items. Again the base layer is clipped as well, so that the nested menu layer can be seen. When the cursor moves off the menu, both are clipped back to the smaller viewing region to hide it.

The menus themselves are made up of nested layers. A base layer is used for the border and mouse events. Each item is made up of three layers, one on top of the other.

The first has the item text with the normal background and foreground colors. The second has the same item text but uses the highlight colors. The third and top layer is transparent. It's is used to capture mouse events for the item.

Event Handling

The highlight layer is normally invisible so only the normal layer is seen. When the top layer is moused over, the highlight layer is turned on and when the mouse moves off, it is again hidden. Clicking on the top layer will cause the associated link to load or, if it's code, it will to be executed.

Here's a summary of the event handling used:

Layer	Event	Action
Menu layer	onmouseover	Show header highlight layer and reclip menu layer to show all menu items.
Menu layer	onmouseout	Hide header highlight layer and reclip menu layer to hide other items.
Header transparent layer	onmouseover	Not used, see menu layer actions.
Header transparent layer	onmouseout	Not used, see menu layer actions.
Item transparent layer	onmouseover	Show highlight layer.
	onmouseout	Hide highlight layer.
	onmousedown	Execute item link or code.

Scrolling

The code used to reposition the navigation bar is the same for both browsers but the way it is set up differs. For IE, an event is triggered when the window is scrolled, so this is set to call navBarScroll(). Netscape has no such event. Instead, if tracking is on, a setInterval() call is used to run the function every few milliseconds.

Window Resizing

Netscape browsers tend to lose track of DHTML elements when the browser window is resized. Also, the navigation bar is supposed to stretch across the width of the window. In order to ensure that the bar appears correctly, the window resize event is captured for both Netscape and IE. When a resize occurs, the entire page is reloaded by the navBarReload() function, causing the bar to be generated anew.

Note that some early releases of Netscape 4 have a bug that can cause a resize event to fire even when the window has not be resized. To correct this, the width and height of the window is saved at load time. On a resize, these are checked against the current width and height and a reload occurs only if the size has indeed changed.

Credits

Many of the techniques used in this script were taken from the excellent the 'HierMenus' script found at WebReference.com. And from the 'The JavaScript Menu Component' script found on Netscape's Dynamic HTML Developer Central site. Both are cross-browser.

Source

	navbar.html
	navbar.js
	dhtmllib.js