/CSS/ Sort out your drawers
24/03/2008 | Filed under Develop > CSS
Craig Grannell provides you with a quick, easy and modular solution for creating website drawers, using a lean little script that’s just hundreds of bytes in size
Sometimes, there’s not enough room onscreen for all the information you want to provide, or your web page contains supplementary information that you don’t want to display because it distracts users from the main content. In cases like these, drawers have become a popular way of adding to your page’s effective real estate, enabling you to hide content behind a clickable component, only displaying the content when users request it.
Various methods exist for creating drawers, including solutions built into popular applications, components of libraries such as Scriptaculous, and freely available JavaScript solutions on the web. The problem with application solutions and libraries is that the code can be weighty. If you just want some drawers, there’s no point in forcing users to download large library files. As for web solutions, most of them work on the basis of single targets. In other words, the trigger toggles the display property of an element with a specific id. That’s fine if you only want a single drawer, but when you have plenty, a system like this can be tedious to work with.
In this tutorial, you’ll find out how to use an efficient piece of JavaScript to create drawers in a modular fashion. As long as you use the same basic structure for each drawer, the set-up remains identical throughout, saving you having to faff about with id values!
About the author:
Name: Craig Grannell
Site: www.snubcommunications.com
Areas of expertise: Information architecture, site concepts, graphics, interface and front-end design
Clients: Swim~, Rebellion, IDG
Favourite holiday food: Decent, authentic Mexican
Click here to download the support files
Click here to download tutorial PDF
