In this blog post Nathaniel Woodland explains how to get the most out of Percussion CMS Navigation widget.

Thoughts from Customer Success: Get the Most out of Percussion CMS Navigation Widget

Mon Sep 9, 2013

A common implementation of navigation in Percussion CMS includes a horizontal navigation bar that spans the header area of the page, as well as a vertical navigation menu in the page’s left column.

In many cases, this top navigation component in the header is a hover-over dropdown menu, which can be setup by configuring the widget to use the “Horizontal rollover” layout. Doing so links the widget up with the embedded Superfish jQuery plugin. This way, you can simply set the widget to display all sections, and Superfish will manage all of the hover-over effects.

The left column navigation can be a little trickier. Most often, customers want this to display only the current section’s sub menus, with or without the relevant parent elements, as static links. One method to achieve this is to create duplicate templates for each unique navigation level, and configure the Navigation widget on each template to display the appropriate content for that level.

Of course, this approach can be clunky and difficult to maintain. Furthermore, it can be confusing to your end users who simply want to get in and author their content, without sifting through multiple seemingly identical templates in order to find the right one.

How to Fix This

A better method is to take advantage of the "current" class that dynamically gets applied to active navigation elements, using CSS to hide and display only the navigation pieces relative to the site visitor's current location.

One example of this would be to set the widget to use the basic "Vertical" layout, and to display levels 2 through 8 (or go as high as you need). At this point, the Navigation widget will output your site's full tree. Now you need to use CSS to carve this down to the desired output. First, let’s give the widget a unique class through the Style tab so that we don’t interfere with any other content, such as "leftNav". Using this class, we’re going to hide all navigation levels but level 2 (which is the level immediately below your homepage), like so:

.leftNav li {

   display: none;

}

.leftNav li.nav-level-2 {

   display: block;

}

Now we use the "current" class to display all navigation sections leading up to the currently accessed section (again, these classes are added dynamically):

.leftNav li.current {

   display: block;

}

At this point we have essentially an over-sized breadcrumb displaying links up to the current section. The key final ingredient is to display all subsections of the immediate accessed section:

.leftNav .current > ul > li {

   display: block;

}

And there you go! Now we have a navigation widget that:

  • Displays all of the main sections off of the site's root.
  • Displays the primary sections leading up to the site visitor’s current section.
  • Displays all subsections of the site visitor’s current section.

Once you understand the basic components at play here, it should become clear that there are many ways to implement robust CSS rules that can manage what the Navigation widget to outputs, with no maintenance or end user training headaches.