Main page

Vertical JavaScript Menu

Description

This menu example demonstrates an implemention of a vertical JavaScript menu based on Tigra menu component.

Supported Web browsers as of December 2004 include: Internet Explorer 5 and above, Opera 7 and above, Netscape 6 and above, Mozilla Firefox 0.9 and Mozilla 1.7.

Note: This example is implemented as a three-level menu. If two menu levels are sufficient you can use the Directory component to output the array used by the JavaScript menu, as shown in Horizontal JavaScript Menu).

Steps to recreate

  1. Switch to the HTML mode and add the folowing section into the <head> tag 
  2. <script language="JavaScript" src="menu.js"></script>
  <script language="JavaScript" src="menu_tpl.js"></script>
  <script language="JavaScript"> </script>
  3. Place the mouse cursor in front of the last </script> tag and add the new Label1 label control clicking on the Label icon in the Toolbox and set its Content property to HTML.
  4. Insert the <style> section as shown in the HTML of the example.
  5. Insert the following section into the <body> tag 
    <script
  language="JavaScript"> new menu (MENU_ITEMS, MENU_POS);</script>
  6. Add the appropriate programming code to the label's Before Show event or copy it from the provided example.  Also add the CCDLookUpTreeToArray function to the events file but outside of defined events (event functions), as shown in the example.

 

This example uses the free license of JavaScript-based Tigra menu and it works by using the Directory component to output an array of values for the menu script. Similar method can be used with various other menu scripts. If necessary modify the function CCDLookUpTreeToArray as needed.

Database Tables used

Database: Intranet

Tables: menu

Events Used

CCDLookUpTreeToArray function - retrieves the list of menu items from the database and outputs JavaScript array.

Label's Before Show event - calls the above function and assigns the resulting JavaScript array code to the Label.