User Tools

Site Tools


ce4_navigation

The Navigation

Site navigation is comprised of three full control groups, jam packed with options. Navigation may be the single most complicated aspect of the CE4 series, but it's also super important. The three control groups are:

  • the Navigation Container section, in which the navigation type is set, and the navigation bar is sized and configured.
  • the Navigation Items section, in which the appearance of the navigation links (menu items) is configured.
  • the Navigation Hyperlinks section, in which we connect our menu item links to their target pages.

Why so much stuff? Well … Navigation is integral to any website. If a visitor cannot easily or clearly navigate from one page of a site to another, then you have failed. In CE4, we have aimed to make site navigation easier to manage than ever, while also giving users the flexibility to do as they like with it (within reason), because we have heard you – all of you – and you all seem to have very different, sometimes conflicting notions of how your navigation should work.

Regardless of your personal preferences, the first step is to ensure that you have properly set your Site Root:

This needs to be an absolute URL for the base location of your site. In most cases, this will be your domain. You may use either a full or truncated address. For example, let's say I am planning my own photography site at http://campagnapictures.com. Either of the following is an acceptable site root:

http://campagnapictures.com/
/

The former is my full address, the latter my truncated address.

For more information, see Page Setup: Website.


the Navigation Container

The Navigation Container control group allows you to configure the box, or bar, in which your site navigation resides. Many of the options appearing here are the same as for any other box element in CE4, including margins, padding, border, etc.

Here, the navigation container is shown as a horizontal black bar, without distracting menu items (we'll get to those later):

Apart from setting up a space for navigation, the controls here also allow you to select your navigation type: single-level, multi-level (drop-down) or column:

Take note, while CE4 supports multi-level/drop-down navigation menus, implementing them requires the use of PHPlugins.

The Orphan checkbox jettisons navigation from the page container, allowing it to easily go full-width at the top of the page.

Next, there are three background-color sliders:

The first sets the bar's background-color in the desktop layout (the black bar in the image above).

The second color picker allows you to set a different color for the bar when in the collapsed mobile view (below, pink), and the third allows you to set a background color for the navigation container when open on mobile (below, yellow).

Meanwhile, the Mobile Breakpoint slider defines the screen width at which the navigation collapsed into its mobile layout. The default value of 784 will catch iPads in portrait orientation; set a lower number (ex. 720) if you would prefer that your navigation not collapse on iPads.

The Spurs controls add a touch of visual flourish to your navigation bar:


the Navigation Items

The Navigation Items control group allows you to style the appearance and behavior of the site navigation links, the actually buttons to be clicked.

In the capture below, the words “Home”, “Galleries”, “Blog” and “Services” are items affected by options in this control group.

In the mobile layout, you may set separate colors for the navigation items and expansion triggers:

"Click for drop-down menus (multi-level only)"

This checkbox causes drop-down menus to activate on click, rather than on hover. This is automatically the case on touch-screen devices such as iPads. You may enable this behavior full-time by enabling this checkbox, either because you prefer your site to operate in this way, or because you want to preview the touch-screen behavior within Lightroom.


Each hyperlink is comprised of a Label and Target. The Label is how the link will appear in your navigation menu, while the Target is the address to which that link will lead.

When setting navigation links to pages created by TTG CE4 Pages, use the Target pull-down to select the target page:

Otherwise, you may write-in either absolute or relative URLs to other pages or sites:


Single-level vs. Multi-level Navigation

CE4 offers the choice between single-level navigation and multi-level navigation.

Single-level navigation is the easiest to implement and the default setting for all TTG galleries. Navigation may be aligned left, right or center, and the appearance of your navigation fully customized using the provided options.

Multi-level navigation – a.k.a drop-down menus – is supported by CE4 plugins, but setup may require extra steps. Multi-level navigation may be aligned left or right, but cannot be aligned to center. When setting up multi-level navigation, keep these points in mind:

  • Only the top-level navigation may be configured within Lightroom.
  • By setting up the top-level navigation within Lightroom, the multi-level navigation can be used as an alternative style of single-level navigation. This can look very good in some designs.
  • If you wish to implement child menus – i.e. drop-down menus – then you will need to hand-code these child menus and implement them via PHPlugins. We provide example code to get you started, so implementation should be fairly easy to accomplish; it just requires the extra steps of enabling PHPlugins and working with the menu code.

Mult-level navigation should never be essential to your CE4 website, though it may be nice to have. The way that TTG sites are designed and organized, your site should always be fully navigable from a single-level navigation system, using the Galleries page to access all of your image galleries.

See the PHPlugins section of this wiki for more detailed information on how to get setup with a multi-level navigation menu.


Managing Your Site Navigation Online

Regardless your choice of navigation style – whether single-level, multi-level or column – you may find it advantageous to setup navigation using PHPlugins.

When relying upon the Navigation Hyperlinks control group only, you can easily setup functional navigation from within Lightroom. However, if you later decide to change your navigation, to add, change or remove items, then it can be a real hassle: you will need to edit all of your templates in Lightroom, re-export everything, re-upload everything, etc.

Using PHPlugins, though, you can manage your site’s navigation from a single, centralized source, and when you update that source – to add a new navigation link, for example – then that change can be effected site-wide, and will instantly appear on every page.

So while PHPlugins requires some extra effort to setup, the payoff later on can be significant. We highly recommend that you setup PHPlugins, even if you don’t decide to use them immediately. If you ever want to implement changes to your navigation, you will be glad to have these features available for use.

When running our WordPress theme, you can even leverage PHPlugins to manage your site's navigation from within the WordPress dashboard, and that's just awesome.

See the PHPlugins section of this wiki for more detailed information about setup and the possibilities it unlocks.

ce4_navigation.txt · Last modified: 2014/01/10 04:33 by matthew

The Turning Gate
Creating webbly, wobbly, Lightroomy things since 2007.