Making hyperlink styles work properly in a navigation bar

When you create a navigation bar in Freeway, you may have trouble getting all the hyperlink styles to work properly. Your styles will probably be like this:

 #navbar a
 #navbar a:hover
 #navbar a:active

but the trouble is, Freeway sorts styles into (something like) alphabetical order, so your styles will become:

 #navbar a
 #navbar a:active
 #navbar a:hover

and then they won’t work as intended. So what do you do?

Firstly, if you are using Freeway 5 you can set the hyperlink styles in the Inspector if you want to, and you may find that easier. But if you prefer to set up your own styles, the answer is to increase the specificity of the active style, so it takes precedence over the hover style. There is more than one way of doing this.

First method:

 #navbar a
 #navbar a:hover
 #navbar a:hover:active

This is the method I use: it works because you have to hover over a link before you can click it.

Second method:

 #navbar a
 #navbar a:hover
 #navbar li a:active

This method only works if your navigation bar is formatted as a list (as it normally will be).

Regards

Graham Smith Bury St Edmunds, UK

---

tutorials mailing list email@hidden Update your subscriptions at: http://freewaytalk.net/person/options

quote

hey Graham thats a neat trick… I approached this differently in my sneaky tutorial but this is another great way to order the styles

cheers max

---

tutorials mailing list email@hidden Update your subscriptions at: http://freewaytalk.net/person/options

quote