Navigation Matrix Reloaded

Navigation Matrix | Weekend Reading (19)

Navigation Matrix Reloaded

In my previous post, Jon Hicks raised the IE6 flickering issue, which has been tormenting designers and coders alike for too long now. At first I thought there was no elegant solution to this problem, but after a few error and trial sessions I came up with a solution that gets rid of the flickering — in any situation.

What changed?

First of all I need an extra div that wraps the ul and li elements. Originally the ul contained the large background image. However I will need the ul for another purpose, namely to counter the flickering. Thus in this version the extra div holds the main background image. The width and height of the ul matches the group of li elements. The markup needed just little change:

<body id="welcome">
<div id="header">
<ul id="nav">
<li id="wel"><a href="welcome2.html">welcome</a></li>
<li id="pro"><a href="products2.html">products</a></li>
<li id="sup"><a href="support2.html">support</a></li>
<li id="con"><a href="contact2.html">contact</a></li>
</ul>
</div>
</body>

I also need a new matrix. In order to counter the flickering I need to set a background to the ul that matches the hover states of the individual li elements. Below I’ve included the new matrix:

matrix

The first 4 rows are used for the different ul backgrounds. As you can see they perfectly match with the hover states on the individual pages. The other two rows include the other states I need for the navigation to function properly. Of course some tabs are included more than once, but this is needed because I need the entire row to display as the ul background, instead of just individual elements. The size in kilobytes is exactly the same as the previous matrix.

Some of the CSS has changed too, most notably the backgrounds for the ul elements:

ul#nav {
position: relative;
top: 68px;
left: 188px;
width: 346px;
margin: 0;
height: 22px;
list-style-type: none;
overflow: hidden;
}

body#welcome ul#nav {
background: transparent url(nav_f_2.png) no-repeat 0 0;
}
body#products ul#nav {
background: transparent url(nav_f_2.png) no-repeat 0 -22px;
}
body#support ul#nav {
background: transparent url(nav_f_2.png) no-repeat 0 -44px;
}
body#contact ul#nav {
background: transparent url(nav_f_2.png) no-repeat 0 -66px;
}

Naturally the positions of the backgrounds have changed in the li elements because I use a different matrix. Again, download the css file to have a closer look. So, there you go, navigation matrix reloaded, without the flickering.

This item was posted by Dan Rubin on Wednesday, May 5th, 2004.

Categories:

Uncategorized

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

Comments are closed.

31 comments on “Navigation Matrix Reloaded”

Posted by Jon Hicks on Wednesday, May 5th, 2004.

Superb! Thats what I call service! I’m now desperately trying to think of any other bugs I’d like you to fix for me….
Posted by Davezilla on Wednesday, May 5th, 2004.

Well, your code worked better for me in the fisrt iteration. Today I see this.

[Mozilla 1.5 on Win 2000]
Posted by Didier Hilhorst on Wednesday, May 5th, 2004.

Davezilla — Wow that’s some wicked effect, unfortunately not intended of course. To be honest I have no idea why it’s happening. Somehow it seems like a rendering error. The problem is not due to an error in background placement because what I see in your screenshot can’t possibly result from the background image. I currently only have Firefox 0.8 installed. I’ll grab Mozilla 1.5 to see if I can reproduce the problem.
Posted by Max Thrane on Wednesday, May 5th, 2004.

I have no comments at all… I’m just like… WOW, this nav simply rocks! My full respect to DH, way to go!
Posted by Philippe on Wednesday, May 5th, 2004.

And that fixed some of the issues with IE5.x Mac…

Note that thanks to your previous version, I found a workaround to that overflow problem in Mac IE. Basically (in the previous CSS), instead of using height:0; one can use height:1px, and adapt the top padding as needed. I’ll document that as soon as I have a bit of time.
Posted by Scott Johnson on Thursday, May 6th, 2004.

DH, you rock. Serious. You rock man. This is the slickest non-flash, non-javascript navbar I’ve seen yet. Keep up the great work! I can’t wait to see what you produce next!
Posted by Phil Baines on Thursday, May 6th, 2004.

Nice work! I have used that very same technique to avoid the IE flicker myself. The back-ground image underneath the individual links that is, not the matrix. I love that matrix idea. It’s a bit like Dave S sprites from ALA.

In fact, what I do on my site (www.wubbleyew.com) is set the background-image to none on hover, to display the other background image underneath. Maybe you could do that to save shifting the background around on hover? It might be less intensive for the client?

My navigation pales in comparison to yours as far as style is concerned, so again; nice work.
Posted by Higs on Thursday, May 6th, 2004.

Very sweet. I do have one silly question: what the name of the font you used in the tabs?
Posted by Dave Simon on Thursday, May 6th, 2004.

Very impressive. Totally opened my eyes to some new things I should try with CSS. Bravo.
Posted by Mike on Thursday, May 6th, 2004.

Nice man! I especially like the text-indent image replacement ;)

Change -100em to -9000px and it’ll fix a goofy bug in Safari. Trust me!
Posted by mac on Thursday, May 6th, 2004.

this is great info!
Posted by AlexA on Thursday, May 6th, 2004.

Great job, but that’s some wicked effect on NN 7.1
Posted by Weyert de Boer on Thursday, May 6th, 2004.

If someone would like to take the time, when you call “flickering” here. Because when I browse your example in IE6.0/Windows (within FeedDemon, though) it has little flickering, same as the previous a little one-second/white flash.
Posted by On20s on Friday, May 7th, 2004.

Dude, thats sweet. I want to try something like that, but I need to know how you created those tabs – they are schweeet. Did you use any tool for that???

Again, kudos to you for the idea and the writeup…
Posted by bbr on Friday, May 7th, 2004.

thanks man, you rock! i used a similar version of this on my site: http://www.805bbr.com
Posted by Didier Hilhorst on Saturday, May 8th, 2004.

All those using Mozilla 1.5 or other older versions of Gecko based browsers (including Netscape) where the odd problem occurs Davezilla noticed I suggest updating to Mozilla 1.6 which displays the navigation correctly. It remains, nonetheless, just a small glitch that does not render the navigation unusable.

Higs — The bitmap font I used is called 04b_03b and is available free of charge at 04 or alternatively at DaFONT

Mike — Thanks for pointing that out. The stylesheets on both examples have been updated.

Weyert — There should be no flickering whatsoever when hovering over the links. I tested this with an assortment of settings in IE6 and emptied the cache several times to make sure the image was downloaded. I can only assume you either looked at the previous example or FeedDemon for some odd reason makes the flickering come back (which I doubt since it just uses IE6’s rendering engine.) That said if anyone else is still seeing any flickering please let me know.

On20s — I use both Photoshop and Fireworks MX to create any graphics I need. Photoshop for most of the artwork and Fireworks MX for some pixel details, fonts and optimization. But I strongly suggest Photoshop for any graphic design needs — it’s the tool of the trade
Posted by alex west on Sunday, May 9th, 2004.

Great Nav module concept. Congratulations. Thank you!

About the flickering:

I still get some flickering (sometimes) in IE6. After the cache has gone through all the links the flickering seems to diminish. If you use the back button the flickering is also there. Sometimes it is very visible, others only slightly.

So it might just have to do with how IE6 renders the pages and not with the CSS itself… works beautifull in Firefox 0.8
Posted by Trevor Nelmes on Monday, May 10th, 2004.

Hi

I see the idea. In FF0.8 on hover the animated gif plays, but in IE it doesn’t appear. This is because the tab is one pixel lower in IE than in FF. Is this deliberate? Or a positioning error?

Trevor
Posted by Trevor Nelmes on Monday, May 10th, 2004.

DOH!

Would help if IE had animations switched on!
Posted by Bryan on Monday, May 10th, 2004.

hmmm, seems my link got removed. Thats a bummer.
Posted by bryan on Monday, May 10th, 2004.

Whoops, didn’t realize there was two forums for this. Here is my post on the May 4th forum

—

This is a great idea and method. It allows for the opportunity to create a similar flash navigation where you don’t have to worry about preloading the image rollovers. I just created an example that would be something like what I would see in a flash navigation. Anyways, let me know what you guys think. Its just an animated gif.

Matrix Reloaded Animated

—

Bryan
Posted by Tim Hatch on Monday, May 10th, 2004.

I found that setting the following in ul#nav seems to fix the Odd Gecko Effect and in the process found that IE5/mac needs a little hacking to look perfect:

/* this block replaces the existing top: 68px; rule for ul#nav */

top: 63px;

/* comment from ie5/mac \*/

top: 68px;

/* end hiding */

padding: 0;

No regressions:

IE6/winIE5.5/winIE5.01/winFirefox-0.8/winMozilla-1.7b/winMozilla-1.6a/winSafari-1.2/macOpera-7/winOpera-6/winOpera-5/win

Looks better:

Firebird-0.7/winCamino-0.7/macIE-5.2/macNetscape-6.2/win

Does setting the padding to 0 have some unknown effect I’m not catching?

Oh, almost forgot the demo page.
Posted by Kim Siever on Tuesday, May 11th, 2004.

The only flickering I get is when I click on a tab.
Posted by Adagio on Wednesday, May 12th, 2004.

I tried to use your method to create a navigation, but the hover doesn’t work on IE5.0 (PC) … I really have no idea, why. My code is (more or less) 100% the same one you have used.

Link to my site
Posted by andrew on Thursday, June 3rd, 2004.

On my PC, in IE6 (not feed demon), if the setting in temp internet files is set to ‘Every visit to the page’, the rollover doesn’t flicker, but when i move to the next tab, the previous one stays highlighted for a second?

Is there a fix for this problem? If you do it quick across all tabs, you can have all tabs highlighted at once, and then one by one they’ll ‘roll off’ afterwards.

Which setting is IE default set to? Because on ‘automatically’ its fine…
Posted by Ralph Solinas on Thursday, July 1st, 2004.

Please visit my website.

Ralph Solinas o
Posted by Mike on Friday, July 2nd, 2004.

I know the last row is to stop the flickering but I guess I’m not understanding the methodology of it. I was looking at the contact one and sometimes it would use one row and sometimes it would use another for the same image, why wouldn’t it lets say for the contact go to 262, 88 every time rather than go to 262, 66 sometimes, I hope this question makes sense.

Thanks
Posted by Mike on Friday, July 2nd, 2004.

wait instead use products 94, 88 and 94 110, sorry

Thanks
Posted by Christian Machmeier on Wednesday, July 7th, 2004.

Maybe someone is interested in a customized example of Didier’s Navigation Matrix. Sometimes three states (normal, active and hover) could be overkill, so I adapted Didier’s Code and created the same navigation, but with only two states (normal and hover).

See a working example at: http://www.redsplash.de/experiments/css/nav_matrix2/
Posted by Adagio on Thursday, July 29th, 2004.

I found something “serious” about this kind of navigation. There are some users out there who don’t turn off their CSS support, but the images.

When you turn off all images, you don’t see any navigation or text at all. Is there any fix to this?

Dan Rubin's SuperfluousBanter