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:
- The menu technique shown here is NOT property of UsabilityInstitute.com. Visit http://www.dynamicdrive.com for this script and a lot more great code.
- We chose this particular system from among the many at Dynamic Drive because it is stated to even work on Linux! That made it an easy decision.
- The system uses considerable Javascript in external scripts, and it looks like awesome code. I was particularly impressed that the configuration parameters are isolated and well commented (in the Custom.js). See below. I improved the comments very slightly with my techwriting eye. (Mainly I made the descriptions parallel visually and grammatically.)
- In an ideal world, a menu might also support some 'nice-to-have' functionality such as a You Are Here pointer, and 'visited' indicators. But of course one or both of those could be inapplicable on a pure data system. Perhaps TNIII does have 'em and I've simply missed it or counteracted it. No biggie. I considered digging into the JS but that's your job.
- Anyway, TNIII is fairly technological (not plain HTML) and if you don't want all the code and constraints, the real value here is my formatting... the colors, fonts, size of blocks, borders, and shadows. So no matter what technology you choose, the visual design is here.
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:
- 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.
- 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