In this article, you'll learn about the Dynamic Menu module and get an overview of how it works.
If you'd like to learn how to generate navigation menus using the Dynamic Menus module, read Create site navigation and Editing menu items in site navigation.
You can use the Dynamic Menus module to create site navigation. This strategy is recommended, because it generates an intuitive interface visitors can use to jump between the pages of your site. While you are not limited to using the Dynamic Menus module (you can choose to use your own HTML and CSS code to create custom menus), it offers an easy way to create and maintain site navigation using the options in the Admin Console.
The Dynamic Menus module generates lightweight, standards-compliant code that is accessible and designed for cross-browser compatibility. The interface enables you to specify the menu names and set up the desired structure.
Dynamic Menus are comprised of menus which include the root menu and its sub-menus. The root menus and the sub-menus contain items, which are 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. Sub-menus appear when the visitor hovers their cursor over a root menu item.
You have complete control over the look and feel of the navigation, and you can choose the menu styles and colors you prefer. When customizing the appearance of Dynamic Menus, you can use CSS rules to affect the way the menus and the menu items are displayed. To change the look and feel of the entire menu, apply the rules to the Menu look. When you want to add rollover effects as the visitor hovers over a menu item, you'll apply the images to the Item look.To learn more about customizing navigation bars, see Adjusting the appearance of navigation created with the Dynamic Menu module. Also see Using CSS to style web pages and site content.
The screenshot below illustrates a navigation menu generated using the Dynamic Menus module:
And here's another example of a Dynamic Menu using different CSS styles to change its appearance:
If desired, you can also use your own image files or create the appearance of button menu items, as shown below:
The example above includes expanding submenus that appear as the visitor hovers over the top-level menu items.
The Dynamic Menus module is easy to use because it generates menus without requiring any code or programming. The interface in the Admin Console enables you to edit menus by adding new items or deleting existing items.
To access the area of the Admin Console that generates Dynamic Menus, choose Website > Dynamic Menus.
The interface that appears enables you to make site-wide changes quickly in a centralized location. Click the option in the sidebar to Create a new Dynamic Menu.
You can use the wizard to update the Dynamic Menu details or add and edit menu items. You can also copy existing Dynamic Menus and then customize them. The interface also offers a quick way to add the menu to a web page or template.
The interface includes the option to use your own image files. Enable the Use Image? option and then click the boxes below each field to browse and select the images you want to use. (You should upload the image files using the File Manager, Dreamweaver or an FTP client prior to creating the menu if you want to enable this option).
When you are finished inserting the menus, click Save and Publish to upload the updated page and publish it to the live site immediately.
There are two types of Dynamic Menus you can create: Default and CSS. After choosing the option in the sidebar to Create a new Dynamic Menu, you'll be presented with the Dynamic Menu Details page. This page includes a Menu Type interface item that enables you to choose the type of menu to create. These types are described in detail below:
A Default Dynamic Menu generates HTML table code, using the table cells for positioning. You can use the options in the Admin Console to completely customize the appearance of the menu itself and the individual menu items.
To create a Default menu, se the Menu Type menu to choose Default from the list of options:
The second type of Dynamic Menu is called a CSS menu. It comes in two flavors: CSS and CSS (HTML Only).
To create a CSS menu, use the Menu Type menu to choose CSS from the list of options in the the Dynamic Menu Details page.
To create a CSS (HTML Only) menu, choose the CSS (HTML Only) option.
The two CSS menu type options are diffenciated by the code that is generated and the way they appear by default. Both create unordered lists, but the CSS option generates a title attribute for each line item, and looks like this:
<div id="cat_1118132_divs">
<ul id="nav_1118132">
<li title="item one" style="width: 120px; height: 20px;"><a href="/one.html">item one</a></li>
<li title="item two" style="width: 120px; height: 20px;"><a href="/two.html">item two</a></li>
<li title="item three" style="width: 120px; height: 20px;"><a href="/three.html">item three</a></li>
</ul>
</div>
The code shown above is displayed like this "button" example when viewed in a browser. This occurs because the system includes CSS rules to make the menu items appear in boxes:
The CSS(HTML only) code looks like this:
<div id="cat_1118133_divs">
<ul id="nav_1118133">
<li style="width: 120px; height: 20px;"><a href="/one.html">item one</a></li>
<li style="width: 120px; height: 20px;"><a href="/two.html">item two</a></li>
<li style="width: 120px; height: 20px;"><a href="/three.html">item three</a></li>
</ul>
</div>
The code shown above is displayed like this "list" example when viewed in a browser. The system has not included the CSS rules that create the button effect, so that you are free to add your own custom CSS styles:
When you choose either of the CSS menu types, the interface includes an option to Assign your own CSS styles to menu items. When this option is enabled, a set of fields are provided so that you can enter the class and ID names that you want to use. After creating the menu, you can link the page or template to a CSS stylesheet that includes rules named with the same selectors in order to update the appearance of the navigation menus:
To learn more about customizing the design of Dynamic Menus, see Adjusting the appearance of navigation created with the Dynamic Menu module. Also see Using CSS to style web pages and site content.
Copyright 2004 - 2011 Business Catalyst