Ways to implement grouped navigation tabs

Currently in ubiquo, when we have so many tabs to display all them in a single row, the approach to follow is to group them under a new group name, and then, use that name as a link to have a sub-menu with links to each single resource display. This approach is hard to maintain, because each time we add / remove / change any of that resources, we must update several files (one for each resource that appear in list).

Another approach has been taken in one of out projects. By now, is a custom change for that single project, but it can be leveraged to a template system easily.

The approach is similar to the previous one, except that we only maintain one single file (_main_navtabs) for all ubiquo navigation. The navigation now will have only two parts for each menu item:
– The first one will be the title, and it’s use can be either as an informative resource and a link to one of those resources grouped under that name
– The second, will be a list (<ul> / <li>). Each row in the list will be a link to a resource.

The clever idea in this approach is the interaction between both parts of menu items:

Items list will be a hidden element in DOM, that only appear when mouse is over group name. In this way, those lists can co-exist without being displayed together at any time. The effect applied to show each list is a SlideDown effect from scripaculous.