You are here: Parts > Menu > Design a Menu definition
Design a Menu definition
For information about how to create or edit a part, as well as the tabs on the Edit Part screen, see Create and Edit Parts.
Show Me: Watch a video about how to add a web page to a menu.
|
1.
|
From the Design tab, select the Build tab. |
|
2.
|
To add a menu item, click Add item. The menu item appears under the top-level parent menu item, and the Menu item properties frame appears. |
Tip: To rearrange menu items, select them and click the arrows.
|
a.
|
In the Label field, enter a menu item name to display in the menu. |
|
b.
|
In the Tooltip field, enter a description to display when the cursor hovers over the menu item. |
|
c.
|
In the Link field, click the binoculars to link the menu item to a web page. The Create Page Link screen appears. For information about how to create a page link, see Create Page Link. |
|
d.
|
If you enter a window in the Open in another window named field on the Create Page Link screen, the Target window field displays the name of the window. To change the window, click the binoculars in the Link field. |
|
e.
|
If you select Use unordered list menu on the Style tab, the Styling class field and two links appear. In the Styling class field, enter the class name from your style sheet for the menu item. For example, you can enter "red" or "blue" to change the item’s color. |
|
•
|
To apply the class to sibling menu items within the same menu node, click Apply to sibling menu items. |
|
•
|
To apply the class to all menu items in the part on the same level, click Apply to all menu items at this level. |
For example, enter "red" for Level 1 and click Apply to sibling menu items.
Then enter "blue" for Sublevel A and click Apply to all menu items at this level.
On your web page, the Level items are red in Section 1 only. Level items in Section 2 are not because you only applied the style to siblings within the same node. All Sublevel items are blue because you applied the style to all items on the same level regardless of the parent node.
|
3.
|
To add an additional menu item, click Add item, and repeat the steps in this procedure. You can add as many menu items as necessary. |
|
4.
|
On the Style tab, select whether to style the menu with tables or with an unordered list formatted by CSS. |
|
5.
|
To style the menu with tables, select Use table-based menu. |
|
a.
|
In the Category field, select a style category to apply style options. For information about the style categories, see Style Categories for the Menu. |
|
b.
|
To create a custom class for CSS style options, select Enable custom CSS. |
In the Custom class field, enter a custom class such as “.navMenuItem.” You enter the CSS for the custom class in Style sheets. For information, see Design a style sheet.
|
c.
|
To select standard CSS style options, select Enable standard CSS. |
The available style options depend on the style category. For information about the standard CSS styles, see Standard CSS Style Options for Menu.
|
d.
|
After you select style options for a style category, select another style category. The program saves your changes. |
|
6.
|
To style the menu with an unordered list formatted by CSS, select Use unordered list menu. |
|
7.
|
In the Top level class name field, enter the custom class name. You enter the CSS for the custom class in Style sheets. |
|
8.
|
Click Save. You return to Parts. |
