Example 1: Horizontal Menu
The first example demonstrates a horizontal menu similar, often referred to as "popout" menus, that are practically a staple on the web. There are countless scripts for generating these dynamic menus, DOM Menu being one of them. These javascript menu systems behave similarily to desktop menu systems except that they typically activate with a mouseover event on a top level menu element and close when the mouse is moved away from the menu, often after a short delay.
The core of the DOM Menu configuration is the hierarchial associative array (Hash) data structure, which lays out the menu precisely how it will appear when rendered. Each element can have 'contents', 'contentsHover', 'statusText', 'uri', 'target' and other child elements. DOM Menu uses this data structure to build the menu and its submens on demand. The top level menu is created inside the element whose XHTML ID attribute has the same value as the name of the menu that is initialized in the domMenu_activate() function call.
The look of the menu is controlled almost exclusively through the style class definitions, with some additional tweaks specified in javascript variables. The menu system provides extensive customization which includes, but is not limited to, timings, offsets, width distribution and styles.
NOTE: The fourth menu item in the first submenu is styled in a bold, red font. This fine grained styling is accomplished by leveraging the IDs that are assigned to each menu item.
«Index
Example 2»