Circular links

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9

Information

In response to several requests the above demonstration is of a number pad with CIRCULAR links.

These links are just a styled unordered list.

The links only occupy the circular pads and will not be selectable until the mouse pointer is actually on the pads.

No images have been used in the making of this demo, just an excessive amount of extra markup ;o) .

I would not advocate using this method for circular links, but it does show what is possible and that links do not have to be rectangular.

nDLRt : nicholls Dotted Line Replacement technique.

==================================

ul#off {list-style-type:none; padding:0; margin:0; width:157px; height:157px; margin:2em auto; position:relative; background:#eee; border:3px solid #aaa;}
ul#off li {display:block; width:50px; height:50px; margin:1px; position:relative; float:left;}
ul#off a {display:block; width:0; height:0; text-decoration:none; position:absolute; left:0; top:0;}

ul#off a em {cursor:pointer;}

ul#off a em {position:absolute; display:block; height:1px; overflow:hidden; font-size:1px; cursor:pointer; border:1px solid #abc; background:#cde;}

ul#off a em.h1, ul#off a em.h29 {width:10px; border:0; background:#abc;}
ul#off a em.h2, ul#off a em.h28 {width:10px; border-width:0 3px;}
ul#off a em.h3, ul#off a em.h27 {width:16px; border-width:0 3px;}
ul#off a em.h4, ul#off a em.h26 {width:22px; border-width:0 2px;}
ul#off a em.h5, ul#off a em.h25 {width:26px; border-width:0 1px;}
ul#off a em.h6, ul#off a em.h24 {width:28px; border-width:0 2px;}
ul#off a em.h7, ul#off a em.h23 {width:32px; border-width:0 1px;}
ul#off a em.h8, ul#off a em.h22 {width:34px; border-width:0 1px;}
ul#off a em.h9, ul#off a em.h21 {width:36px; border-width:0 1px;}
ul#off a em.h10, ul#off a em.h20 {width:38px; height:2px; border-width:0 1px;}
ul#off a em.h11, ul#off a em.h19 {width:40px; border-width:0 1px;}
ul#off a em.h12, ul#off a em.h18 {width:42px; height:2px; border-width:0 1px;}
ul#off a em.h13, ul#off a em.h17 {width:44px; height:3px; border-width:0 1px;}
ul#off a em.h14, ul#off a em.h16 {width:46px; height:3px; border-width:0 1px;}
ul#off a em.h15 {width:48px; height:10px; line-height:10px; border-width:0 1px; font-size:10px; font-style:normal; text-align:center; font-weight:bold;}

ul#off a em.h1 {top:0; left:20px;}
ul#off a em.h2 {top:1px; left:17px;}
ul#off a em.h3 {top:2px; left:14px;}
ul#off a em.h4 {top:3px; left:12px;}
ul#off a em.h5 {top:4px; left:11px;}
ul#off a em.h6 {top:5px; left:9px;}
ul#off a em.h7 {top:6px; left:8px;}
ul#off a em.h8 {top:7px; left:7px;}
ul#off a em.h9 {top:8px; left:6px;}
ul#off a em.h10 {top:9px; left:5px;}
ul#off a em.h11 {top:11px; left:4px;}
ul#off a em.h12 {top:12px; left:3px;}
ul#off a em.h13 {top:14px; left:2px;}
ul#off a em.h14 {top:17px; left:1px;}
ul#off a em.h15 {top:20px; left:0;}
ul#off a em.h16 {top:30px; left:1px;}
ul#off a em.h17 {top:33px; left:2px;}
ul#off a em.h18 {top:36px; left:3px;}
ul#off a em.h19 {top:38px; left:4px;}
ul#off a em.h20 {top:39px; left:5px;}
ul#off a em.h21 {top:41px; left:6px;}
ul#off a em.h22 {top:42px; left:7px;}
ul#off a em.h23 {top:43px; left:8px;}
ul#off a em.h24 {top:44px; left:9px;}
ul#off a em.h25 {top:45px; left:11px;}
ul#off a em.h26 {top:46px; left:12px;}
ul#off a em.h27 {top:47px; left:14px;}
ul#off a em.h28 {top:48px; left:17px;}
ul#off a em.h29 {top:49px; left:20px;}

ul#off a em.mid {position:absolute; left:7px; top:8px; display:block; width:36px; height:34px; background:#db2; text-align:center; line-height:34px; font-style:normal; font-weight:bold; color:#000;}

ul#off a:hover {color:#c00;}
ul#off a:hover em {background:#ec3; color:#c00; border-color:#000;}
ul#off a:hover em.h1, ul#off a:hover em.h29 {background:#000;}
ul#off a:active, ul#off a:focus {background:#eee;}
ul#off a:active em, ul#off a:focus em {background:#fc6; border-color:#000; color:#000;}
ul#off a:active em.h1, ul#off a:active em.h29, ul#off a:focus em.h1, ul#off a:focus em.h29 {background:#000;}