Menu Structures


Any type of HTML list structure or other block level elements may be used as the foundation for a menu widget. This is accomplished by defining specific NodFire class names on the structural elements of the menu content. The widget and core CSS apply functionality and styling by looking for the pre-defined class names vs. specific tag names or parent and child nodes.

Add any content to menu items without interaction or styling conflicts. Sub menus and links may be wrapped in multiple ancestor nodes. This makes rounded corners, tab styles, drop shadows, and similar custom design elements easy to implement.

The example below shows how to specify the class names on a simple nested unordered list structure for use with the menu widget. Additional details on class names and how to apply them is available in the CSS foundation document.

Structure Types

Any type of structure from unordered lists, to definition lists, to plain DIVs may be used as the building blocks for a menu. Different structures may also be nested, e.g. a definition list as a sub menu nested in a main menu based on a unordered list. Below are examples of some typical structure types.

  • <UL>, <LI> - Unordered List - The basic unordered list is the most common structure employed by pure CSS menus.
  • <DL>, <DT>, <DD> - Definition List - The definition list is a good match for menus that group links with titles.
  • <DIV> - Plain DIVs - Use with anchor (<A>) and paragraph (<P>) tags to suit diverse requirements.
  • <UL> With <DL>, <DIV>, and <UL> Nested Subs - Nest different sub structures to pinpoint specific content requirements.

Item Content

The items in a structure may include links, titles, custom dividers, mega content (complex content with multiple links), and more. There is no limitation on what you decide to do with a menu item. The example below shows a sub with a single menu item containing complex mega item content.