		Home\|Contacts\|

Article Base

Manage profile

New account

Read articles

Manage Articles

Submit Category

Client Products

Calendar

Time Selector

Text Link

Marks System

Menu Bar

Server Products

Photo Viewer

Poll Builder

Counter

Guest Book

Where am i?

LinkExchange

Sample

Here is a sample of what you can do with comMenuBar:

Top

Download

DOWNLOAD comMenuBar

1) We thank you to fill the data below previous to make the download

Country
Name
Email

Your data will never be transmited to any other person or external entity under no circunstances and will only serve statistic purposes!

2) Click the button below in order to proceed with the download.

3) We would like to remind you of some opportunities for contribution. I provided to you at no charge, and you have every right to redistribute the software. I depend on people willing to contribute their time and support to the project to ensure that my work remains free and available at no cost.

You can help. The basic options consist of Contributing Work or if you have no time Donating Funds.

We appreciate your support for the project.

Top

Installation Process

How to install.

Congratulations, you’ve just downloaded the comMenuBar.zip file, which contains a sample set of file that will allow you to quickly set up your own Menu Bar on your server and web pages.

This process will detail the steps needed to install and use comMenuBar on your web server.

After downloading the comMenuBar.zip file, the included files have to be extracted at the location specified by the user on the server and have to respect the following hierarchy.

The comMenuBar.zip file contains the following files:

comMenuBar.htm (sample html file that will display the comMenuBar component),
comMenuBarD.js (set of javascript functions that will build the comMenuBar component. This file has to be placed into the comMenuBar folder),
comMenuBarP.js (set of parameters used to build the comMenuBar component. This file has to be placed into the comMenuBar folder),
Sample set of images (these images have to be placed in the images folder).

If for some reason the comMenuBar.zip file would be damaged or you don’t have winzip or equivalent installed on your computer, please copy the following files to the respective folders as described above.

comMenuBar.htm

<HTML> <HEAD> <title>Javascript Components Tester</title> <Script type="text/javascript" src="comMenuBar/comMenuBarP.js"></script> <Script type="text/javascript" src="comMenuBar/comMenuBarD.js"></script> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <link href="Stylesheet.css" rel="stylesheet" type="text/css"> </HEAD> <BODY> <Form name="tab"> <Script type="text/javascript">createMenuBar(MENU2,PARAM2);</script> </Form> </BODY> </HTML>

To copy the content, press CTRL+A then CTRL+C

comMenuBarP.js

PARAM2['ID'] = "BAR";

PARAM2['widthbar'] = "120px";
PARAM2['heightbar'] = "355px";
PARAM2['posxbar'] = "150px";
PARAM2['posybar'] = "220px";
PARAM2['bordercolor'] = "#000000";
PARAM2['bordersize'] = "1px";

PARAM2['widthbutton'] = "120px";
PARAM2['heightbutton'] = "25px";

PARAM2['heightitemimage'] = "50px";
PARAM2['heightitemtext'] = "20px";

PARAM2['font'] = "Verdana";
PARAM2['fontsize'] = "10";
PARAM2['fontcolor'] = "#FFFFFF";

PARAM2['font2'] = "Verdana";
PARAM2['fontsize2'] = "10";
PARAM2['fontcolor2'] = "#000000";

PARAM2['bgcolor'] = "#0F70A0";
PARAM2['bgcolor2'] = "#A0D0F0";
PARAM2['bgcolorover'] = "#A0D000";
PARAM2['colorover'] = "#0000f0";

PARAM2['margin'] = "2px";

var MENU2 = [
              ["Fishes,0,close,",
                 ["Bullhead Black,1,images/bullhead_black_2b.gif,link.htm"],
                 ["SheepShead,1,images/sheepshead_2b.gif,link.htm"],
                 ["SkipJack,1,images/skipjack_2b.gif,link.htm"],
                 ["Smelt,1,images/smelt_2b.gif,link2.htm"],
                 ["Snapper Lane,1,images/snapper_lane_2b.gif,link2.htm"]
              ],
              ["Cats,0,open,link.htm",
                 ["African Golden,1,images/african_golden_2b.gif,link2.htm"],
                 ["Asian Golden,1,images/asian_golden_2b.gif,link2.htm"],
                 ["Bengal Cat,1,images/bengal_cat_2b.gif,link2.htm"],
                 ["Black-footed Cat,1,images/black-footed_cat_2b.gif,link2.htm"]
              ],
              ["Birds,0,open,link.htm",
                 ["Yellowthroat,1,images/yellowthroat_2b.gif,link2.htm"],
                 ["Wren Carolina,1,images/wren_carolina_2b.gif,link.htm"],
                 ["Whip-poor-will,1,images/whip-poor-will_2b.gif,link.htm"],
                 ["Warbler Pronothary,1,images/warbler_pronothary_2b.gif,link2.htm"],
                 ["Warbler Yellow,1,images/warbler_yellow_2b.gif,link2.htm"]
              ],
              ["Frogs,0,open,link.htm",
                 ["Bullfrog,1,images/bullfrog1_2b.gif,link2.htm"],
                 ["Bullfrog,1,images/bullfrog2_2b.gif,link.htm"],
                 ["Frog Chorus,1,images/frog_chorus_2b.gif,link.htm"],
                 ["Frog Crawfish,1,images/frog_crawfish_2b.gif,link2.htm"],
                 ["Frog Cricket,1,images/frog_cricket_southern_2b.gif,link2.htm"],
                 ["Frog Edible,1,images/frog_edible2_2b.gif,link2.htm"],
                 ["Frog Green,1,images/frog_green1_2b.gif,link2.htm"]
              ],
              ["All Animals,0,close,",
                 ["Bullhead Black,1,images/bullhead_black_2b.gif,link.htm"],
                 ["SheepShead,1,images/sheepshead_2b.gif,link.htm"],
                 ["SkipJack,1,images/skipjack_2b.gif,"],
                 ["Smelt,1,images/smelt_2b.gif,"],
                 ["Snapper Lane,1,images/snapper_lane_2b.gif,link2.htm"],
                 ["African Golden,1,images/african_golden_2b.gif,link2.htm"],
                 ["Asian Golden,1,images/asian_golden_2b.gif,link2.htm"],
                 ["Bengal Cat,1,images/bengal_cat_2b.gif,link2.htm"],
                 ["Black-footed Cat,1,images/black-footed_cat_2b.gif,link2.htm"],
                 ["Yellowthroat,1,images/yellowthroat_2b.gif,link2.htm"],
                 ["Wren Carolina,1,images/wren_carolina_2b.gif,link2.htm"],
                 ["Whip-poor-will,1,images/whip-poor-will_2b.gif,link2.htm"],
                 ["Warbler Pronothary,1,images/warbler_pronothary_2b.gif,link2.htm"],
                 ["Warbler Yellow,1,images/warbler_yellow_2b.gif,link2.htm"],
                 ["Bullfrog,1,images/bullfrog1_2b.gif,link2.htm"],
                 ["Bullfrog,1,images/bullfrog2_2b.gif,link2.htm"],
                 ["Frog Chorus,1,images/frog_chorus_2b.gif,link2.htm"],
                 ["Frog Crawfish,1,images/frog_crawfish_2b.gif,link2.htm"],
                 ["Frog Cricket,1,images/frog_cricket_southern_2b.gif,link2.htm"],
                 ["Frog Edible,1,images/frog_edible2_2b.gif,link2.htm"],
                 ["Frog Green,1,images/frog_green1_2b.gif,link2.htm"]
              ]
           ]

To copy the content, press CTRL+A then CTRL+C

comMenuBarD.js

// ************************************************
// This file has been written by David Domingues
// you are free to use it and change it as you need
// but i will ask you to keep this header on the file
// and never remove it.
// comMenuBar downloaded at http://www.webrickco.com
// webrickco@gmail.com
// ************************************************
// JavaScript Document
function change_folder(wid, windice, wtotalfolder, wmaxitems, wheightbar, wheightbutton, wheightitem)
{
   var wobjindicehid = document.getElementsByName('indicehid_'+wid);
   wobjindicehid[windice].value = 0;

//making all upper/down arrow divs hidden
   for (i=0;i<wtotalfolder;i++)
   {
	  var wobjarrowupdiv = document.getElementById('arrowupdiv_'+wid+i.toString());
	  var wobjarrowdowndiv = document.getElementById('arrowdowndiv_'+wid+i.toString());
	  if (i==windice)
	  {
	  	  wobjarrowupdiv.style.visibility = 'visible';
		  wobjarrowdowndiv.style.visibility = 'visible';     
	  }
	  else
	  {
	  	  wobjarrowupdiv.style.visibility = 'hidden';
		  wobjarrowdowndiv.style.visibility = 'hidden';     
	  }
   }

for (i=0;i<wtotalfolder;i++)
   {
	  var wobjbar = document.getElementById('bardiv_'+wid+i.toString());
	  var wobjcontent = document.getElementById('contentdiv_'+wid+i.toString());
      if (i <= windice)
      {
		  wobjbar.style.top = parseInt(wheightbutton, 10) * i;
      }
      else
      {
          wobjbar.style.top = parseInt(wheightbar, 10) - (parseInt(wtotalfolder,10) - i) * parseInt(wheightbutton, 10);
      }

if (i == windice)
      {
          wobjcontent.style.visibility = 'visible';
          wobjcontent.style.top = parseInt(wheightbutton, 10) * (i + 1);                
      }
      else
      {
          wobjcontent.style.visibility = 'hidden';       
      }
   }

//making all item divs invisible
   for (i=0;i<wtotalfolder;i++)
   {
	  var objdiv = document.getElementsByTagName('DIV');
      var countitem = 0;
      for (j=0;j<objdiv.length;j++)
      {
	      if (objdiv[j].getAttribute("name")=='contentitemdiv_'+wid+i.toString())
	         countitem ++; 
      }

for (j=1;j<=countitem;j++)
      {
          var elem = document.getElementById('contentitemdiv_'+wid+i.toString()+j.toString());
          elem.style.visibility='hidden';

if (i == windice)
          {
             elem.style.top = 10 + (wheightitem * (j-1));
          }
          else
          {
             elem.style.top = wheightitem * (j-1);
          }
      }
   }

//making the current item div visible
   var objdiv = document.getElementsByTagName('DIV');
   var contar = 0;
   for (i=0;i<objdiv.length;i++)
   {
	   if (objdiv[i].getAttribute("name")=='contentitemdiv_'+wid+windice)
	     contar ++; 
   }

for (i=1;i<=contar;i++)
   {
      var wobjcontentitem = document.getElementById('contentitemdiv_'+wid+windice.toString()+i.toString());
	    wvalue = parseInt(wobjcontentitem.style.top,10) + parseInt(wheightitem,10);
      wvalue1 = parseInt(wheightbar,10) - parseInt(wmaxitems,10) * parseInt(wheightbutton,10);

if (i <= wmaxitems &&  wvalue <= wvalue1) {
         wobjcontentitem.style.visibility='visible';
      }
   }
}

function move_item(wid, windice, wupdown, wmaxitems, wtotalfolder, wheightitem)
{
   var wobjindicehid = document.getElementsByName('indicehid_'+wid);

//making all item divs invisible
   for (i=0;i<wtotalfolder;i++)
   {
      //making current up/down arrow divs visible and non current invisible
	  var objdiv = document.getElementsByTagName('DIV');
	  var contar = 0;
	  for (k=0;k<objdiv.length;k++)
      {
	      if (objdiv[k].getAttribute("name")=='contentitemdiv_'+wid+i.toString())
	         contar ++; 
      }
      for (j=1;j<=contar;j++)
      {
		  var elem = document.getElementById('contentitemdiv_'+wid+i.toString()+j.toString());
          elem.style.visibility='hidden';

}
   }

//making the current item div visible
   wposition = parseInt(wobjindicehid[windice].value,10) + parseInt(wupdown,10);
   wgetupdown = 'true';
   if (wposition < 0)
   {
      wposition = 0;
      wgetupdown = 'false1';
   }
   
   var objdiv = document.getElementsByTagName('DIV');
   var contar = 0;
   for (i=0;i<objdiv.length;i++)
   {
	   if (objdiv[i].getAttribute("name")=='contentitemdiv_'+wid+windice)
	     contar ++; 
   }
   if (wposition > (contar - wmaxitems))
   {
      wposition = contar - wmaxitems;
      wgetupdown = 'false2';
   }
   wobjindicehid[windice].value = wposition;
   wcounter = 1;
   for (i=0;i<contar;i++)
   {
      var k = i + 1;
	  var wobjcontentitem = document.getElementById('contentitemdiv_'+wid+windice.toString()+k.toString());
	  if (wcounter <= wmaxitems && i >= wposition) {
         wobjcontentitem.style.visibility='visible';
         wcounter += 1;
      }
      if (wgetupdown == 'true')
      {
          if (wupdown > 0)
          {
              if (wobjcontentitem)
			  wobjcontentitem.style.top = parseInt(wobjcontentitem.style.top,10) - parseInt(wheightitem,10);
          }
          else
          {
              if (wobjcontentitem)			  
              wobjcontentitem.style.top = parseInt(wobjcontentitem.style.top,10) + parseInt(wheightitem,10);   
          }
      }
   }
}

function onMenuIn(objecto, objecto1, objecto2, bgcolorover, colorover) {
   var obj = document.getElementById(objecto);
   var obj1 = document.getElementById(objecto1);
   var obj2 = document.getElementById(objecto2);
   
   document.getElementById('wbackground').value= obj.style.background;
   obj.style.background=bgcolorover;
   obj1.style.background=bgcolorover;

document.getElementById('wcolor').value= obj2.style.color;
   obj2.style.color=colorover;
}

function onMenuOut(objecto,objecto1,objecto2) {
   var obj = document.getElementById(objecto);
   var obj1 = document.getElementById(objecto1);
   var obj2 = document.getElementById(objecto2);
   
   obj.style.background=document.getElementById('wbackground').value;
   obj1.style.background=document.getElementById('wbackground').value;
   obj2.style.color=document.getElementById('wcolor').value;

}

function menu_onclick(objecto) {
  open(objecto,"_self");
}

function createMenuBar(MENU,PARAM)
{
   document.write("<INPUT ID=\"wbackground\" NAME=\"wbackground\" TYPE=\"HIDDEN\">");
   document.write("<INPUT ID=\"wcolor\" NAME=\"wcolor\" TYPE=\"HIDDEN\">");

document.write("<DIV ID=\"bar_\""+PARAM['ID']+" NAME=\"bar_\""+PARAM['ID']+" style=\"position: absolute; top: "+PARAM['posybar']+"; left: "+PARAM['posxbar']+"; height: "+PARAM['heightbar']+"; width: "+PARAM['widthbar']+"\">");

document.write("<TABLE id=\"table"+PARAM['ID']+"\" CELLPADDING=\"0\" CELLSPACING=\"0\" height=\""+PARAM['heightbar']+"\" width=\""+PARAM['widthbar']+"\" style=\"border-top: "+PARAM['bordersize']+" solid "+PARAM['bordercolor']+ ']+']+']+']+"; border-bottom: "+PARAM['bordersize']+" solid "+PARAM['bordercolor']+"; border-left: "+PARAM['bordersize']+" solid "+PARAM['bordercolor']+"; border-right: "+PARAM['bordersize']+" solid "+PARAM['bordercolor']+"; padding: "+PARAM['margin']+"\">");
   document.write("<TR style=\"background: "+PARAM['bgcolor2']+"; color: "+PARAM['fontcolor2']+"\">");
   document.write("<TD>");

for (i=0;i<MENU.length;i++)
   {
      header = MENU[i][0].toString().split(",");
      wheightitemtotal =  parseInt(PARAM['heightitemimage'],10) + parseInt(PARAM['heightitemtext'],10);
      posy = parseInt(PARAM['heightbutton'], 10) * i;
      wtop = posy + parseInt(PARAM['heightbutton'], 10);
      wheight = parseInt(PARAM['heightbar'],10) - MENU.length * parseInt(PARAM['heightbutton'],10);
      wqtd_item = Math.floor((wheight - 20) / wheightitemtotal);
      wlargebutton = parseInt(PARAM['widthbutton'],10)-parseInt(PARAM['bordersize'],10)*2;

document.write("<DIV ID=\"bardiv_"+PARAM['ID']+i.toString()+"\" NAME=\"bardiv_"+PARAM['ID']+"\" style=\"position: absolute; top: "+posy.toString()+"px; left: "+PARAM['bordersize']+"\">");
	    document.write("<INPUT ID=\"barbutton_"+PARAM['ID']+i.toString()+"\" NAME=\"barbutton_"+PARAM['ID']+"\" TYPE=\"BUTTON\" VALUE=\""+header[0]+"\" style=\"width: "+wlargebutton+"px; font-family: "+PARAM['font']+"; font-size: "+PARAM['fontsize']+"px; color: "+PARAM['fontcolor']+"; background: "+PARAM['bgcolor']+"; height:"+PARAM['heightbutton']+"\" onclick=\"change_folder('"+PARAM['ID']+"', "+i+", ",",",","+MENU.length+", ",",",","+wqtd_item+", ",",",","+parseInt(PARAM['heightbar'],10)+", '],10)+",'],10)+",'],10)+",'],10)+","+parseInt(PARAM['heightbutton'],10)+", '],10)+",'],10)+",'],10)+",'],10)+","+parseInt(wheightitemtotal,10)+");\">");
      document.write("</DIV>");

document.write("<DIV ID=\"contentdiv_"+PARAM['ID']+i.toString()+"\" NAME=\"contentdiv_"+PARAM['ID']+"\" style=\"visibility: hidden; position: absolute; height: "+wheight+"px; width: "+wlargebutton+"px; top: "+wtop+"px; left: "+PARAM['bordersize']+"\">");
      // arrow up
      document.write("<INPUT ID=\"indicehid_"+PARAM['ID']+i.toString()+"\" NAME=\"indicehid_"+PARAM['ID']+"\" TYPE=\"HIDDEN\" VALUE=\"0\">");

if (MENU[i].length > wqtd_item)
      {
         document.write("<DIV ID=\"arrowupdiv_"+PARAM['ID']+i.toString()+"\" NAME=\"arrowupdiv_"+PARAM['ID']+"\" style=\"visibility: hidden; position: absolute; height: 10px; width: "+wlargebutton+"px; top: 0px; left: 0px\">");
         document.write("<INPUT ID=\"arrowupbutton_"+PARAM['ID']+i.toString()+"\" NAME=\"arrowupbutton_"+PARAM['ID']+"\" TYPE=\"BUTTON\" SRC=\"images/arrow_up.gif\" style=\"font-family: "+PARAM['font']+"; font-size: "+PARAM['fontsize']+"px; color: "+PARAM['fontcolor']+"; background: "+PARAM['bgcolor']+"; width:"+wlargebutton+"px; height:10px\" onclick=\"move_item('"+PARAM['ID']+"', "+i+", -1, "+wqtd_item+", ",",",","+MENU.length+", ",",",","+wheightitemtotal+");\">");
         document.write("</DIV>");
         heightarrow = 10;
      }
      else {
         document.write("<DIV ID=\"arrowupdiv_"+PARAM['ID']+i.toString()+"\" NAME=\"arrowupdiv_"+PARAM['ID']+"\" style=\"visibility: hidden; position: absolute; height: 0px; width: "+wlargebutton+"px; top: 0px; left: 0px\">");
         document.write("</DIV>");
         heightarrow = 0;
      }
      //object links
      for (j=1;j<MENU[i].length;j++)
      {
         content = MENU[i][j].toString().split(",");
         //item
         item_posy = (j - 1) * wheightitemtotal + heightarrow;
         //if (j < wqtd_item && i == MENU.length - 1) {
         //   document.write("<DIV ID=\"contentitemdiv_"+PARAM['ID']+i.toString()+j.toString()+"\" NAME=\"contentitemdiv_"+PARAM['ID']+i.toString()+"\" style=\"visibility: visible; position: absolute; height: "+wheightitemtotal+"px; width: "+wlargebutton+"px; top: "+item_posy.toString()+"px; left: 0px\">");
         //}
         //else {
            document.write("<DIV ID=\"contentitemdiv_"+PARAM['ID']+i.toString()+j.toString()+"\" NAME=\"contentitemdiv_"+PARAM['ID']+i.toString()+"\" style=\"visibility: hidden; position: absolute; height: "+wheightitemtotal+"px; width: "+wlargebutton+"px; top: "+item_posy.toString()+"px; left: 0px\">");
         //}
         document.write("<TABLE id=\"table1"+PARAM['ID']+i.toString()+j.toString()+"\" CELLPADDING=\"0\" CELLSPACING=\"0\" height=\""+wheightitemtotal+"px\" width=\""+wlargebutton+"px\" style=\"padding: "+PARAM['margin']+"\">");
         document.write("<TR ID=\"TR"+PARAM['ID']+i.toString()+j.toString()+"\" height=\""+PARAM['heightitemimage']+"\" style=\"background: "+PARAM['bgcolor2']+"; color: "+PARAM['fontcolor2']+"\" onmouseover=\"onMenuIn('TR"+PARAM['ID']+i.toString()+j.toString()+"', 'TR1"+PARAM['ID']+i.toString()+j.toString()+"', "',"',"',"','TD1"+PARAM['ID']+i.toString()+j.toString()+"', "',"',"',"','"+PARAM['bgcolorover']+"', ']+"',']+"',']+"',']+"','"+PARAM['colorover']+"');\" onmouseout=\"onMenuOut('TR"+PARAM['ID']+i.toString()+j.toString()+"', 'TR1"+PARAM['ID']+i.toString()+j.toString()+"', "',"',"',"','TD1"+PARAM['ID']+i.toString()+j.toString()+"');\">");
         document.write("<TD ALIGN=\"CENTER\">");
         document.write("<IMG SRC=\""+content[2]+"\" id=\"link"+i.toString()+j.toString()+"\" name=\"link"+i.toString()+"\" onclick=\"menu_onclick('"+content[3]+"');\">");
         document.write("</TD>");
         document.write("</TR>");
         document.write("<TR id=\"TR1"+PARAM['ID']+i.toString()+j.toString()+"\" height=\""+PARAM['heightitemtext']+"\" style=\"background: "+PARAM['bgcolor2']+"; color: "+PARAM['fontcolor2']+"\">");
         document.write("<TD id=\"TD1"+PARAM['ID']+i.toString()+j.toString()+"\" ALIGN=\"CENTER\" style=\"font-family: "+PARAM['font2']+"; font-size: "+PARAM['fontsize2']+"px; color: "+PARAM['fontcolor2']+"\">");
         document.write(content[0]);
         document.write("</TD>");
         document.write("</TR>");
         document.write("</TABLE>");
         document.write("</DIV>");
      }
      // arrow down
      wposyarrowdown = wheight - 10;
      if (MENU[i].length > wqtd_item)
      {
         document.write("<DIV ID=\"arrowdowndiv_"+PARAM['ID']+i.toString()+"\" NAME=\"arrowdowndiv_"+PARAM['ID']+"\" style=\"visibility: hidden; position: absolute; height: 10px; width: "+wlargebutton+"px; top: "+wposyarrowdown+"px; left: 0px\">");
         document.write("<INPUT ID=\"arrowdownbutton_"+PARAM['ID']+i.toString()+"\" NAME=\"arrowdownbutton_"+PARAM['ID']+"\" TYPE=\"BUTTON\" SRC=\"images/arrow_down.gif\" style=\"font-family: "+PARAM['font']+"; font-size: "+PARAM['fontsize']+"px; color: "+PARAM['fontcolor']+"; background: "+PARAM['bgcolor']+"; width:"+wlargebutton+"px; height:10px\" onclick=\"move_item('"+PARAM['ID']+"', "+i+", 1, "+wqtd_item+", ",",",","+MENU.length+", ",",",","+wheightitemtotal+");\">");
         document.write("</DIV>");
      }
      else {
         document.write("<DIV ID=\"arrowdowndiv_"+PARAM['ID']+i.toString()+"\" NAME=\"arrowdowndiv_"+PARAM['ID']+"\" style=\"visibility: hidden; position: absolute; height: 0px; width: "+wlargebutton+"px; top: "+wposyarrowdown+"px; left: 0px\">");
         document.write("</DIV>");
      }
      document.write("</DIV>");
   }
   document.write("</TD>");
   document.write("</TR>");
   document.write("</TABLE>");
   document.write("</DIV>");
}

To copy the content, press CTRL+A then CTRL+C

Top

How it works

Changing parameters.

First thing you should do in order to create a comMenuBar component on your page is to define the way it will look like on the page. For this, the parameter files offer you 2 sets of parameters:

General design parameters (which will define how it looks):
- Id parameter
  - PARAM['ID']: this is the id of the parameter allowing a single page to have as many comMenuBar as needed, simply creating as many parameter files and differents ids as comMenuBars.

comMenuBar size and position on the screen
- PARAM['widthbar']: total width of the comMenuBar component,
- PARAM['heightbar']: total height of the comMenuBar component,
- PARAM['posxbar']: position from the left of the comMenuBar component,
- PARAM['posybar']: position from the top of the comMenuBar component.

Border of the comMenuBar component
- PARAM['bordercolor']: color of the border,
- PARAM['bordersize']: size of the border.

Button parameters
- PARAM['widthbutton']: width of the buttons,
- PARAM['heightbutton']: height of the buttons, which has to be the same as PARAM['widthbar'],
- PARAM['font']: font of the text of the button,
- PARAM['fontsize']: size of the font of the text of the button,
- PARAM['fontcolor']: color of the font of the text of the button,
- PARAM['bgcolor']: color of the button background.

Item parameters
- PARAM['heightitemimage']: height of the image in each item,
- PARAM['heightitemtext']: height of the text in each item,
- PARAM['font2']: font of the text in each item,
- PARAM['fontsize2']: size of the font of the text in each item,
- PARAM['fontcolor2']: color of the font of the text in each item,
- PARAM['bgcolor2']: color of the item background.

Mouse action
- PARAM['bgcolorover']: color of the background when the mouse is over the item,
- PARAM['colorover']: color of the font of the item when the mouse is over it.

General margin
- PARAM['margin']: size of the margin inside each item.

Content parameters (which will tell what items to show)
- Button and item content parameters:
  - Each button and item content for a button must have the following format:
    - [

["Button text",

["item text,1,image location, link location"],

[…]

]

Note that last item or button description has no comma termination.

Your web file.

After parameterization of the comMenuBar component, the only work your web file will have to do is to draw the component according to your requirements. You can do that as follow:

Include in the header of your web page, the 2 comMenuBar js files comMenuBarD.js (procedure file) and comMenuBarP.js (parameter file) as follow:

<Script type="text/javascript" src="comMenuBar/comMenuBarD.js"></script>
<Script type="text/javascript" src="comMenuBar/comMenuBarP.js"></script>
[…]
<Script type="text/javascript" src="comMenuBar/comMenuBarPn.js"></script>

Note that it is possible to include as many parameter files as necessary to have various menus in the same page.
Define a <FORM> tag in your webpage in which the comMenuBar control will be held. It is requested to define as many FORM tags as comMenuBar controls needed in the page.
<Form name="tab">
<Script type="text/javascript">createMenuBar(MENU2,PARAM2);</script>
</Form>
[…]
<Form name="tabn">
<Script type="text/javascript">createMenuBar(MENU2n,PARAM2n);</script>
</Form>
Call the function that will create the comMenuBar control on your webpage:
<Script type="text/javascript">createMenuBar(MENU2,PARAM2);</script>

Note that the function createMenuBar has 2 parameters:
- Menu information variable that is defined in comMenuBarP.js (in the example MENU2),
- Parameter information variables that are defined in comMenuBarP.js (in the example PARAM2).

Improve the component

Well, this component is far from being perfect, and if you have the will to improve it, nothing can prevent you to open the comMenuBarD.js file and dive in the code.

Home|Contacts|Privacy Policy

Top

Recommend us

delicious

stumbleupon