Add an animated Navigation Menu to a web site, with either horizontal or vertical orientation.
Terminology Note:
With this component, the term "Menu Title" is used to refer to the navigation menu's top-level items that are always visible. A "Menu Title" may have an associated menu with 1 or more "Menu Items". A "Menu Item" may in turn have an associated submenu with 1 or more "Submenu Items".
Internet Explorer 7+, Firefox 3+, Safari 4+
To appear correctly in Internet Explorer, Navigation Menu must be rendered in Internet Explorer's standards mode. To ensure this, make sure that a valid Document Type Definition appears at the beginning of the document, such as:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 TRANSITIONAL//EN" "http://www.w3.org/TR/html4/loose.dtd">
Note: The Navigation Menu component uses the MooTools JavaScript framework, which is known to be incompatible with other JavaScript frameworks, including JQuery.
Options: General Appearance
- Unique Element ID
- The value for the id attribute assigned to the inserted root HTML tag for the component. This value is used to uniquely identify the component.
- Menu Orientation
- Is this a vertical or horizontal navigation menu?
- Menu Animation
- How should the opening of a menu or submenu be animated?
- Animation Duration
- The length of time, in milliseconds, that animations should take when showing the opening and closing of menus.
- Hide Delay
- The length of time, in milliseconds, that a menu should remain displayed after the mouse leaves the menu area.
- Title Item Auto-Width
- Should menu titles be fixed width or size to fit the title text? This option is applicable only to horizontal menus.
- Title Left/Right Padding
- The left/right padding around title text, in pixels.
- Title Top/Bottom Padding
- The top/bottom padding around title text, in pixels.
- Title Background Color
- The background color for menu titles.
- Title Border Width
- The width of the border around all of the menu titles, in pixels. This option is applicable only to vertical menus.
- Title Border Color
- The color of the border around all of the menu titles. This option is applicable only to vertical menus.
- Title Item Separator Color
- The color of the line that separates menu titles. Set this to match the background color if no separator is desired.
- Title Font Color
- The color of menu title text.
- Hover Title BG Color
- The background color for a menu title when the mouse is hovering over it.
- Hover Title Font Color
- The text color for a menu title when the mouse is hovering over it.
- Title Font
- The font of menu title text.
- Show Menu Arrows
- Should arrows appear next to titles that have an associated menu? Note that there is a separate arrows option for submenus (see Options: Menu Appearance).
- Menu Arrows Color
- The color of top level menu arrows in the default state.
- Hover Menu Arrows Color
- The color of top level menu arrows when the mouse is hovering over the associated menu title.
- Menu Item Auto-Width
- Should menus automatically size to fit the widest menu item?
- Menu Item Width
- The width of all menu items, in pixels. This option is applicable only if Menu Item Auto-Width is not selected.
- Menu Item Left/Right Padding
- The left/right padding around menu item text, in pixels.
- Menu Item Top/Bottom Padding
- The top/bottom padding around menu item text, in pixels.
- Menu Opacity
- The opacity of menus. The maximum value, 100%, means that menus are completely opaque. Lower values mean that menus are partially transparent.
- Menu Background Color
- The background color of menu items.
- Menu Border Color
- The color of the border that surrounds a menu.
- Menu Item Separator Color
- The color of the separator between menu items. If no separator is desired, set this color to match Menu Background Color.
- Menu Font Color
- The color of menu item text.
- Hover Menu BG Color
- The background color of a menu item when the mouse is hovering over it.
- Hover Menu Font Color
- The text color for a menu item when the mouse is hovering over it.
- Menu Font
- The font of menu item text.
- Show Submenu Arrows
- Should arrows appear next to menu item titles for items that have an associated submenu?
- Submenu Arrows Color
- The color of submenu arrows in the default state.
- Hover Submenu Arrows Color
- The color of the submenu arrow for a menu item when the mouse is hovering over the menu item.
- Number of Menu Titles
- The number of top-level menu titles.
- Title
- The text title of a top-level menu.
- Title Link
- The URL to which a menu title should link when clicked. Leave empty if the menu title should not link to any URL (it may just have a menu).
- Number of Menu Items
- The number of menu items available under a particular menu title. Set this option to "0" if a menu title should not have a menu under it.
- Item Title
- The text title of a menu item.
- Item Link
- The URL to which a menu item should link when clicked. Leave empty if the menu item should not link to any URL (it may just have a submenu).
- Number of Submenu Items
- The number of submenu items available under a particular menu item. Set this option to "0" if a menu item should not have a submenu under it.
- Submenu Item Title
- The text title of a submenu item.
- Submenu Item Link
- The URL to which a submenu item should link when clicked.