Core Elements 2 web engines offer two styles of site navigation menu, Traditional and Drop-down. In both cases, navigation appears in a horizontal format and as a part of the page header, together with the masthead.

Traditional navigation can be setup and deployed entirely from within Lightroom, using the provided controls. When using Drop-down navigation, however, only the top-level navigation items may be setup from with Lightroom. To activate the drop-down menus, PHPlugins must be enabled and users will need to add their drop-down navigation items by coding them into the phplugins.php file. Needless to say, the drop-down menus are intended for advanced users who don't mind getting their hands dirty with a little bit of code. Nonetheless, even with top-level items only, the Drop-down navigation style allows users to deploy some nice-looking menus with design options unavailable in the Traditional style.

The Navigation Styling and Hyperlink controls appear in the Site Info control pane. The styling controls for the Traditional and Drop-down styles overlap; if Menu Type is set to Traditional, then those controls will show, while setting Menu Type to Drop-down will cause the drop-down controls to show in the same space. The Navigation Hyperlink controls appear beneath the styling controls. In the image below, however, we have laid all controls out side-by-side:

Navigation controls

The first thing you may notice is that the controls for the Traditional and Drop-down styles are extremely similar, with only a handful of differences. In fact, the controls are reciprocal. If you style your menu using Traditional, then switch to the Drop-down style, you will find that your menu inherits all of the styling you've already done. This makes it extremely simple to move back-and-forth between the two styles to try them out while designing your page.

Styling options offer complete typographic control over the size and appearance of your navigation links, the size and shape of your navigation box, as well as advanced styling options for borders, drop-shadows and gradient background colors.

For both styles, the Navigation: Hyperlinks controls are applied in the same way. More on this below.

Traditional Navigation

Traditional Navigation

Users familiar with previous versions of TTG web engines will feel right at home with the Traditional style navigation. The traditional navigation is very flexible and allows for many design possibilities. The menu may be aligned to the left, right or center of the navigation box. Optionally, the identity plate may be inserted into the navigation area by accessing the Masthead controls, and setting Masthead Type as Traditional, and Masthead Location as either Nav Container or Nav Content.

Drop-down Navigation

Drop-down Navigation

To access Drop-down navigation, set Menu Type to “Drop-down”. Most of the settings from Traditional navigation will be inherited, allowing you to jump right in with any styling customizations you may already have made. Drop-down navigation may only be aligned to the left or right of the navigation box, and may not be centered.

As mentioned above, the top-level navigation may be setup from with Lightroom. Drop menus, however, must be added outside of Lightroom via PHPlugins. See the PHPlugins documentation for more information on how to do this.

When using Drop-down navigation, note that only the top-level navigation items will appear in the Footer navigation menu. If this is unacceptable or if adding custom navigation links to the menu causes formatting inconsistencies in the footer, it may be prudent to disable navigation in the footer.

Navigation: Hyperlinks

The CE2 navigation menu offers native support for up to 10 menu items, and provides various means of adding additional menu items (see below). Each menu item consists of two pieces, the Label and the Target, pictured below.

Navigation Hyperlink Setup

The Label is the text that will appear in the menu, while the Target is the hyperlink leading to the destination page.

By default, the first six menu items in all CE2 engines are setup to target pages created by TTG Pages CE2. This makes it easy for new users to setup sites using TTG Pages CE2 and a web gallery, without having to fuss with navigation. You may reorder, replace or delete these menu items as necessary.

Hyperlink Labels

Any text may be used for a hyperlink Label. Whatever you choose to label your links will appear as a link in your navigation menu. For example, you might label your gallery index page as Gallery Index, Galleries, Image Galleries, Photos, Photography or Portfolio. Regardless of the name, the link would still target the same page.

Hyperlink Targets

While Labels are very freeform, Targets need be specific. There are several ways to designate a target in CE2 web engines, though it always helps to have an understanding of how hyperlinks are written. For more information, please read the article Working with URLs.

When linking your menu items back to pages made with TTG Pages CE2, some web engines allow you to select targets from a drop-list:

Navigation Targets Drop-list

The options available here will vary depending upon which web engine you are using. See the documentation specific for your web engine for more information.

Links may also be written to external locations and email addresses. Targets to external pages should begin with http://, while targets to email addresses should begin with mailto:. Examples:

Custom Navigation

In CE2 engines, custom navigation items may be adding in either of two ways. The first is to write your navigation using PHPlugins. See the PHPlugins documentation for more information on this process.

The second option is to write your navigation items into the Custom Nav input within Lightroom. This field is located in the Site Info control pane, at the bottom of the Navigation: Hyperlinks control group.

Custom Nav input

Users my write additional hyperlinks into their menu using HTML.

For Traditional navigation, custom navigation links should be written as:

<a href="#">Label</a>

For Drop-down navigation, custom navigation links should be written as list-items:

<li><a href="#">Label</a></li>

Multiple hyperlinks may be written in sequence to add as many addition items as needed, for example:

<a href="#1">Label 1</a><a href="#2">Label 2</a><a href="#3">Label 3</a>

Of course, you will want to replace # with an actual target.