CSSPLAY

CSS MENUS › nicholls DOTTED LINE REPLACEMENT technique

Date : Pre 2006

For all modern browsers

This demo is too wide for your mobile screen.
Please view on a tablet or PC.

With the introduction of outline:none; into the css specifications this has become more or less redundant

The BASIC horizontal list (active/focus borders dotted - click to see)

• Item one
• Item two
• Item three
• Item four
• Item five

Adding the :hover state (active/focus borders still dotted - click to see)

• Item one
• Item two
• Item three
• Item four
• Item five

Removing the active/focus dotted border (click to NOT see)

• Item one
• Item two
• Item three
• Item four
• Item five

Adding alternative active/focus state (click to see)

• Item one
• Item two
• Item three
• Item four
• Item five

Information

A simple tutorial to explain the basic method of removing the active/focus dotted border from your menu links.

Please note that this in only applicable to links of known size. That is, links that have a width and height value in either pixels, ems or percent.

I see no problem in removing the default dotted border so long as it is replaced with a suitable alternative that will be equally recognizable by your visitors.

Just for fun and because everyone else is doing it, I have named this method nDLRt ;o)

The basic idea is to enclose the link content in an extra element (em and span are both acceptable) then give each link a position relative and the extra element a position absolute.

When the link is clicked its size is reduced to ZERO. This gets rid of the dotted border as this is only placed around the link irrespective of content.

Because the extra element has an absolute position it will still be visible and can be styled as you wish with an active/focus state.

Copyright

You may use this method on your personal 'non-profit' web site without seeking my permission.
A link back to CSS PLAY is always appreciated.

Commercial usage is also permitted without seeking approval, but I would ask that a donation is considered to support my work on CSS PLAY.

If you are having problems integrating any of my demonstrations into your website then I now offer a service to fault find and correct any errors that you may have introduced.
Please email me for more information.