Throughout most of the uat.edu site there are three navs on each page and they serve three different functions. The design of the navs were created by an external design agency and I was tasked with making them functional. Although each navigation is different, the kind of work I did for them is mostly the same. All of them needed to be able to have their links defined dynamically and be skinned to fit the different colored pages of the site. In the end they each read in an xml page that determines what their links will be and the navs themselves are created completely on the fly in vector to match the color of the page. Drawing the navs dynamically has the extra benefit of making them extremely lightweight; none of them are more than 20K. Below I have the extra bits that were handled for the individual navs.

See a page with all three navs
 

This nav is the bar that's at the top of every page on the site. This one is pretty simple, the only extra that I had to add into it were the moving squares. As you mouse from side to side, you'll see different colored squares going moving along behind the links. A simple effect but I quite like it.

This nav is the one that's on the left of most of the pages on the site and bears the title "Smart Nav". There weren't any really tricky bits with this one. It was a pretty straightforward conversion from the mockup.

This nav is the one that's on the right of most of the pages on the site and bears the title "Global Nav". This one is the most complicated from a functionaly point of view. It essentially has the ability to move through the entire site and let you see the pages that are listed in each section. An xml page that listed every other page on the site, relative to where you currently are, would be huge and take time to parse. Instead, as you click around, it loads in the xml page for the next section, populates it, and displays it. I'm quite happy with the look of the sections moving around, I think it ended up being a nice effect.