Note: This is a very old post that appeared on this website a few years ago, several layouts and two CMS’s past! The examples in this article do not work, due to the huge amount of effort required in getting all the old (pre-Jquery) javascript to work again. I may update this article one day using modern technology/libraries.

It is amazing how quickly time (and technology) flies. It was not so long ago that web developers were blown away by CSS drop down menus that appeared in a flash whenever you hovered over a button in the header. Websites like A List Apart taught us how the hover property could be combined with list styling to evoke interesting effects. It wasn’t long before any website without drop down menus, or at least some hover-triggered effect, seemed boring and out-of-date.

We have learned a lot since then. In particular, the popularized “discovery” of AJAX showed us how the interaction of javascript, CSS and back-end scripting could forever change the way we look at a web page. Alongside this, the demand for even smoother effects is on the rise. Collapsable/expandable directory trees, smooth sliding tabs, and other features are becoming coveted by owners of website companies and individuals alike who want their website to be clearly on the “polished edge” of Internet technology.

Like so many “discoveries” in the world of technology these developments are not “new” so much as they have just recently registered on the public’s consciousness. The bottom line is people want them, and as developers, we need to know how to give them what they want.

One interesting effect that can be integrated into a navigational menu is the evolutionary descendent of the CSS drop down menu: the sliding navigational menu. The sliding navigational tab can take many forms, of course. But the challenge of creating “well behaved” as well as “complaint” smooth menu effects is a major issue for those who have just discovered AJAX or DHTML and want to integrate it into this design.

What are you talking about?

A picture is worth a thousand words, and a working example is worth even more. Hover over the tabs below to get an example of what is meant by “sliding navigational menus.”

In an attempt to help other developers who want to integrate smooth navigational features like sliding tabs into their website while remaining friendly to both user experience and search engines, I offer this two part series.

Part 1 explains the general considerations one should take into account when developing a sliding navigational scheme, and is intended to be somewhat understandable by those with little to no programming experience.

Part 2 is a step by step tutorial on the implementation of sliding tabs, as shown in the example above, and goes into some detail about the how to address the issues raised in Part 1 with particular coding techniques.

Part 1 - General considerations for sliding navigational menus. What a difference half a second makes!

Sliding tabs: what you want, and what you do not want.

What you do not want are confusing menus that open when you do not want them to, close when you want them to stay open, or once opened, stay open forever. You definitely do not want menus that get in your users way, or otherwise impede their search for your information, products or services. You do not want to bury important content in the menus that cannot be found by other means.

What you want are smooth, unobtrusive menus that function intuitively for the user, so that no explanation is necessary. You want them to be logically placed, and contain content that makes sense given the overall layout of your page. For users that do not have javascript enabled, you want to give your users an alternately and equally intuitive method for finding the information. You want all relevant links in the menus to be readable by the search engines, and all irrelevant links to be dynamically loaded upon the user’s request.1 (1-see Hide and Seek: the dilemma of dynamic content…”)

What you want are menus that look right, feel right, and like any navigational element, should help your user find your information more quickly than they could if it were not there.

Anatomy of a “slide”

Suppose, as in the example above, you have 3 different navigational links lined up next to one another.

There are essentially four events that can take place in your menu:

• User hovers over tab
• User moves away from tab
• User hovers over menu
• User moves away from menu

The user of course can move the mouse cursor very quickly across the screen, meaning you have to account for many different intersections of these events. What if, for example, the user hovers over all of the tabs very quickly? Will they all open and stay open? Will they all open and close one at a time? You must really think about what will make the most sense from the users perspective.

Here are two examples of the way a sliding menu might behave. One is “bad behavior,” and one is “good behavior.” Can you tell which is which?

Example 1.

Example 2.

It is impossible to cover all of the possible combinations of “events” and “states,” so let us take a few examples.

User hovers over the tab.

This seems straightforward at first glance. After all, if a user hovers over the tab, you just open it, right?

Not necessarily. First, how can you be sure the user really wants to open the tab? Perhaps the user was just moving the mouse to the top of the screen so they could, for example, view their shopping cart? If you immediately open a menu when the tab is hovered over, especially if the tab is at the top of the screen, you could annoy the user at best, and obstruct the user at worst.

A good solution to this problem is to insert a half-second delay before taking any action. It seems like very little, but it makes a huge difference. Delaying the action by half a second puts things in a more human time-frame, and “intentionality” is established before anything happens. If the user simply scans over the tabs quickly, none of them open.

Once the delay has transpired, you must determine if a menu is already open. If a different menu other then the one they have “intentionally” hovered over is open, the other must first be closed before this one can be opened. If it is the same menu, nothing need be done.

If no menu is open, of course, then the appropriate menu will be opened at that time.

User moves away from the tab.

The same delay should be applied when the user moves away from the tab as well, for at least two reasons. One, the user may accidentally move the cursor slightly away from the tab for a brief instant, but does not intend to close it. Two, the user may decide to move the cursor into the menu portion. If the menu closes the instant the user leaves the tab, they will not have the option to select anything on the menu.

In other words, you start a timer when the user leaves the tab. If no other events are triggered after this point, the tab simply closes. (Or if it is closed, nothing happens at all.) If, however, the user moves into the menu area, another function stops the timer that started when the user left the tab area.

User hovers over menu.

This event is simple. If the user hovers over the menu, it is clearly open and if you have done all of your programming correctly, you know no other menu is open either. All you must do in this case is stop the timer that started when the user left the tab. They have moved into the menu area, so clearly they want it open.

User hovers away from menu.

This is the same series of actions that take place when a user moves away from a tab. Did they really mean to leave the tab? A half-second delay should determine that. If the user moves back into the menu area (or the tab area) all timers are stopped and the tab stays open.

Timers are on our side.

Clearly, half second time delays can dramatically enhance the “usability” of smooth, dynamic navigational structures such as sliding menus. Half second delays both establish intentionality, and allow room for error. The motion of your elements becomes much more organic and sensitive to the user experience by allowing a half second “are you sure?” delay before changing the state of any element on the page. The user, of course, will not be conscious of this delay. If it were not there, however, something simply would not “feel” right, nor would the menus operate in a way that made sense to the user.