		Home\|Contacts\|

Article Base

Author Options

New account

Read articles

Manage Articles

Submit Category

Client Products

Calendar

Time Selector

Text Link

Marks System

Menu Bar

Server Products

Sitemap Gen BETA

Photo Viewer

Poll Builder

Counter

Guest Book

Where am i?

LinkExchange

Sample

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

Top

Download

DOWNLOAD comMenu

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 comMenu.zip file, which contains a sample set of file that will allow you to quickly set up your own Menu on your server and web pages.

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

After downloading the comMenu.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 comMenu.zip file contains the following files:

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

If for some reason the comMenu.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.

comMenu.htm

<HTML> <HEAD> <title>Javascript Components Tester</title> <Script type="text/javascript" src="comMenu/comMenuP.js"></script> <Script type="text/javascript" src="comMenu/comMenuP1.js"></script> <Script type="text/javascript" src="comMenu/comMenuP2.js"></script> <Script type="text/javascript" src="comMenu/comMenuD.js"></script> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </HEAD> <BODY> <Form name="tab"> <Script type="text/javascript">createMenu("idmenu1",MENU1,PARAM1);</script> </Form> <Form name="tabx"> <Script type="text/javascript">createMenu("idmenu2",MENU2,PARAM2);</script> </Form> <Form name="tabc"> <Script type="text/javascript">createMenu("idmenu3",MENU3,PARAM3);</script> </Form> </BODY> </HTML>

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

comMenuP.js

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

comMenuD.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.
// comMenu downloaded at http://www.webrickco.com
// webrickco@gmail.com
// ************************************************
// JavaScript Document
function filtro_onclick(botao,Linhas,closed,opened) {
   if (botao.value=='-') {
      botao.value='+';
      botao.src=closed;
      Linhas.style.display = 'none';
   }
   else {
      botao.value='-';
      botao.src=opened;
      Linhas.style.display = '';
   }
}

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

function onMenuIn(objecto,id,bgcolorover) {
   document.getElementById(id+'wbackground').value= objecto.style.background;
   objecto.style.background=bgcolorover;
}

function onMenuInT(objecto,id,colorover) {
   document.getElementById(id+'wcolor').value= objecto.style.color;
   objecto.style.color=colorover;
}

function onMenuOut(objecto,id) {
   objecto.style.background=document.getElementById(id+'wbackground').value;
}

function onMenuOutT(objecto,id) {
   objecto.style.color=document.getElementById(id+'wcolor').value;
}

function createMenu(id,MENU,PARAM)
{
   var wbody = parseInt(PARAM['width'],10) - parseInt(PARAM['margin'],10);
   document.write("<INPUT ID=\""+id+"wbackground\" NAME=\""+id+"wbackground\" TYPE=\"HIDDEN\">");
   document.write("<INPUT ID=\""+id+"wcolor\" NAME=\""+id+"wcolor\" TYPE=\"HIDDEN\">");
   document.write("<TABLE CELLPADDING=\"0\" CELLSPACING=\"0\" height=\"4px\" width=\""+PARAM['width']+"\">");
   document.write("<TR>");
   document.write("<TD>");

for (i=0;i<MENU.length;i++)
   {
      header = MENU[i][0].toString().split(",");
      document.write("<TABLE CELLPADDING=\"0\" CELLSPACING=\"0\" height=\"4px\" width=\""+PARAM['width']+"\">");
      document.write("<TR id=\"dav"+id+i.toString()+"\" style=\"background: "+PARAM['bgcolor']+"; color: "+PARAM['fontcolor']+"\" onmouseover=\"onMenuIn(this,'"+id+"', '"+PARAM['bgcolorover']+"');\" onmouseout=\"onMenuOut(this,'"+id+"');\">");

if (header[2]=="close")
      {
 		 		document.write("<TD style=\"cursor: hand; font-family: Verdana; font-size: 10px\" width=\"3%\"><IMG SRC=\""+PARAM['folderclosed']+"\" id=\"link"+id+i.toString()+"\" name=\"link"+id+i.toString()+"\" onclick=\"return filtro_onclick(this,Linha"+id+i.toString()+", ",",'"+PARAM['folderclosed']+"', ']+"',']+"','"+PARAM['folderopen']+"')\"></TD>");
		 		document.write("<input type=\"HIDDEN\" name=\"link"+id+i+"\" value=\"+\">");
      }
      else
      {
        document.write("<TD style=\"cursor: hand; font-family: Verdana; font-size: 10px\" width=\"3%\"><IMG SRC=\""+PARAM['folderopen']+"\" id=\"link"+id+i.toString()+"\" name=\"link"+id+i.toString()+"\" onclick=\"return filtro_onclick(this,Linha"+id+i.toString()+", ",",'"+PARAM['folderclosed']+"', ']+"',']+"','"+PARAM['folderopen']+"')\"></TD>");
		 		document.write("<input type=\"HIDDEN\" name=\"link"+id+i+"\" value=\"-\">");
      }
      if (header[3].indexOf(".") < 0)
      {
         document.write("<TD id=\""+header[0]+"\" style=\"font-family: "+PARAM['font']+"; font-size: "+PARAM['fontsize']+"px; color: "+PARAM['fontcolor']+"\" width=\"97%\"> "+header[0]+"</TD>");
      }
      else
      {
         document.write("<TD id=\""+header[0]+"\" style=\"cursor: hand; font-family: "+PARAM['font']+"; font-size: "+PARAM['fontsize']+"px; color: "+PARAM['fontcolor']+"\" width=\"97%\" onmouseover=\"onMenuInT(this,'"+id+"', '"+PARAM['colorover']+"');\" onmouseout=\"onMenuOutT(this,'"+id+"');\" onclick=\"menu_onclick('"+header[3]+"');\"> "+header[0]+"</TD>");
      }
      document.write("</TR>");
      document.write("</TABLE>");
      if (header[2]=="close")
      {
         document.write("<TABLE CELLPADDING=\"0\" CELLSPACING=\"0\" ID=\"Linha"+id+i+"\" STYLE=\"display: none\" height=\"4px\" width=\""+PARAM['width']+"\">");
      }
      else
      {
         document.write("<TABLE CELLPADDING=\"0\" CELLSPACING=\"0\" ID=\"Linha"+id+i+"\" height=\"4px\" width=\""+PARAM['width']+"\">");
      }
      for (j=1;j<MENU[i].length;j++)
      {
         content = MENU[i][j].toString().split(",");
         document.write("<TR id=\"dav"+id+i.toString()+j.toString()+"\" style=\"background: "+PARAM['bgcolor2']+"\" onmouseover=\"onMenuIn(this,'"+id+"', '"+PARAM['bgcolorover']+"');\" onmouseout=\"onMenuOut(this,'"+id+"');\" height=\"15px\">");
         document.write("<TD style=\"cursor: hand; font-family: Verdana; font-size: 10px\" width=\""+PARAM['margin']+"\" align=\"right\"> <IMG SRC=\""+content[2]+"\"> </TD>");
         if (content[3].indexOf(".") < 0)
         {
            document.write("<TD id=\""+content[0]+"\" style=\"font-family: "+PARAM['font2']+"; font-size: "+PARAM['fontsize2']+"px; color: "+PARAM['fontcolor2']+"\" width=\""+wbody+"px\">"+content[0]+"</TD>");
         }
         else
         {
            document.write("<TD id=\""+content[0]+"\" style=\"cursor: hand; font-family: "+PARAM['font2']+"; font-size: "+PARAM['fontsize2']+"px; color: "+PARAM['fontcolor2']+"\" width=\""+wbody+"px\" onmouseover=\"onMenuInT(this,'"+id+"', '"+PARAM['colorover']+"');\" onmouseout=\"onMenuOutT(this,'"+id+"');\" onclick=\"menu_onclick('"+content[3]+"');\">"+content[0]+"</TD>");
         }
         document.write("</TR>");
      }  
      document.write("</TABLE>");
	}
	document.write("</TD>");
  document.write("</TR>");
  document.write("</TABLE>");
}

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 comMenu 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):

comMenu size and margins
- PARAM['width']: total width of the comMenu component,
- PARAM['margin']: margin defined for text inside each option.

Design parameters for the header
- PARAM['font']: Font of the header,
- PARAM['fontsize']: Size of the font of the header,
- PARAM['fontcolor']: Color of the font of the header,
- PARAM['bgcolor']: Background color for the header.

Design parameters for the options
- PARAM['font2']: Font of the options,
- PARAM['fontsize2']: Size of the font of the options,
- PARAM['fontcolor2']: Color of the font of the options,
- PARAM['bgcolor2']: Background color for the options.

Mouse action
- PARAM['bgcolorover']: Color of option background when mouse is over,
- PARAM['colorover']: Color for option text when moude is over.

Open/close icons
- PARAM['folderopen']: image that represents opened folder,
- PARAM['folderclosed']: image that represents closed folder.

Content parameters (which will tell what items to show)
- Header and item content parameters:
  - Each header and item content must have the following format:
    - [
      ["Header text,0,open or close,",
          ["item text,1,item image location, page redirection"],
          [...]
        ],
      ],
      [...]
      ]

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

Your web file.

After parameterization of the comMenu 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 comMenu js files comMenuD.js (procedure file) and comMenuP.js (parameter file) as follow:

<Script type="text/javascript" src="comMenu/comMenuP.js"></script>
<Script type="text/javascript" src="comMenu/comMenuD.js"></script>
[…]
<Script type="text/javascript" src="comMenu/comMenuDn.js"></script>

Note that it is possible to include as many parameter files as necessary to have various menus in the same page.
Define the comMenu control by calling the function createMenu.
<Form name="tab">
<Script type="text/javascript">createMenu(MENU2,PARAM2);</script>
</Form>
[…]
<Form name="tabn">
<Script type="text/javascript">createMenu(MENU2n,PARAM2n);</script>
</Form>

Note that the function createMenu has 2 parameters:
- Menu information variable that is defined in comMenuP.js (in the example MENU2),
- Parameter information variables that are defined in comMenuP.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 comMenuD.js file and dive in the code.

Home|Contacts|Privacy Policy

Top

Recommend us

delicious

stumbleupon