Dynamic Navigation

This module is used to design a DHTML menu that displays items from the Site Architecture > Navigation module.  It generates a CpScript that can be placed in any module and attribute that supports scripting. Be sure to use your mouse to hover over the names of the attributes because many of the more confusing attributes are described using tool tips.  If you would like a dynamic navigation to behave responsively you must set Rendering Mode to List, especially when Orientation is set to Horizontal. The Orientation attribute also supports a Vertical On Mobile Only option for responsive designs, but this feature only works when the server recognizes the browser as a mobile device. Tablets and some newer mobile phones may not be recognized as a mobile device without manual changes to the site or server's browser definition files.

The generated menu control only supports a single selected item, therefore the Last Level Selected attribute was added to allow you to determine which level appears to be selected when any of the descendants of an item in that level are selected.  We have also included a Custom Styles attribute to add CSS Classes and reference them from any of the CSS Class attributes in the different tabs in this module.  These CSS classes will be added to the page so the names must be globally unique.  You can also use the Nav Groups attribute in this module to display only the records in the Site Architecture > Navigation module with overlapping Nav Groups selections.

The Static tab allows you to design the static portion of the menu.  There is always at least one static level, but you can display more than one level as static using the Static Display Levels attribute.  All static levels have the static styles applied, but the styles in the Level tabs may be used to override the static styles at any level.

The Dynamic tab allows you to design the dynamic portion of the menu.  The dynamic levels begin after the last static level and the Dynamic Display Levels attribute allows you to control the maximum number of dynamic levels.  You can use this attributes to suppress some levels of navigation.  All dynamic levels have the dynamic styles applied, but the styles in the Level tabs may be used to override the dynamic styles at any level.

The Level # tabs allow you to apply styles to a specific level regardless of whether it is static or dynamic.  The styles under these tabs will not be applied unless you select 'Yes' in the Override Level # attribute.  By selecting 'Yes' you are stating that you understand that the static or dynamic styles for that level will be overriden by the styles in the Level # tab.