Main page

Vertical CSS Menu

Description

This menu example demonstrates an implemention of a vertical hierarchical (multi-level) menu that utilizes cascading style sheets.

Supported Web browsers as of December 2004 include: Explorer 5 and above, Opera 7 and above, Netscape 7 and above, Mozilla Firefox 0.9 and Mozilla 1.7. This example may not work with Opera 5 or 6, or Netscape 4.7 or 6.

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 list of menu items as shown in Horizontal CSS Menu.

Steps to recreate

  1. Place the mouse cursor where you will position the menu, then insert the new Label control clicking on the Label icon in the Toolbox and set its Content property to HTML.
  2. Add the appropriate programming code to the label's Before Show event or copy it from the provided example. Also add the CCDLookUpTreeToUL function to the events file but outside of defined events (event functions), as shown in the example.
  3. Switch to the HTML mode and add the <style> and <script> blocks as shown in the example.
  4. Make style changes as needed, for example by modifying "color", "background", "text-decoration" and other style attributes. You can also change or delete menu arrow icons in the Icons Styles section.

 

Database Tables used

Database: Intranet

Tables: menu

Events Used

CCDLookUpTreeToUL function - retrieves the list of menu items from the database and outputs HTML list.

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