Information
Just for fun, although it may have some serious application, a coded menu of spies.
Just hover your mouse over any of the squares, lettered or otherwise, to unscramble each line into a well known spy.
Perhaps this may be a way of displaying a code for entry of information into forms etc. but then again, maybe not ;o)
This is just a css styled unordered list and will degrade back to this for text only browsers.
Cascading Style Sheet
#spy {
padding:0;
list-style-type:none;
width:19.5em;
margin:2em auto;
}
#spy li {
width:16.5em;
position:relative;
height:1.5em;
font-size:1.2em;
}
#spy li a {
text-decoration:none;
cursor:pointer;
}
#spy li a em {
font-style:normal;
color:#000;
display:block;
width:1.1em;
background:#eee;
position:absolute;
top:0;
text-align:center;
border:0.3em solid #697210;
}
#spy .a1 {left:13.5em;}
#spy .a2 {left:6em;}
#spy .a3 {left:7.5em;}
#spy .a4 {left:10.5em;}
#spy .a5 {left:15em;}
#spy .a6 {left:3em;}
#spy .a7 {left:1.5em;}
#spy .a8 {left:4.5em;}
#spy .a9 {left:9em;}
#spy .a10 {left:12em;}
#spy .a11 {left:0em;}
#spy .dk {background:#e09222;}
#spy li a:hover {background:#ccc;}
#spy li a:hover .a1 {left:0;}
#spy li a:hover .a2 {left:1.5em;}
#spy li a:hover .a3 {left:3em;}
#spy li a:hover .a4 {left:4.5em;}
#spy li a:hover .a5 {left:6em;}
#spy li a:hover .a6 {left:7.5em;}
#spy li a:hover .a7 {left:9em;}
#spy li a:hover .a8 {left:10.5em;}
#spy li a:hover .a9 {left:12em;}
#spy li a:hover .a10 {left:13.5em;}
#spy li a:hover .a11 {left:15em;}
xhtml
<ul id="spy">
<li><a href="#nogo">
<em class="a1">N</em>
<em class="a2">A</em>
<em class="a3">T</em>
<em class="a4">H</em>
<em class="a5">A</em>
<em class="a6">N</em>
<em class="a7 dk"> </em>
<em class="a8">H</em>
<em class="a9">A</em>
<em class="a10">L</em>
<em class="a11">E</em>
</a></li>
<li><a href="#nogo">
<em class="a1">B</em>
<em class="a2">E</em>
<em class="a3">L</em>
<em class="a4">L</em>
<em class="a5">E</em>
<em class="a6 dk"> </em>
<em class="a7">B</em>
<em class="a8">O</em>
<em class="a9">Y</em>
<em class="a10">D</em>
<em class="a11 dk"> </em>
</a></li>
<li><a href="#nogo">
<em class="a1">M</em>
<em class="a2">A</em>
<em class="a3">T</em>
<em class="a4">A</em>
<em class="a5 dk"> </em>
<em class="a6">H</em>
<em class="a7">A</em>
<em class="a8">R</em>
<em class="a9">I</em>
<em class="a10 dk"> </em>
<em class="a11 dk"> </em>
</a></li>
<li><a href="#nogo">
<em class="a1">A</em>
<em class="a2">L</em>
<em class="a3">G</em>
<em class="a4">E</em>
<em class="a5">R</em>
<em class="a6 dk"> </em>
<em class="a7">H</em>
<em class="a8">I</em>
<em class="a9">S</em>
<em class="a10">S</em>
<em class="a11 dk"> </em>
</a></li>
<li><a href="#nogo">
<em class="a1">K</em>
<em class="a2">I</em>
<em class="a3">M</em>
<em class="a4 dk"> </em>
<em class="a5">P</em>
<em class="a6">H</em>
<em class="a7">I</em>
<em class="a8">L</em>
<em class="a9">B</em>
<em class="a10">Y</em>
<em class="a11 dk"> </em>
</a></li>
</ul>
Copyright
You may use this method on your personal 'non-profit' web site without seeking my permission. A link back to CSSplay 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 CSSPlay.
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.
- Register Domain Name
- Website Design
- SEO
- Leading digital agency
Search & social experts to increase traffic - Web Banner Design
Unique designs from $20 - Online PR-Portal Social Media News
Our Press releases you can read on OA News - SEO Services
- Managed Hosting
- Search engine optimisation
Search engine optimisation specialists to companies throughout the UK and the World - website design
- Bath Panels
CSS play Testimonial
"The 
web site uses
CSS play code for the site drop down menus.
This code works seamlessly in IE 6 & 7, and is an excellent solution to the Creative requirements of the site."
Damon Clark - Brandwidth