Archived Content

website header

what can this JavaScript do? [top] It can be easily configured as either a horizontal navBar or a Vertical navMenu - change one var from 0 to 1; The navBar/navMenu can be placed anywhere on the screen, although this is relative to the top left corner of the screen; Menu links can be configured to be relative, full pathname, open new windows or use the mailto link; Up to three dropDown/foldOut menus possible; The width of each dropDown can be easily set to different size; The style of the text and link background/borders etc can be easily changed via the nav stylesheet; The file size is small and the script is simple for the browser to handle; The script is cross browser compatible - NS 7.0 (only partial compatibility with 6.2) and IE 4.0+

what files/scripts do you need? [top] nav.js This file holds the core code for the navBar/navMenu. It should not be modified (unless you know what you're doing). 11.4KB nav_var.js This file holds all the configurable settings and the menu link values. This is where you will define the location of the menu and it's contents. 600 bytes (min)* siteroot.js This file defines the URL for the root folder of your web site. This can be a local site (e.g. file://c:/website/) or an internet site (e.g. http://www.website.com/). It is used by relative (Rel) links within the navBar/Menu. 100 bytes nav.css This file determines the style of the text, background and borders. It is a simple cascading style sheet and allows quite diverse styles to be applied to the nav. Do not change the name of the styles. 1000 bytes** nav.gif This file is required if you have more than one dropDown menu. It's the pointer on the dropDown menus that indicates that a secondary/tertiary menu is available. The filename must remain as nav.gif, but it's location can be changes (defined by var folDer='graphics/'; in nav_var.js). You can create your own nav.gif to replace this one, but bare in mind that you don't want to make it larger than the height of each nav row (defined by var rowHeight=27; in nav_var.js). 53 bytes 1px.gif This file is required in order to accomplish Netscape compatibility. This gif should be located in the same folder as nav.gif. As before, the filename must remain 1px.gif). 43 bytes nav_var.xls If you have an lot of items in the navBar/navMenu., it may be easier to use this spreadsheet to set them up. Once all the cells have been filled in, you can save the file as a *.CSV (comma delimited) file. Then, using a simple text editor (such as textpad) use 'Find and Replace' to convert it to the correct JavaScript format. The example file here is for the menu above. It is colour coded and has a key to help explain how to fill in the nav.js file. 20KB* nav.zip Download all the required files in a single zip file. 21.5KB * depends on the complexity and number of the menus required i.e. more links means bigger file. **depends on the complexity of the styles applied to the menu. [top]

how does this script work? [top] Basically, this script creates a table for each dropDown menu. Each table cell contains a separate link (linkCell) and the onClick event is used to open links by clicking anywhere on a linkCell. The type of link is defined by nav_var.js (Rel, Full etc). Tables are changed to layers by the style sheet (nav.css). They are all created when the page is loaded and made visible/hidden with the onMouseOver event. Part of the script (nav.js) provides the style change for the table linkCell and gives a kind of rollover effect. This is set out by the styles defined in nav.css (nbOn/nbOff and ddOn/ddOff).

do's and don'ts for using these scripts [top] Precede any comma (,) or apostrophe (') with a forward-slash (\) e.g. \, or \' Keep the two gif files (nav.gif and 1px.gif) in the same folder, as defined by: var folDer='graphics/'; in nav_var.js. You can apply text formatting to text within cells (e.g. <B>home</B>) but the style change for that cell will not work while the mouse is over that text. tips: Keep the rowHeight variable (this defines the height of the navBar/navMenu. and the dropDown menus) at least 25px as the users mouse can easily slip off the menu when navigating. Place the nav.js script at the bottom of the page (i.e just before the </BODY>) so that the page contents loads before the navBar/navMenu.