Superfish
An enhanced Suckerfish-style menu plugin for jQuery.
Superfish is a jQuery plugin (tested to work perfectly with all versions of jQuery from v1.1.2 all the way to the current v1.2.2) that takes an existing pure CSS dropdown menu (so it degrades gracefully without JavaScript) and adds the following much-sought-after enhancements:
- Suckerfish-style hover support for IE6. The class added is "sfHover" by default but can be changed via the options object,
- timed delay on mouseout to be more forgiving of mouse-piloting errors. Default is 800 milliseconds but can be changed via the options object
- animation of sub-menu reveal. uses a fade-in by default but can be given a custom object to be used in the first argument of the animate function. The animation speed is also customisable but is set to "normal" by default
- keyboard accessibility. Tab through the links and the relevant sub-menus are revealed and hidden as needed
- New since version 1.1 is hoverIntent support. Superfish now automatically detects the presence of Brian Cherne"s hoverIntent plugin and uses its advanced hover behaviour for the mouseovers (mouseout delays are handled by Superfish regardless of the presence of hoverIntent). Using this is only an option, but a nice one. The examples on this page are using hoverIntent. If for some reason you want to use hoverIntent on your page for other plugins but do not want Superfish to use it you can set the option
disableHI to true
- New since Superfish version 1.2 is the ability to have the submenus that show the path to your current page remain open while the menu is idle. The easiest way to understand this is just to have a play with the horizontally arranged menus and submenus example (a two-tiered navbar).
- From Superfish version 1.3.2 you can add an optional callback function which fires each time a menu item has finished animating open. The 'this' keyword within your function will refer to the ul that just finished animating. From version 1.4 there are now three other optional callbacks allowing for further enhancements and functionality to be added without needing to alter the core Superfish code.
Superfish supports the same browsers that jQuery does. The plugin is issued under the same dual license as jQuery, so basically you can use it as you wish.
Download Superfish
Related categories:
Comments? Need help with a component? Use our forums for further discussions.
Posted on the 3rd of March at 11:22 pm
Component Categories
Recent jQuery
jQuery Categories
From the blog RSS
- Design Inspiration: European Graphic Design from 1950-1970
30th of May at 5:08 pm- Parsing Strings With jQuery
- 28th of May at 12:21 pm
- Modalpreview - Preview Your Comment in a Modal Window
- 19th of May at 8:32 pm
- Milestone 01 - 70+ High-End Components for Web Designers and Developers
- 13th of May at 9:52 pm
- Tripoli Beta
- 8th of May at 7:08 pm
- The Visual Active State: Popular Techniques and Examples
- 2nd of May at 7:34 pm
- Introducing the Lab
- 29th of April at 1:58 pm
- Useful jQuery: a Compilation of jQuery Utilities
- 23rd of April at 7:49 pm
DevKick News RSS
- 24 Kick Ass Portfolio Designs
- exactly.
17th of June at 9:07 pm- Using CSS to Fix Anything
- Noupe shares some quick tips on how to avoid easy pitfalls when creating your CSS layout.
- 17th of June at 11:14 am
- 2008 Design Trends
- So what's hot now' Pencil sketches, handwritten notes, card stocks, watercolor effects, collage art, script fonts, grungy and splatter ink backgrounds etc... Some nice visual examples.
- 16th of June at 10:04 am
- 10 Video Tutorials for Learning Basic Web Design Skills
- Some people can read instructions on how to do things and can immediately go out and do them without any problems. But others need to see things done before they fully grasp how to do them.
- 16th of June at 10:03 am
- UTF-8: The Secret of Character Encoding
- Character encoding and character sets are not that difficult to understand, but so many people blithely stumble through the worlds of programming without knowing what to actually do about it.
- 12th of June at 11:17 am
- jQuery UI v1.5 Released
- "When we first started with the UI project, we set out to build a generic, basic, and simple way of adding and extending core interaction to DOM elements. However, we soon found that our approach wasn't working for UI."
- 10th of June at 9:55 pm
- The PHP Benchmark
- The PHP Benchmark was constructed as a way to open people's eyes to the fact that not every PHP code snippet will run at the same speed. You may be surprised at the results that this page generates.
- 9th of June at 1:27 pm
- Introduction to CSS3 - What is it?
- This article marks the first of several, providing an introduction to the new CSS3 standard which is set to take over from CSS2.
- 9th of June at 9:24 am
- Planning a Semantic Web site
- This article leads you through the aspects of both information architecture and general infrastructure you need in place to truly take advantage of this burgeoning opportunity.
- 8th of June at 5:49 pm
- Why we skip Photoshop
- 7 reasons why the 37signals team skips photoshop.
- 8th of June at 8:25 am
From the lab
