Welcome to JBC_DynaMenu, the best DHTML menu tool.
JBC DynaMenu - Dynamic Menus and PopupMenus for HTML
 

This product is free, it is provided with its source code.

Overview :

This product is a JavaScript product that allows you to build dynamic menus and popupmenus within your HTML pages. These menu bars and popupmenus may be displayed dynamically, anywhere in your HTML pages. Building menus is really simple, so it does not require a generation program or an interface builder to realize your navigation menus. Your menus are created dynamically while your page is being loaded. They will be displayed -if you want it- respecting your visitors' font size preferences. You may have as many menus or hierachies as you wish.

You may create check box or radio button menus, or insert icons inside your menus and of course change dynamically texts, icons, and any menu properties.

Though the package will handle automatically mouse events, you may also manage your own actions.

Transitions and shadow effects will be used if your browser supports this technology, or ignored if it doesn't. Menus may appear either in an unrolling manner, or by using blend/fading transition.

 

Software Requirements :

In order that menus can work, JavaScript and CSS support options should be enabled in browser's settings.

This product was successfully tested with those browsers:

  • Microsoft Internet Explorer 4.0; 6.0
  • Netscape 6.2
  • Netscape 7.0

Netscape browsers 6 and 7 support neither transitions nor shadow effects. These effects will be ignored by these browsers.

Netscape Communicator 4.x is unsupported.

 

Download the latest version at no charge :

Source code and API documentation - JBC_DynaMenu 1.0 - Revision A1 (size 20K).

You can download it from : JBCSolutions - North American Site
 

 

 
Create your own Menus step by step

 

STEP 1 :

The right column contains a mini shell of a HTML page.

  • Line 3 allows to include the JavaScript package.
     
  • Lines 7 to 10 allow you to install your menus. (Those lines will be discussed in Step 2).
     
  • Line 14 executes installation of menus when loading your HTML page.
     
 
 1  <Html>
 2  <Head>
 3  <Script language="JavaScript" src="./JBC_DynaMenu.js">
 4  </Script>
 5  <Script language="JavaScript">
 6  <!--
 7  function JBC_InstallMenus()
 8   {
 9    ................
10   } /* End of Installation */
11  //-->
12  </Script>
13  </Head>
14  <Body onload="JBC_InstallMenus()">
15  ....
16  </Body>
17  </Html>

STEP 2 :

To see what was generated by the code from the right colum, click on :

 Show Me  
 

Before installing menus, you should verify whether the browser being used supports dynamic HTML. If not, you may inform your visitors or maybe load automatically a page that does not use menus.

Definition of popupmenus should be embedded between the BuilderStartMenu and BuilderEndMenu functions. To end construction of popupmenus, you should use the BuilderApplyMenu function.

The BuilderStartMenu function has one parameter, the name of the menu.

The BuilderLinkToSubMenu function has 2 parameters as a minimum : the first one defines the text of the item, the second one defines the name of the submenu that should be opened.

The BuilderLinkToUrl function has 2 parameters as a minimum : the first one defines the text of the item, the second one defines the URL that should be used as a link.

Some optional parameters will be discussed in other chapters.

 
function JBC_InstallMenus()
{
 if (!JBC_IsValidBrowser())
     return;

 JBC_BuilderStartMenu('dropdown1');
 JBC_BuilderLinkToSubMenu('Open dropdown2','dropdown2');
 JBC_BuilderSeparator();
 JBC_BuilderLinkToUrl('Goto Step 1','#Step1');
 JBC_BuilderEndMenu();

 JBC_BuilderStartMenu('dropdown2');
 JBC_BuilderLinkToUrl('Goto Step2','#Step2');
 JBC_BuilderEndMenu();

 JBC_BuilderApplyMenu();

} /* End of Installation */

STEP 3 :

Until now, you have created a couple of menus. If you want this popupmenu to be linked to a menu bar, you should insert the line from the right colum inside your HTML body. This division may be located anywhere, it will determine the location of this menu bar.

 
<Div ID="MenuBar"></Div>
STEP 4 :

Definition of items menu bars should be embedded between the BuilderStartMenuBar and BuilderEndAndApplyMenuBar functions.

The BuilderStartMenuBar function has one parameter, as a minimum : the first one indicates the name of the menu bar, the second one (optional) will be discussed in a separate chapter.

To define an item, use the BuilderItemMenuBar function. This function has 2 parameters : the first one is the text of the item, the second one is the name of a popupmenu.


Example.

 
 

 

function JBC_InstallMenus()
{
 if (!JBC_IsValidBrowser())
     return;

 JBC_BuilderStartMenu('dropdown1');
 JBC_BuilderLinkToSubMenu('Open dropdown2','dropdown2');
 JBC_BuilderSeparator();
 JBC_BuilderLinkToUrl('Goto Step 1','#Step1');
 JBC_BuilderEndMenu();

 JBC_BuilderStartMenu('dropdown2');
 JBC_BuilderLinkToUrl('Goto Step2','#Step2');
 JBC_BuilderEndMenu();

 JBC_BuilderApplyMenu();

 JBC_BuilderStartMenuBar('MenuBar');
 JBC_BuilderItemMenuBar('Item 1','dropdown1');
 JBC_BuilderItemMenuBar('Item 2','dropdown2');
 JBC_BuilderEndAndApplyMenuBar();
 
} /* End of Installation */
 

 
More information

 

Hint 1 : Change Font, Colors, Border ...

You may change the background color as well as the hovercolor, in a global manner, by using the BuildSetColors function.

You may change the border of menus and submenus by using the BuilderSetBorder function.

You may change the style of menus and popupmenus by changing in a global manner the default style value and using the BuilderSetStyle function.

You may also change just one item by inserting HTML tags within the text of menu bars or popupmenus.

The BuilderStartMenuBar function disposes of a second parameter allowing you to create vertical menu bars when this parameter is set at "true".

Example. 

function JBC_InstallMenus()
{
 if (!JBC_IsValidBrowser())
     return;

 JBC_BuilderStartMenu('dropdown1');
 JBC_BuilderLinkToSubMenu('Open dropdown2','dropdown2');
 JBC_BuilderSeparator();
 JBC_BuilderLinkToUrl('Goto Step 1','#Step1');
 JBC_BuilderEndMenu();

 JBC_BuilderStartMenu('dropdown2');
 JBC_BuilderLinkToUrl('Goto Step2','#Step2');
 JBC_BuilderEndMenu();

 JBC_BuilderApplyMenu();

 JBC_BuilderSetColors('#8E8ECA','#7070B0');
 JBC_BuilderSetStyle("font-weight:bolder; color:#FFFFA0;");
 JBC_BuilderSetBorder("border: 3px solid #F0F0FF;");

 JBC_BuilderStartMenuBar('MenuBar1',true);
 JBC_BuilderItemMenuBar('<U>Item A</U>','dropdown1');
 JBC_BuilderItemMenuBar('<I>Item B</I>','dropdown2');
 JBC_BuilderEndAndApplyMenuBar();
 
} /* End of Installation */

Hint 2 : Open a PopupMenu

If you want a popupmenu to be shown by clicking, you may use the OpenPopupMenu function.

Example.

      Show Me  

<B onClick="JBC_OpenPopupMenu(event,'dropdown1');">
   Show Me
</B>

Hint 3 : Handling my Own Action

The BuilderLinkToSubMenu and BuilderLinkToUrl functions will handle events automatically. If you want to manage your own action when clicking on a menu, you may use the BuilderOnClick function.

When clicking on an item, all menus are automatically closed. The BuilderOnClick function offers a paramater that will enable or disable general closing for all menus. This parameter is discussed in the following chapter.

Example.
  

function JBC_InstallMenus()
{
 ...

 JBC_BuilderStartMenu('dropdown3');
 JBC_BuilderOnClick('Click On 1',"MyClickAction('Item 1')");
 JBC_BuilderOnClick('Click On 2',"MyClickAction('Item 2')");
 JBC_BuilderEndMenu();
 
 ...
} /* End of Installation */

function MyClickAction(id)
{
  alert("OnClick : On item '" + id + "'");
} /* End of function */

Hint 4 : Add an Icon

Popupmenus contain 3 areas or columns :the first one is called header and reserved for icons, check box characters, etc..., the second one contains the text of the items, the third one is reserved for the submenus icon. Consequently the BuilderLinkToUrl, BuilderLinkToSubMenu and BuilderOnClick functions offer an additional parameter allowing you to set icons or characters within the header column. The position of this parameter depends on the function. You are recommanded to read the detailed description of each function.

The BuilderOnClick function has a fourth boolean parameter to keep the menu open after clicking on it.

Example.

 
 
 

 

function JBC_InstallMenus()
{
 ...

 JBC_BuilderStartMenu('dropdown4');
 JBC_BuilderLinkToUrl('Goto Step 1','#Step1');
 JBC_BuilderLinkToUrl('Goto Step 2','#Step2',null,
     "<Img Src='./images/JbcBulletGreen.gif'>");
 JBC_BuilderOnClick('Click On 1',"MyClickAction('Item 1')");
 JBC_BuilderOnClick('Click On 2',"MyClickAction('Item 2')",
     "<Img Src='./images/JbcBulletRed.gif'>");
 JBC_BuilderEndMenu();
 
 ...
} /* End of Installation */

Hint 5 : CheckBox item

This example shows how to manage check box items.

In this example, we are using a Webdings font, especially the a character. You may also realize check boxes by using your own icons.

Example.

 
 

 

function JBC_InstallMenus()
{
 ...

 JBC_BuilderStartMenu('dropdown5');
 JBC_BuilderOnClick('CheckBox 1',"MyOption('MyCB1')",
     "<Span Id='MyCB1' Style='font-family:Webdings;'>a</Span>");
 JBC_BuilderOnClick('CheckBox 2',"MyOption('MyCB2')",
     "<Span Id='MyCB2' Style='font-family:Webdings;'>a</Span>");
 JBC_BuilderEndMenu();
 
 ...
} /* End of Installation */

function MyOption(id)
{
  var tag = JBC_GetObjectFromId(id);
  if (tag.innerHTML == "a")
     {
      alert("Item '" + id + "' is : Set Off");
      tag.innerHTML = " ";
     }
  else
     {
      alert("Item '" + id + "' is : Set On");
      tag.innerHTML = "a";
     }
} /* End of function */

Hint 6 : RadioButton item

This example shows how to manage radio button items.

In this example, we are using a Webdings font, especially the = character. You may also realize radio buttons by using your own icons.

Example.

 
 

 

function JBC_InstallMenus()
{
 ...

 JBC_BuilderStartMenu('dropdown6');
 JBC_BuilderOnClick('RadioButton 1',"MyRadioButton('MyRB1')",
     "<Span Id='MyRB1' Style='font-family:Webdings;'>=</Span>");
 JBC_BuilderOnClick('RadioButton 2',"MyRadioButton('MyRB2')",
     "<Span Id='MyRB2' Style='font-family:Webdings;'> </Span>");
 JBC_BuilderEndMenu();
 
 ...
} /* End of Installation */

function MyRadioButton(id)
{
  var generic = id.substring(0,id.length -1);
  var i = 1;
  var radioButton;
  while (true)
     {
      radioButton = JBC_GetObjectFromId(generic + "" + i );
      if (radioButton == null)
          break;
      radioButton.innerHTML = " ";
      i++;
     }
  radioButton = JBC_GetObjectFromId(id);
  radioButton.innerHTML = "=";
  alert("Item '" + id + "' is : Set On");
} /* End of function */

 
API INDEX
 
Open Close Utilities
Builder - PopupMenu Builder - MenuBar Builder - Utilities

 
API - Documentation
 
 
JBC_OpenMenu(tagOwner,menuId,vertical)
Description : This fuction allows to open a menu.
Parameters :
  • tagOwner : (Tag Object) - This tag allows to calculate the menu coordinates so that it may be displayed
  • menuId : (String) - A string that specifies the name of this Menu
  • vertical : (Optional Boolean) - This parameter is set at "false" by default, it should be set at "true" if you want a vertical menu bar.
Return value : None
 
 
JBC_OpenSubMenu(tagOwner,parentId,menuId)
Description : This function allows to open a submenu.
Parameters :
  • tagOwner : (Tag Object) - This tag allows to calculate the menu coordinates so that it may be displayed
  • parentId : (String) - A string that specifies the name of the parent Menu
  • menuId : (String) - A string that specifies the name of this Menu
Return value : None
 
 
JBC_OpenPopupMenu(e,menuId)
Description : This function allows to open a popupmenu to coordinates provided by a mouse event.
Parameters :
  • e : (Event Object) - This object should be a mouse event, usually provided after a click
  • menuId : (String) - A string that specifies the name of this Menu
Return value : None
 
 
JBC_CloseMenu(deferMilliSeconds)
Description : This function will close menus while respecting a toleration period.
Parameters :
  • deferMilliSeconds : (Optional Integer) - Number of deferring milliseconds
Return value : None
 
 
JBC_CloseSubMenu(menu)
Descriptions : This function closes a specific submenu.
Parameters :
  • menu : (Menu Object) - The submenu that should be closed.
Return value : None
 
 
JBC_CloseAllMenus()
Description : This function closes all menus.
Parameters :
  • Parameters : None
Return value : None
 
 
JBC_ExecuteCloseMenu(reqID)
Description : This function closes a menu immediately (without toleration period).
Parameters :
  • reqID : (Integer) - The request ID
Return value : None
 
 
JBC_IsValidBrowser()
Description : This function checks out whether the browser will be able to support functions required for dynamic HTML.
Parameters :
  • parameter : None
Return value : Boolean - Returns "true" if the browser may be accepted, "false" if the browser does not support the functions required.
 
 
JBC_GetObjectFromId(id)
Description : This function returns a reference to the first object with the specified value of the ID attribute.
Parameters :
  • id : (String) - The string identifying the object.
Return value : (Tag Object) - Returns the first object with the same ID attribute as the specified value.
 
 
JBC_GotoURL(url,targetFrane)
Description : This function allows a URL to be loaded.
Parameters :
  • url : (String) - A string that specifies the URL of a Web page.
  • targetFrame : (Optional String) - A String that specifies the name of the target frame to query.
Return value : None
 
 
JBC_DoTransition(menu,transition)
Description : This function applies transitions filter(s) to obtain particular visual effect.
Parameters :
  • menu : (Menu Object) - The object on which transitions should be applied.
  • transition : (Integer) - The type of transition.
Return value : None
 
 
JBC_SetBlendTransition(option)
Description : This function indicates how menus will be shown, either by using the blend transition (i.e. by revealing the new content of the menu by fading the original content), or by unrolling the menu.
Parameters :
  • option : (Boolean) - Indicates whether the blend transition should be used or not.
Return value : None
 
 
JBC_GetBlendTransition()
Description : This function returns the blend transition options.
Parameters :
  • parameter : None
Return value : Boolean - Returns "true" if the blend transition may and should be applyed, "false" if the browser does not support this feature or if the blend transition is set off.
 
 
Builder Functions
 
 
JBC_BuilderStartMenu(name)
Description : This function starts creation of a menu.
Parameters :
  • name : (String) - A string that specifies the name of this Menu
Return value : None
 
 
JBC_BuilderLinkToSubMenu(string,subMenu,header)
Description : This function creates an item that will open a submenu when the mouse hovers it.
Parameters :
  • string : (String) - The text of the item. It may also contain valid HTML tags
  • subMenu : (String) - A string that specifies the name of the target submenu that should be opened when the mouse hovers it
  • header : (Optional String) - A HTML string that should be used as a header. It may be an icon, or any object you want to be set on the left of the item body.
Return value : None
 
 
JBC_BuilderLinkToUrl(string,href,targetFrame,header)
Description : This function creates an item with a link to a URL, when this item is clicked.
Parameters :
  • string : (String) - The text of the item. It may also contain valid HTML tags
  • href : (String) - A string that specifies the URL of a Web page.
  • targetFrame : (Optioan String) - A String that specifies the name of the target frame to query.
  • header : (Optional String) - A HTML string that should be used as a header. It may be an icon, or any object you want to be set on the left of the item body.
Return value : None
 
 
JBC_BuilderOnClick(string,handler,header,closeAllMenus)
Description : This function creates an item. The function specified by the handler will be executed when clicking on the item. It allows you to handle an action following a click.
Parameters :
  • string : (String) - The text of the item. It may also contain valid HTML tags
  • handler : (String) - A valid, JavaScript function
  • header : (Optional String) - A HTML string that should be used as a header. It may be an icon, or any object you want to be set on the left of the item body
  • closeAllMenus : (Optional Boolean) - If this parameter is not specified, null or "true", all menus will be automatically closed when clicking on the item. If you want the menus to stay open, you should specify "false".
Return value : None
 
 
JBC_BuilderSeparator(size)
Description : This function draws a horizontal rule.
Parameters :
  • size : (Optional Integer) - The height of the HR object. If this parameter is null or not specified, the default value will be used.
Return value : None
 
 
JBC_BuilderNote(string,all)
Description : This function creates an item. This item is static, it doesn't handle actions.
Parameters :
  • string : (String) - The text of the item. It may also contain valid HTML tags
  • all : (Optional Boolean) - If this parameter is not specified or null, the text will inserted into the area reserved for item texts. If this parameter is set at "true", the text will be extended to the three item areas : header, text and submenu icon.
Return value : None
 
 
JBC_BuilderEndMenu()
Description : This function ends generation of a menu.
Parameters :
  • Parameter : None
Return value : None
 
 
JBC_BuilderApplyMenu()
Description : This function applies whole menus previously specified.
Parameters :
  • Parameter : None
Return value : None
 
 
JBC_BuilderStartMenuBar(name,vertical)
Description : This function starts definition of a menu bar.
Parameters :
  • name : (String) - A string that specifies the name of this MenuBar. A division tag having the same name should be found within the HTML body. The division will be filled with the description of the menu bar
  • vertical : (Optional Boolean) - This parameter is set at "false" by default, it should be set at "true" if you want a vertical menu bar.
Return value : None
 
 
JBC_BuilderItemMenuBar(string,subMenu)
Description : This function creates an item menu bar.
Parameters :
  • string : (String) - The text of the item. It may also contain valid HTML tags
  • subMenu : (String) - A string that specifies the name of the target submenu that should be opened when the mouse hovers it
Return value : None
 
 
JBC_BuilderEndAndApplyMenuBar()
Description : This function ends and applies the menu bar. The division having the same name as the menu bar will be filled with the description of the menu bar. This division should be found in the HTML body.
Parameters :
  • Parameter : None
Return value : None
 
 
JBC_BuilderSetBorder(border)
Description : This function allows to change the border for menus and submenus. All menus and submenus created after this function will inherit this border definition.
Parameters :
  • border : (Optional String) - This string may contain a valid HTML border Style string. It allows you to change borders if needed. If this parameter is not specified or null, the default border will be used.
Return value : None
 
 
JBC_BuilderSetColors(backgroundColor,hoverColor)
Description : This function allows to set background and hover colors. All menus and submenus created after this function will inherit these colors.
Parameters :
  • backgroundColor : (Color) - The color behind the content of the Menu.
  • hoverColor : (Color) - The color of item when the user hovers the mouse pointer over the item.
Return value : None
 
 
JBC_BuilderSetStyle(style)
Description : This function allows to set a default style. All menus and submenus created after this function will inherit this style.
Parameters :
  • style : (Optional String) - A valid, HTML Style string
Return value : None
 

 
 
 
 

License :

JBC grants you a royalty free license to use or modify the source code provided that the copyright notice appears on all copies.

You are not allowed to modify, remove or change the source code header : 

/**
 * JBC_DynaMenu - Dynamic Menus and PopupMenus for HTML - Version 1.0
 * by Jean-Bernard Clerin, July 2002
 * Copyright (c) 2001-2002 JBCSolutions.
 *
 * JBC grants you a royalty free license to use or modify this
 * software provided that this copyright notice appears on all copies.
 * This software is provided "AS IS," without a warranty of any kind.
 * You are not allowed to modify, remove or change this header.
 * www.JBCSolutions.com
 */

Redistribution

The Software may not be sold. This restriction does not apply to connect time charges, or flat rate connection/download fees for electronic bulletin board services or Internet dial-in services. The product may be freely distributed, provided that none of the files are altered and all of the files are included with the distribution: i.e., you may not distribute individual files or a subset of this complete package.

This Software may not be bundled with any commercial package without express written permission from JBC.

Trademarks.

® VisualMust is a registered trademark of JBC in some countries, and being registered in other countries.

® Microsoft, Windows, Internet Explorer are registered trademarks or trademarks of Microsoft Corporation.

® Netscape is a registered trademark of Netscape Communications Corporation.

(*) Other trademarks are the properties of their respective owners.