New Revised CSS Library Forums Web Tools
FAQs Awards Usage Terms Contact
Categories
Other Sections
Sweet Ads
Compatibility
Bookmark online:

FF1+ IE5+ Opera 7+

HV Menu v5.5

Note: Updated July 31st, 2003 for doctype=strict mode compliance.

Description: We named this script "HV menu" for its ability to be laid out both horizontally (as a top menu) and vertically (as a side menu), but it might as well be for its highly versatile nature. The menu's impressive list of features makes it one of the best scripts of its kind today:

  • Ability to act either as a horizontal or vertical menu (through toggle of a single variable)
  • Multi-level submenus supported (ie: 3 levels down)
  • Menu interface completely customizable (color, alignment etc)
  • Drop down in another frame supported (frames support)
  • Functional in all major DHTML browsers- IE4+, NS4, NS6+, Opera7+

New features in version 5.5 (compared to v5.0):

  • Menu status clarified- HV menu found on Dynamic Drive may be used on both commerical and non commerical sites. This applies EXCLUSIVELY to script found on Dynamic Drive, and not author's site.
  • Menu can be vertically static
  • Menu can be horizontal justified
  • Selected path can stay highlighted
  • More control over arrows.
  • Fixed relative positioning bug in Mozilla
What's not on the menu is the question!

Demo: To the left of you. Click here to see an example of the menu displayed horizontally.


Directions

Step 1: Insert the following code into the <BODY>, right below the tag itself:

Select All

Step 2: Going off road now, you now need to download the below zip file:

hvmenu.zip

and upload the containing two .js files "exmplmenu_var.js" and 'menu_com.js", plus the three image files (tri.gif, tridown.gif, trileft.gif) into your webpage directory. All customizations to the menu is done in the former .js file (exmplmenu_var.js).

You're done, at least as far as installation goes :)

Customizing the menu- more information

Customizing this script is relatively straightforward, assuming you take the time to read up on its documentation. Contained inside "hvmenu.zip" are several helper files:

-install.htm (basically a repeat of the above instructions)
-install-frames.htm (install instructions for setting up menu across frames. Ignore unless relevant)
-config.htm (MUST read. Description of the various variables in "exmplmenu_var.js")
-example.htm (example of menu)

The most important file to read is "config.htm", which contains a thorough description of "exmplmenu_var.js", the external JavaScript you need to modify to customize the menu.

Note: If you wish to install the menu on a page containing frames (so the menu resides in one frame, and the resulting sub menus drop down in another), refer to "install-frames.htm" over install.htm.

Upgrading from v5.41 to v5.5- more information

To upgrade from v5.41 to v5.411 (which adds Opera 7 functionality), simply download the above zip file, and re-upload "menu_com.js". That's it.

Upgrading from v5.0 to v5.41- more information

For people upgrading from version 5.0 of HV menu to v.5.411, all of the changes to the menu takes place in the two .js files above, meaning you'll just need to download, edit, and reupload these two files (contained inside hvmenu.zip).

The code block containing your menu links have NOT changed from v5.0 to v5.411, so you can just copy and paste this block from the old exmplmenu_var.js file to the new. The rest of the work involves simply tweaking the variables above the block to specify menu coloring and position.

Good luck!