Need suggestions for navigation menu

Hello everyone,

I’m currently stuck in a situation with how to code my nagivation/rollovers.

I want viewers to be able to hover over the links (main,about,blog,etc.) and have an area below display an image. So far I was thinking of slicing each area individually and use dreamweaver to create a rollover. But I’m not sure if that will work.

Any help is appreciated, thanks!

Unless your project is just a one-off “get it up and running and I don’t care how, she’ll be right” type of web site, then I would suggest you ditch your Dreamweaver from your pc, relegate your DW installation CD to your drink coasters stack and learn how to do it properly from first principles by hand coding - believe me, you’ll thank me a few years down the track when you won’t be regularly relying on forums to drag you out of the coding quicksand you’ll probably keep falling into :slight_smile:

By saying you’re not sure if creating a rollover with DW will work is not a good sign and suggests you are fairly new to web development because of course DW can create rollovers and the rest of your web page. So why start off with a bad habit? And you can bet your bottom dollar that after you create a web page with DW (or just about any other wysiwyg application) and you open the page in your browser and look at the html and extra stuff that DW has so kindly :rolleyes: created for you, you will fall off whatever you are sitting on. The amount of DW code will very, very likely be quite a few times more than if you did it properly by hand coding it yourself.

So, bottom line: do you really want to persist with DW or do you want to learn how to do it properly?

This can be done, to some extent, but it is a kind of ‘fancy’ effect that may be hard to get right in some browsers. You’d have to think very carefully about how you divided up the content into images for hovering. (It’s common to get something like this working nicely in Chrome, for example, and then find that it’s a horrible mess in IE.)

Anyhow, my first thought here would be to create a UL with list items and make them very tall, and then—via image replacement—place very tall strips as images over the top of them with a sprite hover effect. You could also set it up so that another image appeared on hover, but as I say, it has to be done very carefully. As webdev says, your chances of getting it right are much higher if this is hand coded.