Haven’t you ever just wanted a yoyo on your webpage? A beautiful, animated, spinning yoyo that slides down like a real yoyo would? I know I have never even thought of it and I probably would never have the need for it either, however it is very useful to learn (If you don’t already know) how one would go about creating a yoyo so you could use the techniques for other things. View the demo in Safari/Chrome and take full advantage of the CSS3.
People tend to become upset and/or frustrated (Including me) when something simple doesn’t work, such as jQuery not working. Before you do anything, navigate to your jQuery file and check that it is exactly where it should be.
The :hover pseudo-class is a very important CSS function. It can be used to highlight text, table-cells, divs, images and much more. Without it websites would be very bland and boring.
Unfortunately, there is an IE6 hover problem which greatly affects how we can use the :hover pseudo class.
The slideToggle() effect and the toggleClass() attribute are very useful jQuery tools. I will show you how to quickly implement this into your website and perhaps give you ideas on how you can add this to your already existing websites.
For my first tutorial, I have decided on building a simple, yet awesome navigation menu using CSS sprites. After we are done with this I will add a bit of jquery code to give it a visually appealing fade effect. I have included the .PSD file I created in the download under the images folder to make it easier for you to create your own Fading Navigation Menu.