Comments on: The Art of Navigation

By: 300+ Jquery, CSS, MooTools and JS navigation menus | PaulSpoerry.com

300+ Jquery, CSS, MooTools and JS navigation menus | PaulSpoerry.com — Sun, 14 Sep 2008 16:05:58 +0000

[…] […]

By: 300+ Jquery, CSS, MooTools and JS navigation menus | 1stwebdesigner

300+ Jquery, CSS, MooTools and JS navigation menus | 1stwebdesigner — Fri, 12 Sep 2008 22:56:32 +0000

[…] […]

By: Diseño web

Diseño web — Fri, 28 May 2004 07:04:56 +0000

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

cya!

By: Couzin2000

Couzin2000 — Tue, 02 Mar 2004 23:13:24 +0000

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!

By: Janos Horvath

Janos Horvath — Thu, 29 Jan 2004 15:59:00 +0000

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;

}

By: brew

brew — Mon, 19 Jan 2004 19:21:32 +0000

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.

By: Matthijs Aandewiel

Matthijs Aandewiel — Thu, 15 Jan 2004 01:13:15 +0000

now that! rocks!

By: Nick

Nick — Wed, 14 Jan 2004 19:04:16 +0000

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 800x600). i used something like this for the protection plus navigation.

By: Marko

Marko — Sat, 03 Jan 2004 14:34:24 +0000

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

By: David Barrett

David Barrett — Wed, 24 Dec 2003 17:36:43 +0000

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?