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

Dan Rubin's SuperfluousBanter

Suffering from chronic idiocy since 1977

|

The Art of Navigation

When build­ing a web­site there’s an inevitable moment when it is required you think hard about nav­i­ga­tional ele­ments. I’m not talk­ing about infor­ma­tion archi­tec­ture here. Infor­ma­tion archi­tec­ture usu­ally helps answer­ing the ques­tion: “How will this func­tion?” (among oth­ers). Nope. I’m try­ing to answer the ques­tion “How will this look?” – purely from a graphic design perspective.

The above men­tioned stage of the design process is one that I spend a con­sid­er­able amount of time on and par­tic­u­larly enjoy within any project. In this post I want to share my lat­est exper­i­ment on nav­i­ga­tion design.

CSS based navigation!In my quest for ele­gant, clever and nice nav­i­ga­tion design I decided to let go of cer­tain require­ments. In this case I decided to ignore a few usabil­ity (and acces­si­bil­ity) best prac­tices (note: this should of course be avoided in real life imple­men­ta­tion).

How­ever, I’ve set myself a few con­straints which make per­fect sense, even in an exper­i­ment. This design should of course be con­structed using the sounder XHTML and CSS com­bi­na­tion, as opposed to tables. Fur­ther­more, once CSS is dis­abled, a nice unordered list should remain. Other than that the sky is the limit.

The main pur­pose of this design exper­i­ment is to see how far we can push CSS. Is it pos­si­ble to cre­ate the most com­plex nav­i­ga­tion (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 design­ers who ele­gantly proved this point in the past.

As said and proved by many before – CSS can han­dle your wildest dreams. Unfor­tu­nately we are cur­rently only lim­ited by the pace of web stan­dards imple­men­ta­tion in mod­ern browsers (specif­i­cally one browser, no names of course). This small exper­i­ment should work in most mod­ern browsers, but your mileage may vary. Com­ments are more than wel­come, but keep in mind that this is only a trial in design, not in prac­ti­cal imple­men­ta­tion 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 remark­ably good look­ing. Could you achieve a sim­i­lar effect — using text, rather than images — with back­ground pat­terns and the mozilla rounded-borders css call? Shad­ows prob­a­bly 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.

    Amaz­ing, I love the per­spec­tive effect com­bined with drop shad­ows. ^_^

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

    Whoa.

    Now that’s slick, unbe­liev­able job.

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

    That just looks lick­able! I par­tic­u­larly like the very sub­tle gra­di­ent on the hover button.

    Its also a boon that so lit­tle 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 copy­wrongs on this one. :)

    It suf­fers from one annoy­ing prob­lem 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 posi­tion prop­erty, all works well.

    This is very annoy­ing, espe­cially on mul­ti­level menus, like the one (ADx­Menu) I have at my web site. I hope that 1.2 will fix this problem.

    I chose to neglect the prob­lem for now, wait­ing 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 Suck­er­fish Drop­downs work for get­ting the hover to “work” in IE?

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

    Eric: we are cur­rently lim­ited by adher­ance to web stan­dards of the most com­mon browser. But in the­ory you are right, using more advanced CSS trick­ery it will be pos­si­ble to avoid using images to obtain par­tic­u­lar effects.

    David: I assume you refer to the pos­si­bil­ity of hav­ing a drop­down list appear below each tab (or nested lists). I haven’t looked at the dis­cussed tech­nique in detail (ALA) so I can’t answer that ques­tion at the moment. How­ever swiftly look­ing at the code my guess is that it could work. It would be an inter­est­ing experiment…

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

    Beau­ti­ful. 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 repli­cat­ing that with text and as few images as pos­si­ble. 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 sim­ple power and promise to com­mer­cial web sites. I wish to change my lit­tle world of con­nec­tions with code as ele­gant as this. It ren­ders great in IE6 and MOZ. Exquis­ite! THIS is the future and we need to carry the torch. I am hum­bled some­what by the vast­ness of what is yet to learn but I am will­ing. 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 beau­ti­ful, Dan. GREAT work. The only other tech­nol­ogy that could touch this from a design per­spec­tive is Flash (and it has it’s own problems).

    This may be one of the first exam­ples I’ve seen of some­thing that tru­cly couldn’t have been done with tables, but can be with CSS. Specif­i­cally, I don’t think you could have made the hover-state inac­tive 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 real­ized 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.

    Actu­ally, I mis­read the post and thought Didier said it didn’t work in IE because of IE’s ter­ri­ble imple­men­ta­tion of :hover.

    I checked it out on my friends Win­dows machine and found, to my pleas­ant sur­prise, 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 ele­ment will cause hor­i­zon­tal scroll bars even on a screen res of 800x600). i used some­thing like this for the pro­tec­tion 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 sim­plic­ity of the con­cept. It was a *slaps head* moment when I had a look at the css. I’m work­ing of some­thing sim­i­lar at the moment with the added con­strain that the per­son who main­tains the site should be able to add items to the menu with­out hav­ing to touch the css (or cre­ate new graphics).

    I think it degrades well in IE5.0. Although there’s no onhover, there is an “active” state. The posi­tion of this active state can be cor­rected in IE5.0 by using tantek’s IE5.0/Windows Band Pass Fil­ter.

    Plac­ing:

    @media tty {

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

    }/* */

    after the cur­rent set of styles imports ie5.0fix.css that con­tains 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 pos­si­ble to design the menu with­out the IE hack if mar­gins and floats are used instead of absolute position.

    body {

    mar­gin: 26px;

    padding: 0;

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

    }

    span {

    dis­play: none;

    }

    ul {

    width: 800px;

    back­ground: url(bg_nav.png) no-repeat;

    height: 113px;

    list-style-type: none;

    mar­gin: 0;

    padding:0;

    }

    li {

    float:left;

    margin:0;

    padding:0;

    }

    li a {

    margin-top:81px;

    back­ground: transparent;

    width: 100px;

    height: 32px;

    text-decoration: none;

    display:block;

    padding:0;

    }

    li#bu1 {

    padding-left: 22px;

    }

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

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

    li#bu4 a { back­ground: 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 new­bie 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 pos­i­tively be easy to stream­line a com­plete 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, excel­lent imple­men­ta­tion, i like this nav­i­ga­tion, css are the best.

    cya!