My “Create a fading nav effect” tutorial
About a month ago I blogged to let you guys know that I had written my first tutorial for .net magazine explaining how I achieved the fading effect on the navigation of this very website. Now that that issue has come off the shelves I can re-post the article hear for those of you who missed it…
And here it is:

Click the tutorial to link through to my Flickr account were you can view a larger version of the tutorial...
View a larger version of the tutorial
I hope you find it useful. I’ve had some great feedback so far and would love to know what you think of the technique so leave a comment! :-)
















9 Comments
To get your own globally recognized avatar visit http://www.gravatar.com/
Jason 20th, September 2009 at 11:13 pm
Awesome article, I think I may just have to bite the bullet & get a subscription to this mag - it's looks like a goodie. I'm looking forward to hearing that fantastic Mancunian accent & sense of humour again on BOAGWorld!
Thanks Ryan.
Ryan Taylor 21st, September 2009 at 9:35 am
Thanks man. .net is definitely worth the subscription. :-)
And that's a Yorkshire accent you're hearing, not Mancunian! :-P
Kwesi Amuti 27th, September 2009 at 11:49 am
I've been looking for a tutorial like this one for a long time...here in the States you don't get that many magazine or people for that matter that are willing to share what they learned to keep the internet viable and alive. Thank you for posting the tutorial and hope all is well in life and business across the pond...signing out from sunny but soaked Atlanta, GA!
Marissa Azaria 23rd, October 2009 at 9:39 am
Hi, my name is Marissa. I'm a Web Design student. I've been trying to follow at least 3 other tutorials to make the same animated hover effect but I always failed to get valid HTML & CSS on my page. Lucky I've come across your website and find your tutorial. Thanks a lot. =)
fredt 1st, December 2009 at 1:24 pm
I've just read the tutorial and it's referring to code 'on the CD' - is the code available anywhere else ? could you post a link to it here please ?
thanks
Ryan Taylor 1st, December 2009 at 1:35 pm
@fredt - I'm afraid not. :-S I've just had a look to see if I still have a copy of the files and I don't! The tutorial should guide you through all the code you need to make the effect work however.
Andy Quick 25th, January 2010 at 9:33 pm
Hi Ryan,
I have noticed an interesting little movement in IE. When rolled over the images seem to move 1 or two pixels to the right. On my learning fule it only moves one option. Just wondering if you have seen this at all?
Thanks
Ryan Taylor 25th, January 2010 at 9:45 pm
@Andy - Which version of IE are you seeing this in?
Andy Quick 25th, January 2010 at 10:33 pm
Hi Ryan,
IE8, the jpg and code seem ok but I notice it does the same on your website so wondered if it was another wonderful IE bug.
Also my first option seems slightly out of position even when the menu is the only thing in the html file.