Skip to Site Navigation | Skip to Content

Blog

Expanding-style section menus with the new showLevels attribute

We recently announced the release of some new attributes and features on our menu tokens, which are used to create templates on our Water, Sky, and Light content management systems. These new features allow designers to accomplish things with our menu tokens that weren't previously possible. This article will explain one exciting new capability -- expanding-style section menus.

Tip: for full documentation on our token system, see the token reference guide on our account support website.

The Challenge

The sectionmenu token used to be the only way to generate a section-specific menu on our system. But the sectionmenu is not an "expanding" menu. Rather than expanding to show nested menu levels deeper and deeper into the site, the section menu always stays focused on the user's current level. Therefore, as a user navigates deeper into the site, the higher levels are lost and replaced with new, lower menu levels.

The globalmenu token could meet the needs of those who were after an expanding-style menu. However, it always displayed the full hierarchy of the site all the way up to the root level. Often, designers expressed a desire to have an expanding section menu -- one that would only display pages within a specific section of the site -- but that would retain the full hierarchy of that section, in an expanding style.

The Solution: showLevels

Expanding-style-section-menu-lovers fear no more! With the introduction of the showLevels attribute on the globalmenu token, you can now utilize the expanding-style global menu on a specific section of your site.

For a visual illustration, please take a look at the images below. These images show a sectionmenu token and a globalmenu token displayed on the same page of the same site, one right above the other. The menu items are named according to their levels for easy reference.

Image #1
Menus when user is on a Level 1 page

Image #2
Menus when user is on a Level 2 page


The tokens used to generate the above menus are as follows:
Section Menu: <$sectionmenu cssClass='nav'/$>
Global Menu: <$globalmenu showLevels="2,3" showHome="false" cssClass="nav"/$>

Image #1 shows that when you are on a level 1 page, both menus output exactly the same results. However, image #2 shows the difference. When the user navigates to a level 2 page that has child pages, the section menu "skips" down and displays level 3, causing level 2 to disappear. The globalmenu, on the other hand, generates level 3 in a nested list while continuing to display level 2. It is this expanding-style that is now possible at the section level through the use of showLevels on the globalmenu token.

This is just one example of how the new showLevels attribute can be used on your site. There are many other possible implementations, and we may cover additional ideas in future posts. We hope you enjoy the new attributes. Please let us know if you have any comments on or questions about the new functionality.

Posted on Mon, March 17, 2008 by Tim Wall

2 comments (Add your own)

1. Jessica Parsons wrote:
Perhaps I should just email tech support, or post in the forums, especially since this is old, but since it's on topic, I thought I'd ask here. I'm developing a site for a church and school that will share a domain name, but have two separate (but connected) sites. After an initial chooser home page, users will either be in the school section or the parish section. I've designed my site hierarchy with Home at the root level, Parish and School at level 2, and the main sections of each site inside these folders, at level 3. Further subdivisions follow those. Now, my client insists on having dropdown menus, as they epitomize the modern website for him. This is fine by me, and I've designed a tabbed, suckerfish-style dropdown menu, and used the global menu to showLevels 2,3,4,5. However, because the main navigation is not at the root level, things get screwy. In order to have dropdown levels to show on hover, I need to set alwaysShowChildren to true, but if I do that, the level 2 items from the parish section show up in the school, and vice versa. Further, the selectedPageParent and selectedPageRoot classes won't allow me to assign special CSS (for the tab effect) to the "selectedPageGrandparent" so to speak, of a level 2 "root" for a level 4 page. Unfortunately, I think I may need to re-think my navigation strategy to meet Light's capabilities, but I wanted to double-check first. Thanks!

Mon, May 19, 2008 @ 1:32 PM

2. Tim Wall wrote:
Jessica, it seems to me that what you want to do is "showLevels=3,4,5". Since the "home" pages for your two sections actually exist at level 2, you don't want to show them in your drop menu array, just like you wouldn't want to show "home" in your drop down array in a traditional navigation. I would imagine a site where you choose between church and school and once you are in the section you want to navigate, you would then be presented with a drop down menu consisting of the level 3 items and flyouts that display the levels below that. It is the "root" menu items that generally serve as the roots of a flyout, not the home page itself. And since you have two homepages at level 2, you should show level 2 in your flyout array. I hope this helps. Unfortunately, I can't think of a solution for the "selected Page grandparent" CSS class. That is what selectedPageRoot is supposed to do, but since you are moving the root down a level, it won't work like that. You are right, this would be a good post to the forum. If you want to go ahead and post it over there, that would be great and maybe you'll get some more insight from others.

Mon, May 19, 2008 @ 1:53 PM

Add a New Comment

Enter the code you see below:
code
 

Comment Guidelines: No HTML is allowed. Off-topic or inappropriate comments will be edited or deleted. Thanks.