GenericUI Top Navigation Drop-Down Menus

"Top Navigational Bar III " by Brothercake, courtesy of Dynamic Drive

At the top of this page is a drop-down menu system that you can use on your applications. It is a shareware system that we selected and formatted to match our design scheme. Some notes:

Instructions

The author of TopnavIII tells us that documentation can be found at http://www.brothercake.com/dropdown/topnavIII/.

 

The menu functionality above is provided free at http://www.dynamicdrive.com/dynamicindex1/topmen3/index.htm. We don't want to duplicate the content or value provided at Dynamic Drive, but here's the basic process to incorporate our design:

  1. Go to their site and perform their procedure, which consists of downloading their zip file and reading and executing the instructions. I'm just an advanced user, not a developer and it took me probably less than 30 minutes, working with zero problems or confusion. Zero.
  2. To implement the formatting you see above, we customize only one file from the author's download, the Custom.js file. This is where we specified the colors, borders, spacing, and so on. The values we changed are in the snippet below. You can either...
    • Download and use our full, customized Custom.js file, but there's always the risk that it's outdated compared to the latest TNIII, right?
    • Or manually change the values as shown below. We only changed values in the POSITIONING AND STYLES area, but we also reformatted the comments as well. We've highlighted in red the items we specifically set.

Our Custom.js Config Section

// *** POSITIONING AND STYLES *********************************************

var menuALIGN = "left";		// alignment
var absLEFT = 130;			// absolute left or right position (if menu is left or right aligned)
var absTOP = 70; 			// absolute top position
var staticMENU = false;		// static positioning mode (ie5,ie6 and ns4 only)

var stretchMENU = true;		// show empty cells
var showBORDERS = true;		// show empty cell borders

var baseHREF = "";			// base path to .js files for the script (ie: resources/)
var zORDER = 0;			// base z-order of nav structure (not ns4) BUT MIGHT BE IMMATERIAL JB/Uinst 

////////////////////// Top bar //////////////////////////////////

var mCOLOR = "006699";		// main nav cell color
var rCOLOR = "A3C1E0";		// main nav cell color, on rollover
var bSIZE = 0;			// main nav border size
var bCOLOR = "black"			// main nav border color

var aLINK = "ffffff";			// main nav text color
var aHOVER = "000000";		// main nav text color, rollover (dual purpose)
var aDEC = "none";			// main nav text decoration
var fFONT = "verdana";		// main nav text font face
var fSIZE = 11;			// main nav text font size (pixels)
var fWEIGHT = "bold"			// main nav text font weight
var tINDENT = 7;			// main nav text indent (if text is left or right aligned)
var vPADDING = 2;			// main nav vertical cell padding
var vtOFFSET = 0;			// main nav vertical text offset (+/- pixels from middle)

var keepLIT =true;			// keep rollover color when browsing menu
var vOFFSET = 3;			// shift the submenus vertically
var hOFFSET = -1;			// shift the submenus horizontally

////////////////////// Submenus //////////////////////////////////

var smCOLOR = "A3C1E0";		// submenu cell color
var srCOLOR = "006699";		// submenu cell rollover color
var sbSIZE = 1;			// submenu border size
var sbCOLOR = "006699"		// submenu border color

var saLINK = "black";			// submenu text color
var saHOVER = "ffffff";		// submenu text color, rollover (dual purpose)
var saDEC = "none";			// submenu text decoration
var sfFONT = "verdana";		// submenu text font face
var sfSIZE = 11;			// submenu text font size (pixels)
var sfWEIGHT = "bold"			// submenu text font weight
var stINDENT = 5;			// submenu text indent (if text is left or right aligned)
var svtOFFSET = 0;			// submenu text vertical offset (+/- pixels from middle)
var svPADDING = 2;			// submenu cell vertical padding

var shSIZE =2;			// submenu drop shadow size
var shCOLOR ="cccccc";		// submenu drop shadow color
var shOPACITY = 75;			// submenu drop shadow opacity (not ie4,ns4 or opera)

var keepSubLIT = true;		// keep submenu rollover color when browsing child menu
var chvOFFSET = -1;			// shift the child menus vertically
var chhOFFSET = 15;			// shift the child menus horizontally

////////////////// Misc ///////////////////////

var closeTIMER = 330;		// menu closing delay time

var cellCLICK = true;		// links activate on TD click
var aCURSOR = "hand";		// cursor for active links (not ns4 or opera)

var altDISPLAY = "";		// where to display alt text
var allowRESIZE = true;	// allow resize/reload

var redGRID = false;		// show a red grid
var gridWIDTH = 0;		// override grid width
var gridHEIGHT = 0;		// override grid height
var documentWIDTH = 0;	// override document width

var hideSELECT = true;	// auto-hide select boxes when menus open (ie only)
var allowForSCALING = false;	// allow for text scaling in mozilla 5