FW/DW Javascript Nav bar Question [Archive]

Acert93

03-09-2005, 10:05 AM

In Fireworks you can have a rollover load in the "down" state. What I am trying to do is make 1 nav bar where, whatever page you load, the link you used is in the "down" state. I would like this to be 1 file so I can make it a library item (versus having a different nav for each page, with manually selecting which one is in the down state). Hopefully I clarified this well enough.

EDIT: An example. A site has HOME, ABOUT, CONTACT, and PRODUCT nav buttons. When you select ABOUT, and the ABOUT page loads the ABOUT button is "down". When you click on CONTACT you go to the CONTACT page, where the CONTACT button is now down and ABOUT is up. I would like to do this with one set of code so I can use it as a library item (meaning I can update it at any time on all my pages).

Can this be done in DW/FW natively? (Always a good chance I missed this option!)

Thanks :)

the_pm

03-09-2005, 12:02 PM

Nope, but a little hand-coding will do the trick.

First of all, move all your rollover functions into CSS. This means making the background switch when in the :hover state. The best way to do this is to create each rollover with both states in the same file and then use that file with the background positioned differently for each mouse state.

Here comes the crafty part. Create an id for each section and mark the <body> tag with it. Then, using descendent selectors, switch the background image position on each individual page as marked.

I'm reading over my explanation and it seems a bit murky to me, so let's try an example.

You have this bit of text: Contact Me, and it's a link at the top of the page. It has a background image behind it, giving it the visual flavor you want. That might look like this:

a.nav { background:url(path/file.ext) top ; color:#HEXNUM }
a.nav:hover { background:url(path/file.ext) bottom ; color:#HEXNUM }

and in the HTML document:

<a href="contact.html" class="nav">Contact Me</a>

The background image you've specified is actually both background images, but you only see one at a time because of how they are positioned (in the example above, they would need to be stacked on top of each other to switch the position from top to bottom).

Now, let's say you want that second background to be "on" when someone's actually looking at the Contact Me page. Here's what you'd add:

a.nav { background:url(path/file.ext) top ; color:#HEXNUM }
a.nav:hover { background:url(path/file.ext) bottom ; color:#HEXNUM }

#contact a.nav { background:url(path/file.ext) bottom ; color:#HEXNUM }

And in your HTML markup:

<body id="contact">

<a href="contact.html" class="nav">Contact Me</a>

Now, that one link will appear different from the others whenever someone's on that page.

This is all a bit abstract and oversimplified, because there will a ton more markup involved in getting the links positioned properly and looking right, but if you're comfortable with markup or willing to learn enough to do it, it's realy very simple to do. In fact, I've found once you know this method, not only do you have better, more reliable markup than that given by FW/DW, it's actually quicker to create as well!

HTH :)