Stu Nicholls | CSSplay | Coded CSS menus

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.