I wanted to create a typical navigation bar that progressively enhanced for those browsers supporting HTML5 and CSS3.

I used Jquery in conjunction with HTML5 and CSS3 to give the user more information about the link destination. So for instance I used custom data attributes to avoid using unnecessary paragraph tags in the markup that would appear irrelevant to those not using JavaScript.

The trickiest thing to overcome was setting the paragraphs background colour dependant on what link had been hovered on. After struggling with using multiple arrays I was introduced to JSON. JavaScript Object Notation allowed me to manually set an href value for each links color attribute and then call it on a mouseover function and set it to the visible paragraph.

And after removing a few little mouseout glitches I now have a smooth working navigation that works for all browsers. Take a look at the demo.