/CSS/ Scalable graphical navigation
03/09/2008 | Filed under Develop > CSS
Craig Grannell shows you how to bring a little visual flair back to your navigation bars, and ensure that everything remains flexible when text is enlarged
One of the criticisms often levelled at CSS-based layouts is that they all look the same. There is a tendency to work with fairly rigid elements, simply because CSS lends itself nicely to working with boxes. However, the other extreme is also problematic: if you want to work with highly graphical containers, especially for something like navigation, there’s a risk of restricting yourself by applying set dimensions to various page elements, thereby making it so that content can’t expand.
In this tutorial we’ll explore a graphical navigation bar that’s akin to the one on Apple.com, but that’s not constructed using fixed images. Instead, it utilises a HTML list (with HTML text for the list item content, meaning the text can be zoomed), plus CSS for styles, including background images.
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 cover version Hurt, Johnny Cash
Click here to download the support files
Click here to download tutorial PDF
Comments
bozboz / 07/09/2008 / 14:34 / http://www.bozboz.co.uk
Thanks this is a great tutorial , very clear. Ive been using lists for nav for a while, but was previously using display:block rather than display:table.
krdr / 08/09/2008 / 22:49
Is it SO necessary to put navigation UL so deep in markup? And wrapping UL is semantic nightmare.
webspy.jp / 19/09/2008 / 07:17 / http://webspy.jp/
Now we have Google Chrome beta. It started "nightmare" already for many sites. I even fixed CSS structure already. Mostly small fix though. Anyway, Thanks for great tips.
