Lists, lists and more lists

Lists are great. When archaeologists unearthed 5000-year-old examples of the earliest known written language in Sumer, they found lists. Short lists are especially useful because they

  • break information or tasks down into easy-to-digest units,
  • allow the reader to efficiently skim the content, and
  • help keep things organized and consistent.

Unfortunately, long lists can become incredibly cumbersome to deal with, especially for web designers. A long list can severely disrupt the flow of a web page and breaking the list into columns has often been a cumbersome, manual process or a resource-intensive server-side task. The addition of columns in CSS3 changes all that, and this little demo will show you how quickly implement simple, easy to use lists using the new CSS3 specification.

The HTML5

For the sake of this demo, let’s imagine that we have a long list that is in alphabetical order. You can certainly adapt the code to fit other types of lists as needed.

Alphabetical list of HTML tags

  • ADDRESS – Address information
  • APPLET – Java applet
  • AREA – Hotzone in imagemap
  • A – Anchor
  • TH – Header cell
  • TITLE – Document title
  • UL – Unordered list

We want to view this list in two short columns with a simple index to allow us to quickly scroll through the items Ad-Hr and Ht-Va. Here is our HTML source (obviously this technique would lend itself more to a much longer list than this):

  • ADDRESS
  • A
  • Java APPLET
  • Imagemap AREA
  • TH
  • TITLE
  • UL

While not strictly necessary, you will notice that I have taken advantage of HTML5 custom data- attributes to provide a sort key distinct from the item text and have also provided some additional descriptive information in the title attribute. Other than that this is a very simple, straightforward list surrounded contained in a div. Included below the list is a placeholder for the list index we will generate.

The CSS3

The CSS is where the magic starts to happen. The CSS properties used here are new and are only supported on the latest browsers. You should not use this technique as-is for a public site that needs to support many different devices and browsers. Tools such as the Columnizer jQuery plugin might be an option for expanding support to more browsers and, as always, the layout should degrade gracefully to a still-usable format when necessary. That being said, this tutorial is about the new additions to CSS3 and will use them extensively. The stylesheet required is as follows:

The Javsascript (using jQuery)

Javascript is used to automatically detect the left edge and the first and last item in each column. Using these values an interactive index is generated which slides the columns back and forth the reveal the requested section.

That’s it!

Want to see what an automatically-generated, interactive, indexed, and columnized list looks like? View a simple demo in a modern browser (such as the latest version of Google Chrome). Note that the code printed above could be streamlined and hard-coded values could be moved out to parameters. For the sake of this demo I left everything ‘long-hand’ but you are free to clean up and change the code however you see fit for your projects!

Like this post? Share it!