Choose Website > Dynamic Menus.
Last updated on
In this article, you'll learn about the options in the Admin Console that you can set to control the display of menu items created using the Dynamic Menu module.
If you are new to working with Dynamic Menus, see Understanding Dynamic Menus.
To get instructions on how to build new navigation bars, read Create site navigation. This article assumes you've already created a site navigation and you are ready to customize it.
Dynamic menus are comprised of levels of menus, including the root menu and its sub-menus. The root menus and the sub-menus contain linked items referred to as menu items. All menus have a root menu, which is the main menu that appears on the screen. Menus may optionally have sub-menus. These are the menus that appear when the visitor hovers their cursor over the item.
Here's a example of a navigation bar that contains both a top-level root menu and sub-menus:
And here's an example of the hierarchy that is used to create sub-menu items in the Dynamic Menu section of the Admin Console:
When you use the Admin Console to customize the display of your navigation menus, you can customize both the menu itself and the menu items. The sidebar of the Dynamic Menu interface includes two areas: Customize menu look and Customize item look.
For example, to add a rollover effect when the visitor hovers over a menu item, you'll apply the images in Customize item look. When you want to affect the entire menu, you'll adjust the settings in the Customize menu look area. This article focuses on the options available in these two areas of the interface and describes how to update site navigation to make it look as desired using the settings provided.
Note: You are also free to customize the site navigation using CSS rules. This allows unlimited possibilities for creating different appearances. To learn more about how to use CSS, read Adjusting the appearance of navigation created with the Dynamic Menu module and Using CSS to style web pages and site content.
Setting the options that affect the menu
To begin customizing the menu items of an existing menu, follow these steps:
-
-
The list of previously created Dynamic Menus appears. Click the name of the menu you want to customize.
-
The Menu Details page appears. Click Next in the set of buttons at the bottom of the page.
-
The Menu Items page appears. In the sidebar, you'll find the two links to access the customization areas: Customize menu look and Customize item look.
-
Begin by customizing the menu itself. Click the option to Customize menu look. The Customize Dynamic Menu Appearance window appears. The first set of radio buttons allow you to choose whether to customize the root menu or the sub-menus. Select the option to define whether the settings will be applied to the top-level root menu or to the sub-menu items (and sub-sub-menu items, if applicable).
-
Adjust the settings in the next section to choose the orientation of the menu's direction (vertical or horizontal). If you select the option to display sub-menu arrows, they are shown automatically when you preview the navigation bar.
Note: If you do not see the Sub-Menu Position menu shown in the screenshot above, it is because you are editing a menu that does not contain sub-menu items. Try selecting a different menu (or adding sub-menus to the menu you are editing) and then access the Customize menu look area again.
Choose an option in the Sub-Menu Postion menu. The descriptions of each option are listed below:
Under Parent: places sub-menus directly under the parent menu item.
Next to Parent: places sub-menus to the right of a parent menu item.
Relative to Parent: places sub-menus relative to the parent menu item. Enter the X (horizontal location in pixels) and Y (vertical location in pixels) coordinates. For example, if the parent menu item is 20 pixels high and you want to display the sub-menu beneath it with an extra 10 pixel gap, choose this option and enter 0 for the X position and 30 for the Y position.
Relative to Left Parent : places the expanded sub-menus for any of the menu items in the same position relative to the very first item (farthest left item). Enter the X (horizontal location in pixels) and Y (vertical location in pixels) coordinates.
Relative to Page: places all expanded sub-menus at a given X,Y position on the screen regardless of the location of the menu itself.
-
The last section of the window provides settings to set a border. Choose a border style and then enter the border width in the provided fields.
To select a different border color, click the square box to the right of the Border Color field. Choose the color from the Color Picker interface that appears, and then click Select to close the .
-
When you are finished making the selections that affect the menu, click Save at the bottom of the window:
Setting the options that affect the menu items
In this section, you'll learn about the properties you can adjust using the interface that affects the menu items.
Follow the steps shown above to access the Item Details page for the menu you want to customize. This time, you'll explore the options available in the Menu item look section.
-
Click the linked item in the sidebar to Customize item look.
-
The Customize Dynamic Menu Items Appearance window appears. The top portion is a series of radio buttons that enable you to select the various states of the menus and sub-menus. Choose the top-level (root) or sub-navigation (sub-menu) to affect.
The term "is not over" refers to the original state of the button, as it appears before any user interation. This is also known as the up state.
The term "is over" refers to the state of the button when the visitor hovers thier cursor over a menu or sub-menu.
-
The next section of the window allows you to customize the text formatting of the state and menu or sub-menu item you selected above.
Enter the font name and size (in points) in the provided fields.
Click the square icon to the right of the Font Color and Back Color fields to choose a color in the Color Picker. (Or enter a hexadecimal color value in the fields).
Choose the horizontal and vertical alignment of the text in the menu items using the menus.
Select the checkboxes next to Bold, Underline and Italic options if you'd like to add styles to the text in the menu items.
Note: Remember that you can choose a different set of options for each top-level and sub-level menu item, for both the up (original, or not over) states and the over (hover) states of the menu items. This enables you to create rollover effects when the user interacts with the menu items.
-
The next section of the window allows you to set a border around the menu items. Click the square icon and use the Color Picker that appear to enter the color of the border. Alternatively, you can enter the hexadecimal color value in the field.
Select the style from the Border Style menu. Enter the width of the border (in pixels) in the Border Width field.
Note: If you add borders to one state of a menu or sub-menu item, it is a best practice to also add them to the other state. (For example, add the same border width to both the up (not over) and hover (over) states). That way, when the visitor rolls their cursor over the menu item, it will not appear to jump to a different height or width.
-
The last section of the window enables you to specify padding (white space) around the top, left, bottom and right sides of each menu item. This is similar to the effect you get when applying a CSS rule to an element. It is a nice way to make the menus easier to use, because it adds some space to make each menu item easier to click.
To add padding, enter a numeric value (in pixels) of the space you'd like to add for each side of the selected state of the menu item or sub-menu item. For example, to add 5 pixels of space between the width of each item in a horizontally positioned menu, enter 5 in the Left and Right fields.
-
When you are finished setting the desired options, click Save to preserve your changes.
If you are having issues with the navigation bars you've created, learn how to resolve them by reading Troubleshooting issues with Dynamic Menus.
Sign in to your account