Script Collection Home Page

Windows Style Menubar and Toolbar

Move the mouse over the menu or tool bar. Click on an item and see the response in the status line. 

Example code for defining the above menu and tool bars:

// Add the following to the HEAD section to load the source code and styles
<LINK REL="stylesheet" TYPE="text/css" HREF="css/utmenu.css">
<SCRIPT LANGUAGE="JavaScript" SRC="inc/utmenu.js"></SCRIPT>

// Now set up the arrays for menu and toolbar
var myMnu=new Object();
var myTbar=new Object();

// Assign object ids (composed of bar type followed by unique 4 digit number),
// Then assign the elements making up the menu or tool bar. These define the table structure.

// Describing the menu...items have been idented to better show structure

myMnu["id"]="menu0001";

myMnu["td_1"]  =imgStr('root3')+" File";
  myMnu["td_1_1"]="Start New Application";  myMnu["ur_1_1"]="cmd:mycmds(\"new_appl\")";
  myMnu["td_1_2"]=imgStr('fo2')+" Open";    myMnu["ur_1_2"]="cmd:mycmds(102)";
  myMnu["td_1_3"]="<HR>";	
  myMnu["td_1_4"]="Exit creditBASE;";       myMnu["ur_1_4"]="cmd:mycmds(0)";
myMnu["td_2"]  =imgStr('pg2')+" Edit";
  myMnu["td_2_1"]="InBox";                  myMnu["ur_2_1"]="cmd:mycmds(103)";
  ...	

// Now the toolbar

myTbar["id"]="tool0002";

myTbar["td_1"]  ="My "+imgStr('sent')+" Gifs ";    myTbar["ur_1"]  ="cmd:mycmds(9101)";
myTbar["td_2"]  =imgStr('split',0,0,'Split');      myTbar["ur_2"]  ="cmd:mycmds(9102)";
myTbar["td_3"]  =imgStr('design')+" Design ";
  myTbar["td_3_1"]=imgStr('cut')+" Cut";           myTbar["ur_3_1"]="cmd:mycmds(9103)";
  ...  
myTbar["td_4"]  =imgStr('home',0,0,'creditBASE');  myTbar["ur_4"]  ="cmd:mycmds(9106)";
myTbar["td_5"]  =imgStr('vbar',16,2);              myTbar["ur_5"]  ="vbar";
...

function mycmds(cmd){ window.status="Menu says:"+cmd; }

// To load them into your page add the following script tags (usually after body tag)
<BODY>
<SCRIPT>OSMenuAdv(myMnu);</SCRIPT>
<SCRIPT>OSMenuAdv(myTbar);</SCRIPT>
Within this page you will find sample code for defining the menu and tool bars. The external files are (along with sub-directories): The original code came from the old MS site but it has been extensively reworked to enhance its functionality as well as to keep it small(5k). The aim has been to make it easy to define and implement a menu and tool bar. The only difference between a menu and a tool bar is the styling. You are not obliged to have both bars. The code can support any number and combination of bars as long as you define them correctly. The composition of a menu item is descriptive text plus the associated function call. The function is provided by you; just precede it by cmd:. The descriptive text can include any html and I have provided an image command builder which accepts the name of a gif file. The function imgStr accepts the following parameters : gif file name with no extension, height, width and tooltip. The default height and width are 16 px. Any value less than 1 is replaced with 16.

More useful and interesting code samples are available at www.wainer-online.com and unwalkers.