New Revised CSS Library Forums Web Tools
FAQs Awards Usage Terms Contact
Categories
Other Sections
Sweet Ads
Compatibility
  • IE5+: IE 5 and above
  • FF1+: Firefox 1.0+. NS6+ and FF beta are assumed as well.
  • Opr7+: Opera 7 and above.
Bookmark online:
IE5+ Opr7+

Top Navigational Bar II

Author: Mike Hall

Updated: 08/30/01 Fixed IE 6 onMouseover menu bug. Only code of Step 3 affected!

Description: One of the best of it's kind, this is Mike's two-level menu bar script. Use it to intelligently organize your site's links while adding a touch of DHTML coolness at the same time. Wonderfully useful and cool a creation this is.

The script has been updated to support a variety of subtle, but interesting new features, most of them dealing with menu display. You can now specify a width for each individual menu category and sub category, invert the later so they are displayed above, instead of below, the bar (useful if your bar is at the bottom of the page), and align it left, center, or right. Finally, you can now have multiple menu bars on one page! The core code has also be streamlined for greater efficiency, plus a few bugs have been squashed.

Demo: Scroll up!

Directions Developer's View

Step 1: Insert the below into the <head> section of your page:

Select All

Step 2: Add the below event handler into the <BODY> tag itself. as follows:

<body onload="init()">

Step 3: Finally, the code of Step 1 references an external JavaScript file ("navcond.js"), which you'll need to download below, and upload along with your page:

exfiles.zip (click or click with shift key depressed for NS users)

Unzip the above file, and locate "navcond.js". Upload this .js file to your webpage directory, or the script won't run!

To configure the menu/sub menu items and their colors, simply edit the code of Step 1 above (see documentation inside). It it extremely straightforward.

Enjoy!

Note: The above menu setup uses the external JavaScript file "navcond.js", which is a condensed version of the original "dhtmllib.js" and "navbar.js" files. It is condensed in that the contained code is stripped of ALL comments and linebreaks, resulting in a much smaller file download (25k vs 40k with the later two files). If your main concern is with legibility and ease-of-modification of the menu script (ie: for the sake of others in your company who may have to work with the menu), you should use the two other .js files included inside the zip file instead: "dhtmllib.js" and "navbar.js". Simply upload the two files in place of "navcond.js", and change the reference inside Code 1 to point to them instead. Note, however, in return for extensive documentation and legibility, you sacrifice download speed.

Menu documentation

While the below is not required reading, it is definitely recommended, and is helpful in getting to know how the menu works, and to harness some of its more advanced features.

1) Main menu methods

The following are the menu's core methods, which with the above code setup, you call using (myNavBar1.the_method()):

setSizes(border, padding, separator) Defines the width of the border around headers and menus, the amount of spacing surrounding the item text and the width of the border between each item in a drop down.
setColors(bdColor, hdrFgColor, hdrBgColor, hdrHiFgColor, hdrHiBgColor, itmFgColor, itmBgColor, itmHiFgColor, itmHiBgColor) Sets the various colors used for the bar. The first value sets the border color. The next two set the text and background colors for a header and the two after that set the colors used when a header is highlighted. The last four values do the same for the menu items.
setFonts(hdrFamily, hdrStyle, hdrWeight, hdrSize, itmFamily, itmStyle, itmWeight, itmSize) Defines the font used for the headers and the menu items. Standard CSS values may be used.
hide() Hides the navigation bar from view.
show() Make the navigation bar visible.
moveTo(x, y) Moves the bar to the specified coordinates. By default navigation bars will be positioned at (0, 0).
moveBy(dx, dy) Moves the bar by the given values.
setzIndex(z) Sets the zIndex value of the bar and. drop down menus. This allows you to set the stacking order when a bar overlaps another bar or positioned element.
getWidth() Returns the current width of the bar. This is useful if you initially define a bar with a width of zero and want to find what the resulting width is after it has been created.
getMinWidth() Returns the minimum width allowed for the bar. This is based on the total width required for the headers.
setAlign(alignment) Given a value of "left", "center" or "right" this will change the position of the headers relative to the bar. If a numeric value is given instead, the headers will be moved to the position that many pixels from the left edge of the bar. The headers will be repositioned dynamically if the bar has already been created.
resize(width) Resizes the bar to the given width. If already created the headers will be repositioned according the the bar's current alignment setting. Note that if you specify a width less than the value given by getMinWidth() the bar will be resized using the minimum required width instead.
invert() Toggles the placement of the menus. By default they drop down below the bar but they can also be made to appear above the bar.

2) Menu links targetting

When an item or header is clicked on, the associated link string is checked. If it's a null string, nothing is done. If the string starts with "javascript:" the code that follows is executed. For anything else, the string is taken to be a URL and the window's location is set to that value, causing the link to be followed.

To setup a menu link so that the url loads in another frame, use the following javascript: url:

javascript:parent.framename.location='http://dynamicdrive.com'

where "framename" is the name of the frame you wish to target.

3) Displaying the menu across two frames?

Frames are treated as individual windows by the browser. The bar and drop down menus cannot cross over the boundaries between frames, any more than an image on a page can be made to stick outside of the browser window. Likewise, you cannot have a drop down appear in a frame other than the one containing its parent bar.