Top Navigational Bar II
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!
Step 1: Insert the below into the <head> section of your page:
Step 2: Add the below event handler into the <BODY> tag itself. as follows:
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.
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
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.