About this site's lack of design: Yes, it's supposed to look this way — I'm using a sandbox theme for WordPress (see it on GitHub).

Dan Rubin's SuperfluousBanter

Design, random musings, and the Web. Since 1977

|

The Art of Navigation

When building a website there’s an inevitable moment when it is required you think hard about navigational elements. I’m not talking about information architecture here. Information architecture usually helps answering the question: “How will this function?” (among others). Nope. I’m trying to answer the question “How will this look?” – purely from a graphic design perspective.

The above mentioned stage of the design process is one that I spend a considerable amount of time on and particularly enjoy within any project. In this post I want to share my latest experiment on navigation design.

CSS based navigation!In my quest for elegant, clever and nice navigation design I decided to let go of certain requirements. In this case I decided to ignore a few usability (and accessibility) best practices (note: this should of course be avoided in real life implementation).

However, I’ve set myself a few constraints which make perfect sense, even in an experiment. This design should of course be constructed using the sounder XHTML and CSS combination, as opposed to tables. Furthermore, once CSS is disabled, a nice unordered list should remain. Other than that the sky is the limit.

The main purpose of this design experiment is to see how far we can push CSS. Is it possible to create the most complex navigation (in terms of graphic design) and have it marked-up as an unordered list? The answer of course is “Yes!”. And there are a few designers who elegantly proved this point in the past.

As said and proved by many before – CSS can handle your wildest dreams. Unfortunately we are currently only limited by the pace of web standards implementation in modern browsers (specifically one browser, no names of course). This small experiment should work in most modern browsers, but your mileage may vary. Comments are more than welcome, but keep in mind that this is only a trial in design, not in practical implementation as such.

This item was posted by Dan Rubin on Thursday, December 18th, 2003.

Categories:

You can follow comments on this item via the RSS 2.0 feed.

Comments are closed.

24 comments on “The Art of Navigation”

  1. Posted by eric on Thursday, December 18th, 2003.

    That’s remarkably good looking. Could you achieve a similar effect – using text, rather than images – with background patterns and the mozilla rounded-borders css call? Shadows probably wouldn’t work, but in terms of how the nav looks they’re just icing on the cake.

  2. Posted by timfm on Thursday, December 18th, 2003.

    Drew — It’s lovely. Any ideas on how to get the :hover to work in IE5.0 win? if you click (i.e, :active) you get the blue image but not on roll over as it were.

    -t

  3. Posted by Zelnox on Thursday, December 18th, 2003.

    Amazing, I love the perspective effect combined with drop shadows. ^_^

  4. Posted by Mike on Friday, December 19th, 2003.

    Whoa.

    Now that’s slick, unbelievable job.

  5. Posted by Jon Hicks on Friday, December 19th, 2003.

    That just looks lickable! I particularly like the very subtle gradient on the hover button.

    Its also a boon that so little markup in both the CSS and the XHTML is needed.

  6. Posted by Aleksandar Vacic on Friday, December 19th, 2003.

    Looks very nice, and you can expect a lot of the copywrongs on this one. :)

    It suffers from one annoying problem in Safari 1.1. You have position:relative on the UL. If you hover one of the tabs and move the mouse _down_ tab stays in the “up” state.

    If you move it to the right of the last tab, all is well, i.e. if you move the mouse _inside_ of the UL. As soon as you remove the position property, all works well.

    This is very annoying, especially on multilevel menus, like the one (ADxMenu) I have at my web site. I hope that 1.2 will fix this problem.

    I chose to neglect the problem for now, waiting for browser fix.

  7. Posted by Quasi on Saturday, December 20th, 2003.

    It looks great and is very slim code. Nice work!

  8. Posted by David Barrett on Saturday, December 20th, 2003.

    Would the javascript from the Suckerfish Dropdowns work for getting the hover to “work” in IE?

  9. Posted by Didier Hilhorst on Saturday, December 20th, 2003.

    Eric: we are currently limited by adherance to web standards of the most common browser. But in theory you are right, using more advanced CSS trickery it will be possible to avoid using images to obtain particular effects.

    David: I assume you refer to the possibility of having a dropdown list appear below each tab (or nested lists). I haven’t looked at the discussed technique in detail (ALA) so I can’t answer that question at the moment. However swiftly looking at the code my guess is that it could work. It would be an interesting experiment…

  10. Posted by David House on Sunday, December 21st, 2003.

    Beautiful. I like how the hover state pops up, never seen that before!

    If you don’t mind, I’d like to have a shot at replicating that with text and as few images as possible. I’ll keep you informed if that’s okay:)

  11. Posted by Scott Freshour on Monday, December 22nd, 2003.

    Unbelievable…Very very nice! I have been using css since 1999 and only now am brave enough to try to extend its simple power and promise to commercial web sites. I wish to change my little world of connections with code as elegant as this. It renders great in IE6 and MOZ. Exquisite! THIS is the future and we need to carry the torch. I am humbled somewhat by the vastness of what is yet to learn but I am willing. Good work. Know that I am a designer inspired.

    Thanks

    Scott’phresh’ Freshour

  12. Posted by Jeff Croft on Monday, December 22nd, 2003.

    This is too beautiful, Dan. GREAT work. The only other technology that could touch this from a design perspective is Flash (and it has it’s own problems).

    This may be one of the first examples I’ve seen of something that trucly couldn’t have been done with tables, but can be with CSS. Specifically, I don’t think you could have made the hover-state inactive tabs get larger with tables — only with Flash.

    Very cool, and sexy as hell.

  13. Posted by Jeff Croft on Monday, December 22nd, 2003.

    Just realized this is not Dan’s work, but Didier’s. So, great work to YOu, Didier!

    Jeff

  14. Posted by vlad on Monday, December 22nd, 2003.

    what a *great* first post @ sb, didier ;)

  15. Posted by David Barrett on Wednesday, December 24th, 2003.

    Actually, I misread the post and thought Didier said it didn’t work in IE because of IE’s terrible implementation of :hover.

    I checked it out on my friends Windows machine and found, to my pleasant surprise, that it works in IE5.5+. Any ideas why it doesn’t work in IE5.0?

  16. Posted by Marko on Saturday, January 3rd, 2004.

    Yammy! Just saw it today via CSS Vault site, and again via Mr. Z’s. Great job!

  17. Posted by Nick on Wednesday, January 14th, 2004.

    i’m impressed with the design… looks really sharp (although an 800px wide element will cause horizontal scroll bars even on a screen res of 800×600). i used something like this for the protection plus navigation.

  18. Posted by Matthijs Aandewiel on Wednesday, January 14th, 2004.

    now that! rocks!

  19. Posted by brew on Monday, January 19th, 2004.

    I love the simplicity of the concept. It was a *slaps head* moment when I had a look at the css. I’m working of something similar at the moment with the added constrain that the person who maintains the site should be able to add items to the menu without having to touch the css (or create new graphics).

    I think it degrades well in IE5.0. Although there’s no onhover, there is an “active” state. The position of this active state can be corrected in IE5.0 by using tantek’s IE5.0/Windows Band Pass Filter.

    Placing:

    @media tty {

    i{content:”\”;/*” “*/}}; @import ‘ie5.0fix.css’; {;}/*”;}

    }/* */

    after the current set of styles imports ie5.0fix.css that contains the declaration:

    li a {

    margin-bottom:-1px;

    }

    I did a quick check and it all seems to hold together.

  20. Posted by Janos Horvath on Thursday, January 29th, 2004.

    It is possible to design the menu without the IE hack if margins and floats are used instead of absolute position.

    body {

    margin: 26px;

    padding: 0;

    background: #fff url(back.png) no-repeat;

    }

    span {

    display: none;

    }

    ul {

    width: 800px;

    background: url(bg_nav.png) no-repeat;

    height: 113px;

    list-style-type: none;

    margin: 0;

    padding:0;

    }

    li {

    float:left;

    margin:0;

    padding:0;

    }

    li a {

    margin-top:81px;

    background: transparent;

    width: 100px;

    height: 32px;

    text-decoration: none;

    display:block;

    padding:0;

    }

    li#bu1 {

    padding-left: 22px;

    }

    li#bu2 a { background: url(business_hover.gif) 0 0 no-repeat; }

    li#bu3 a { background: url(personal_hover.gif) 0 0 no-repeat; }

    li#bu4 a { background: url(information_hover.gif) 0 0 no-repeat; }

    li#bu2 a:hover, li#bu3 a:hover, li#bu4 a:hover {

    background-position: 0 -32px;

    width:110px;

    }

  21. Posted by Couzin2000 on Tuesday, March 2nd, 2004.

    Being a newbie myself, I am extremely impressed with the looks of all this, and I must say that you have inspired me to start the design of my own page. CSS will be present, of course!

    This is a very slick design, and it would positively be easy to streamline a complete site with this if you expand on your idea.

    Good work, and thanks for the inspiration!

  22. Posted by Diseño web on Friday, May 28th, 2004.

    Wow, excellent implementation, i like this navigation, css are the best.

    cya!