Tricky Navigation Menu Help

Ok, just so we’re all clear here - The Website I’m about to give you the link to has nothing to do with me, I just like the navigation menu and the way it works / looks (obviously not the fact that it was made in Flash…Save yourself…Don’t view the source!).

The navigation menu in question is located at:

I was just wondering if that same navigation menu could be put together using HTML, CSS, JavaScript and maybe an animated .gif file or not?

Any help would be appreciated! :slight_smile:

Andrew Cooper

You can do that, however you have to weigh the pros and cons of doing it as aesthetically pleasing as displayed on the site you’ve linked to.


You could use any of the following methods to accomplish the semi-transparent background with CSS:

  • through the opacity property
  • by using a semi-transparent PNG image
  • by using rgba (CSS3)

Using a semi-transparent image is certainly easy, however it’s not flexible as you lose lots of control on how to manipulate its appearance. Furthermore, you need to use propietary filters or some scripting to make it work in IE6.

Using the [FONT=Courier New]RGBA[/FONT] colour model is pretty darn awesome.

Take this example:

#nav {
 /* you could also write #000 or black */
/* last value indicates transparency level */

All browsers will accept the first declaration. Modern browsers will take the second one. That’s the beauty of the cascade.
The drawback is that not too many browsers support it as it’s CSS3. Those who don’t will have the full background colour value.

The third way to go about it is by using opacity,also a CSS3 property, and Opera has a great how-to on it.

Some more reading on the topic:

Image Replacement

Next you’ll have to decide whether to use an image replacement technique for your navigation text. There are no truly flexible means to do this. You can use some dynamic techniques with tools such as Cufon (JS) or [URL=“”]sIFR (JS & Flash), but you could also use static images and apply one of the bazillion [URL=“”]dynamic solutions and [URL=“”]static methods out there. Even Paul has one [URL=“”]here.

The other way to go about it is using the @font-face property. It’s what I’d recommend because it’s a CSS method that doesn’t require scripting of any kind. However, you need to make sure that you use a “legal” font. You can get some nice ones here, [URL=“”]here (my favourite) or [URL=“”]here. [URL=“”]Jonathan Snook has a nice write-up on how to properly apply this technique. Tim Brown’s got a [URL=“”]great article on it, too.

And finally, you could use one of those newer font services such as [URL=“”]Typekit or [URL=“”]Fontdeck. This method can be a resource-hog, so I’d read up on the pros and cons for using these types of services. [URL=“”]for and against using this approach.

Animation with Javascript

Lastly, you’d need to add some animation. For that you could use Javascript and I’m sure the effect you’re looking for is already available in some function within one of the various Javascript frameworks. Perhaps some Javascript guru can give you better pointers with that. :slight_smile:

Some cool animation effects with jQuery: