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.
As we all know too well, IE6 has many issues, one of which is the IE6 height problem. The outdated browser reads the CSS differently to the modern browsers, and it places emphasis on things that aren’t too important.
Use IE6 to view the demo
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.