Main page

Horizontal CSS Menu

Description

This menu example demonstrates an implemention of a horizontal 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 two-level menu. For three or more menu levels you can use custom code to output the list of menu items as shown in Vertical CSS Menu example.

Steps to recreate

1. Use the Directory Builder to create directory called ' menu', based on the menu table in the Intranet database.
   • On step 2 of the builder, leave the Root Category identifier field  empty and uncheck the Create directory path for the current directory checkbox.
2. Open the 'Data Source' dialog of the menu directory, then click on the "Build Query" button and select menu_link field in both tables.
3. In the Href Type property of the CategoryLink link select Database , then select cat_menu_link in the Href Source property.
4. In the Href Type property of the SubcategoryLink link select Database , then select sub_menu_link in the Href Source property.
5. Switch to the HTML mode and locate the HTML code for the menu directory, then remove the content of the blocks:  SubcategoriesTail, CategorySeparator, ColumnSeparator, NoCategories, SubcategorySeparator , but preserve block identifiers like <!-- BEGIN SubcategoriesTail --><!-- END SubcategoriesTail --> .
6. Insert the following HTML code after <!-- BEGIN Directory menu -->

   <div id="menu">
   
     <ul id="menuList">

7. Insert <li> before the CategoryLink link and <ul> after, as shown in the example.
8. Insert <li> before the SubcategoryLink link and </li> after, as shown in the example.
9. Insert the following HTML code before <!-- END Category -->

   </li></ul>

10. Insert the following HTML code before <!-- END Directory menu -->

    </ul></div>

11. 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