Contents
How to use Superfish as a jQuery plugin?
To make this step easy, there are cross-browser CSS files for a variety of menu types included in the Superfish download. Link to the superfish.js file (after including jQuery) using a script tag in the head of your document. Call superfish () on the containing ul element. There are many options available to customise your menu.
Animations when showing submenus (and when hiding them, as of version 1.5.2). uses a fade by default but can be given custom objects to be used by the animate functions. The animation speed is also customisable. Keyboard accessibility. Tab through the links and the relevant submenus are revealed and hidden as needed
Learn how to create a menu dropdown on your website where your users can easily access their account dashboard, settings, password, and more. AboutPressCopyrightContact usCreatorsAdvertiseDevelopersTermsPrivacyPolicy & SafetyHow YouTube worksTest new features
How does Superfish work on Windows Phone 7?
On Android, iOS, Windows Phone 7 and IE10 (with touchscreen), first touch will open an associated submenu, second will follow the link. Mouse and keyboard accessibility works as normal.
How does Superfish work with hoverintent plugin?
Superfish 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.
As Ed pointed out it seems problematic to solve all the different superfish/css issues for a responsive menu. After looking through the options here and elsewhere I found a Pure CSS responsive menu which has been quicker and easier to modify than superfish, and does not have the overheads of jquery or javascript. It also has second level menus.
Dropdown menus don’t work well on mobile. I would suggest hiding the superfish menu on mobile and replacing it with something else. For others looking for a solution, make sure you are using the newest jQuery. I had some older sites where I found using a newer version of jQuery made the Superfish menus work on mobile devices.
The CSSscript.com version (link above) gives a horizontal responsive layout for mobiles, unlike the codepen demo page. The code is in a single HTML file which you can easily split into a linked CSS file, only 2 media queries manage the responsive changes and even then only with minimal changes.