{ Screenshot }

CSS Stack Menus

2010 Feb 20
  1. CSSPlay
  2. Playground

There are many types of navigations in web design. Many of these navigation designs are based on borrowed ideas from operating system interfaces. With Webkit having taken a strong led on new CSS features for UI richness (with Mozilla and Opera quickly following), these new CSS features now allow the creation of CSS Stack Menus that are inspired on Mac OS X Stacks.

Drop-down menus

Drop-down menus have been well established with desktop GUIs for two decades. As soon as the technical ability was available, they became established in web design. They were first (and still often are) created using Javascript. A big moment among web design geeks was the pure CSS drop-down menus. But, Javascript offered something that CSS could not do alone, Javascript can animate the menus. No more.

Mac OS X Stacks

Since CSS Stack Menus is inspired on Stacks, let us quickly review Stacks. In Mac OS X 10.5, Apple introduced Stacks a new UI for quick access to a few files from the Dock. It solves the following:

  1. Access to recent files (such as recently downloaded files)
  2. Shows both a thumbnail and name of the item
  3. It does not open another application (Finder) giving the user quick access

Of course, it has to add visual goodness which is a fundamental goal/feature/selling point of Mac OS X. Stacks has the items animate from the folder into a vertical line that curves to the right.

CSS Stack Menus

Now with new CSS features in Webkit (and soon to be Gecko 1.9.3, maybe Firefox 3.7), Stacks can be achieved with just CSS – no Javascript needed.

There are two key new CSS features that allow this and one currently under-used feature:

  1. transform: this allows for rotating the stack items to create the curve effect
  2. transition: this allows for the stack items to animate from open to close
  3. nth-child: this allows to target each stack item to create the curve

The same core principle for pure CSS drop-down menus still applies; the :hover selector is used to show the menu. But it differs by how the items are positioned, the stack items are placed along a large imaginary circle. In this example, the circle is 1200px wide with the left edge of the circle going though the trigger. This is done with transform and transform-axis.

Diagram of position

To give CSS stack menus more UI richness, the stack items animate open and close by using transition. It is simple, just declare what CSS properties to animate when they change value. Webkit takes care of the animating the stack items from the closed position to the open position.

View the demo in the latest version of Safari and then dive into the source code for more details.