Fancy header navigation menu using css3 transition

In our previous tutorials we have had look at different features of css3 and html5 like creating css3 flowers using gradient effect, Introduction to HTML5 web storage, Ajax file upload with drag and drop and progress bar. In this tutorial we will look at the new css3 feature css3 transition. css3 transition is in experiment (draft) phase so while using properties related to it you have to prefix it with “-moz-“ for Firefox, “-webkit-“ for chrome and safari, and “-o-“ for opera.Top better understand how it works We will be creating a navigation menu using css3 transition effect.     Our final navigation menu will look something like this

Index.html

I am using two different directories for storing black and white images and color images. So all the black and white images are in “bw” folder and all the color images are in “color” folder. When first time menu loads we will show bw images and on mouse over event we will replace that “bw” folder name with “color” so bw images will become colorful and it will give a fancy look to the navigation menu.
As i said earlier i am using “-moz”,”-webkit-” and “-o-” so it can work in all the browsers. Internet explorer doesnt support css3 transition property yet so what we can do it just hope that next version of IE will support it. And this is what we have done till date, we are just hoping hoping and hoping but IE never keep up with other browsers.
Anyways lets have a look at the code. I am using DIVs and anchor tag to create navigation menu, i am not sure but this could be also designed using UL and LI’s also, I tried but i wasnt able to give it proper look that i wanted so went with DIV’s.

style.css

Jquery