/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.

kaloua3 / 26/02/2009 / 17:24

So now how do you make drop-down lists from these links?

Kp / 22/04/2009 / 01:02 / http://www.backcountrygeneration.com/

Very clean, looks great. Thanks, Craig.

dooh / 02/07/2009 / 04:22

a demo site would be just awesome.
thx

Eugene Donaghy / 20/09/2009 / 21:24 / http://www.eugenemdonaghy.me.uk

How can I amend this so that sub menus appear every time when I click on the items above

Eugene

Add a comment

Your name:


Your email: (Not displayed)


Your website: (optional)


Enter your comment here: