Step-wise process menu

Status: Experimental at best.

I read a great post from Cody Lindley today called CSS Step Menu.

I can relate to Cody’s story of developing web applications that require step-by-step processes. The process menus I generally develop are very simple affairs, based in semantic markup and lightly styled.

I was very impressed with Cody’s menu style, but disappointed when I discovered that upon enlarging the text the element enclosing the text did not enlarge, and thus the text quickly disappears below the clipping area of the enclosing element.

This prompted me to attempt an implementation myself. And truth be told, my attempt is not perfect. To summarise my failings:

  • Complex (and arguably redundant) markup required
  • Complex CSS required
  • 8 background images required
  • Upon enlarging the text, some of the background images look out of place, but the enclosing element does enlarge and the text is still readable.

The colour-scheme and design was stolen from Cody, but the markup and CSS are orginals, so feel free to use the code for what its worth.

Posted in

Leave a reply