Image Fade Revisited | jQuery for Designers - Tutorials and scre. Watch the image fade revisited screencast (alternative flash version) QuickTime version is approximately 30Mb, flash version is streaming. View the demo and source code used in the screencast Also a side note about IE6 support: Side note: IE6 screencast (alternative flash version) Understanding the Problem So let’s break this down and see how it’s done.
The first thing I look for when understanding how a web effect has been achieved, is to look at what they’ve done when JavaScript is disabled. Since Dragon Interactive are using the effect for navigation, as I suspected, the effect degrades to…nothing. The second thing I’ll look at is the difference between the sent markup and the rendered markup. The key in their version is there is a new span within the hover area that isn’t in the sent markup. From this, we can see when the anchor is hovered over, the newly created span’s opacity is faded up and completes the transition effect. jQuery.
Horizontal Subnav w/ CSS & jQuery. Fancy Navigation with CSS & jQuery - Tutorial by Soh Tanaka. Superfish - Suckerfish on 'roids. Suckerfish Dropdowns - Two Level Bones - Keyboard Accessible. Welcome to the world of Perciformes - perch-like fish including the world famous Suckerfish Just press tab to cycle through menu items. (Or <ctrl> + down arrow in Opera - i.e. whatever you usually use on the keyboard to cycle through links.) Then try a standards complient browser, eg Firefox, with javascript off. Better than nothing? I think so. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suckerfish Dropdowns by Patrick Griffiths and Dan Webb.
Keyboard Accessibility by Matthew Carroll. Benefits of this solution: With javascript on: Menu is keyboard accessible. Possible disadvantage of this solution: You can use the keyboard and mouse at the same time, thereby being in more than one place on the menu. Changes from original 'Son of Suckerfish' menus: Uses ie5/mac javascript fixes from Uses additional javascript to select menu list items based on the properties of their child anchors (something you can't yet do in css).