|
EXAMPLE
See it at work at the top of this
page.
1) Insert these lines of code in the <HEAD> section of the page.
2) Insert the following line of code at
the top in the
<BODY> section of the page.
3) Download
this ZIP file with
the custom.js, menu.js, menu_ie4.js, menu_ie5.js, menu_moz.js, menu_ns4.js,
menu_op5.js, menu_op6.js, sniffer.js and style.js files and unzip into
the appropriate directory.
You will also find an image called icon.gif inside
the ZIP file. This is the icon image you see at the left of the menu. You can
also right click and select 'Save picture as' to save it on your system.
Replace it with your own icon file.
4) Define the positioning, the style and
the links in this section of the custom.js file:
POSITIONING AND STYLES
var menuALIGN = "left"; // alignment
var absLEFT = 0; // absolute left or right position (if not center)
var absTOP = 0; // absolute top position
var staticMENU = false; // static positioning mode
(for IE5/6 and NS4 only)
var stretchMENU = true; // show empty cells
var showBORDERS = true; // show empty cell borders
var baseHREF = "dropdown_menu/"; // base path
var zORDER = 1000; // base z-order of nav structure (not
for NS4)
var mCOLOR = "#EAF0FF"; // main nav cell color
var rCOLOR = "#C4CAF4"; // main nav cell rollover color
var bSIZE = 1; // main nav border size
var bCOLOR = "#39527B" // main nav border color
var aLINK = "#000055"; // main nav link color
var aHOVER = ""; // main nav link hover-color (dual purpose)
var aDEC = "none"; // main nav link decoration
var fFONT = "arial,sans serif"; // main nav font face
var fSIZE = 13; // main nav font size (pixels)
var fWEIGHT = "bold" // main nav 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 = -1; // shift the submenus vertically
var hOFFSET = -1; // shift the submenus horizontally
var smCOLOR = "#E3F3FB"; // submenu cell color
var srCOLOR = "#FFFFFF"; // submenu cell rollover color
var sbSIZE = 1; // submenu border size
var sbCOLOR = "#3F366D" // submenu border color
var saLINK = "#000055"; // submenu link color
var saHOVER = ""; // submenu link
hover color (dual purpose)
var saDEC = "none"; // submenu link decoration
var sfFONT = "verdana,arial"; // submenu font face
var sfSIZE = 11; // submenu font size (pixels)
var sfWEIGHT = "normal" // submenu font weight
var stINDENT = 5; // submenu text indent (if text is left or right aligned)
var svPADDING = 2; // submenu vertical cell padding
var svtOFFSET = 0; // submenu vertical text offset (+/- pixels from middle)
var shSIZE = 3; // menu drop shadow size
var shCOLOR = "#BCBCBC"; // menu drop shadow color
var shOPACITY = 75; // menu drop shadow opacity (not
for IE4/NS4/OP5)
var keepSubLIT= true; // keep submenu rollover color when browsing child menu
var chvOFFSET = 5; // shift the child menus vertically
var chhOFFSET = -3; // shift the child menus horizontally
var openTIMER = 100; // menu opening delay time (not
for NS4/OP5/OP6)
var openChildTIMER = 200; // child-menu opening delay time (not
NS4/OP5/OP6)
var closeTIMER = 330; // menu closing delay time
var aCURSOR = "hand"; // cursor for active links (not
for NS4/OP5/OP6)
var altDISPLAY = "title"; // 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 = false; // auto-hide select boxes when menus open
(IE only)
var allowForSCALING = false; // allow for text scaling in gecko browsers
var allowPRINTING = false; // allow the navbar and menus to print (not
NS4)
var arrWIDTH = 13; // arrow width (not for
NS4/OP5/OP6)
var arrHEIGHT = 13; // arrow height (not for
NS4/OP5/OP6)
var arrHOFFSET = -5; // arrow horizontal offset (not
for NS4/OP5/OP6)
var arrVOFFSET = -3; // arrow vertical offset (not
for NS4/OP5/OP6)
var arrVALIGN = "middle"; // arrow vertical align (not
for NS4/OP5/OP6)
var arrLEFT = "<"; // left arrow (not for
NS4/OP5/OP6)
var arrLEFT_ROLL = ""; // left rollover arrow (not
for NS4/OP5/OP6)
var arrRIGHT = ">"; // right arrow (not
for NS4/OP5/OP6)
var arrRIGHT_ROLL = ""; // right rollover arrow (not
for NS4/OP5/OP6)
LINKS
// add main link item ("URL","link
name",width,"text-alignment","_target","alt
text",top position,left position,"key trigger","mCOLOR","rCOLOR","aLINK","aHOVER")
MI("http://planmagic.com","PlanMagic.com",145,"center","","PlanMagic
Software",0,0,"","","","","");
// define submenu properties (width,"align to edge","text-alignment",v
offset,
h
offset,"filter","smCOLOR","srCOLOR","sbCOLOR","shCOLOR","saLINK","saHOVER")
SP(150,"left","left",0,0,"","","","","","","");
// add submenu link items ("URL","link name","_target","alt text")
SI("index.html","Home page","","");
SI("company.html","About us","","");
SI("products.html","Products >>","","");
// define child menu properties (width,"align to
edge","text-alignment",v offset,h
offset,"filter","smCOLOR","srCOLOR","sbCOLOR","shCOLOR","saLINK","saHOVER")
CP(150,"left","left",-1,-5,"","","","","","","");
// add child menu link items ("url","link name","_target","alt text")
CI("business_planning.html","PlanMagic
Business","","");
CI("marketing_planning.html","PlanMagic
Marketing","","");
CI("financial_plan.html","PlanMagic Finance
Pro","","");
CI("webquest.html","PlanMagic WebQuest
Pro","","");
5) Define the path to the js files:
In the <HEAD> section:
<script language="javascript"
src="dropdown_menu/sniffer.js"></script>
<script language="javascript1.2" src="dropdown_menu/custom.js"></script>
<script language="javascript1.2" src="dropdown_menu/style.js"></script>
and in the <BODY> section:
<script language="javascript1.2"
src="dropdown_menu/menu.js"></script>
For
more information or for purchasing the commercial single user license, you can visit Brothercake's
web site.
|
