Making of the theme

tags as the navigation

So the task is to make an entertaining navigation bar that satisfies the web accessibility. In the end I got this tag idea from the label of my cardigan.

These waving tags are done with jQuery.
One single hover event on one slice triggers corresponding actions across 3 to 4 other slices. For example, when the cursor hovers 'works' tag, the CSS property of background position changes on the slices including 'about' tag, 'works' tag, the slice between 'works' and 'projects' tags, and the slice between 'about' and 'works' tags.
The trick is to slice the tags well. Most of the tags have three stages: default position, partly covers the neighbor tag when the cursor hovers, and covered by its neighbor tag.
slices


Although a Flash navigation bar would be a quick solution, it’s not ideal in terms of web accessibility. At least I thought so – I am doing a bit research about Flash and accessibility at the moment.

code

It's quite a jQuery beginner's code- I have to admit. Any comments are welcome!

$(document).ready(function(){
 $("#LimboNav span#nav-1 a.link, a.NavAbout").hover(
//hover
  function () { 
    $("#LimboNav span#nav-01").addClass("pos2"); 
    $("#LimboNav span#nav-1").addClass("pos2"); 
    $("#LimboNav span#nav-12").addClass("pos2"); },
//move out
  function () { 
    $("#LimboNav span#nav-01").removeClass("pos2"); 
    $("#LimboNav span#nav-1").removeClass("pos2"); 
    $("#LimboNav span#nav-12").removeClass("pos2"); }
 );
…
});