The Active Styles extension allows you to vary the appearance of links when they're pressed.
View the demo to see it in action.
The script adds the class
name
"active"
to links when they're
pressed, which you can use to apply additional styling.
Download the
Active Styles script,
copy it into your udm-resources
folder,
and add the script include to the body section:
<!-- active styles extension -->
<script type="text/javascript"
src="/udm-resources/udm-x-active.js"></script>
You can then define as much or as little
CSS as you want
to vary the styling of active links, using the class
name
"active"
. Remember that you're not defining
their appearance from scratch, you're modifying the appearance of links which
are otherwise in their rollover state.
In the active styles demo I used raised borders for the rollovers, and then depressed borders in the active styles, to give the appearance of buttons. I also added text-indent to re-inforce that illusion. I have two different menu styles, so it takes three sets of rules to acheive that - for the navbar, default menu, and orange menu styles:
/* active styles */
#udm a.active {
border-color:#cb9963 #feecb6 #feecb6 #cb9963;
text-indent:1px;
}
#udm ul a.active {
border-color:#060 #cec #cec #060;
text-indent:1px;
}
#udm ul li.orangeMenuItem a.active {
border-color:#ba8852 #fedca6 #fedca6 #ba8852;
}
You can see another example of this extension in use with the Chocolate Bar demo.
Support for the :active
pseudo-class is not included
by default because Internet Explorer's implementation of it
is wrong - it should apply to links when they're pressed, and
not when they're released, but instead IE
applies it to links when they have the focus.
As a happy side-effect, this means that :active
can be used
to simulate the :focus
pseudo-class, which IE doesn't otherwise
support. But this does of course mean that a pure-CSS implementation of
active styles is not possible. Hence the reason for this extension.
You might find that in early Mozilla builds the active class occasionally
"sticks" - it doesn't reset onmouseup
. Since active styles
are only applied to a link just before it's about about to be followed, the only
time you're likely to notice is with links to anchors on the same page.
UDM 4 is valid XHTML, and in our judgement, meets the criteria for WAI Triple-A conformance.