joeldbirch / superfish

Superfish is a jQuery plugin that adds usability enhancements to existing multi-level drop-down menus.

jQuery Superfish Dropdown Menu Plugin

Our favourite aquatic superhero returns from his sojourn across the galaxy infused with astonishing, hitherto unseen new powers. In his modern incarnation (wearing a rather spiffy cape) Superfish is dedicated to keeping dropdown/flyout menus accessible across browsers great and small, in addition to adding support for newer touch devices (running Android, iOS, Windows, etc). All this and a pretty face.

Documentation and Demos

Please use the existing Superfish documentation where you will find full explanations of the customisable features and plenty of examples to get you started.

Download Superfish zip archive

Need help?

Superfish menus have been in use since the dawn of time (well, around 8 years or so) and many are the places where you can find help with your Superfish implementations. Check out the support options.

superfish's Issues

Bug with "useClick:true" in Firefox

There is a issue with versions 1.5.12 and 1.5.13 when using "useClick: true". On first click, sub-menu appears just for a moment and then closes. After that menu is working ok, issue occurs only on first click after page loads.

Problem occurs only in Firefox and IE9 (don't know for other IE versions), while in Opera, Safari and Chrome everything works right. Tested under Windows 7.

Problem could be in the line 123. Menu works fine when I change this line as follows:
$liHasUl.not('.'+c.bcClass).children('ul').show().hide(); // -
$liHasUl.not('.'+c.bcClass).hideSuperfishUl(); // +

Please check at jsFiddle http://jsfiddle.net/dariodev/wwPdY/15/

Suggestion: instant transitions when moving to sibling elements

With the hoverIntent plugin, menus are not shown as you move your mouse over the menu. That's great when the menu is not open, it prevents it opening unexpectedly. However, if you are over the first (top-level) item, then move right to the second item, you still get the delay.

If the menu is already open, I feel that staying within the menu shouldn't use a delay. (This would only for the top level horizontal menu, on the vertical sub-menus you're gonna get the 'diagonal problem'.)

hoverIntent required for touch in IE10 and certain Android browsers

Rolling #29 and #24 into one issue.

Looking for an elegant fix for this issue. It will likely hang around for a while. Feel free to have a go at solving it for me!

Behavioral inconsistencies across browsers with useclick

There are very distinct behavioral differences in 1.6.2 with the way a user interacts with useclick menus in Firefox vs Chrome (or other webkit based browsers I suspect)

FF - Click opens a menu / sub menu ... to close a menu you can click "outside" the menu structure and any that were open will then close

Chrome - click opens a menu / sub menu ... to close you must click back on one of the menu parent items that opened the menu, clicking "outside" the menu structure leaves them open on the screen.

I think most people are used to clicking outside of a menu structure to clear / abort an action, as such the behavior in FF seems more normal to me, but perhaps the chrome was is correct.

Either way the menu behavior should not be browser specific.

Opening/closing animations are sometimes skipped in IE8 and below

Opening/closing animations are sometimes skipped in IE8 and below. Submenus always open and close properly, but sometimes the open/close is instant (or rather, after the length time it would have taken to animate). IE9 and up are fine.

Remove useClick feature?

I'm regretting adding the useClick feature as it increases the complexity of the code and eats up development time that I'd prefer to spend focussing on hover events (plus touch and keyboard support, of course), which is truer to the mission of Superfish.

I think it would be a better idea to have a separate click menu plugin, allowing me to remove some complexity and bloat from Superfish and making room for further enhancements. I'm not seeing much benefit of having both click and hover capability in the one plugin, and the amount of if (o.useClick) {… forks that keep needing to be added is telling.

I'd really appreciate hearing some opinions on this.

IE... always IE

Sub menu appears with a bullet on the left and are scaled down.... it magically getting back on :hover... strangely, it doesn't do this on your demo... did you use a workaround to get rid of it?

Feature Request: jQuery-menu-aim

All the super cool awesome kids are using jQuery-menu-aim.js. Maybe this is something that could be added into superfish?
https://github.com/kamens/jQuery-menu-aim

Problem with useClick: true

If i use useClick: true i cant click all links that contain other links.

Example:

Site 1 (click to open sf-menu)

• Site 1 (cant click here)
• - Site 1 - 1 (can click)
• - Site 1 - 2 (cant click here)
• - - Site 1 - 2 - 1 (can click)
• - - Site 1 - 2 - 2 (can click)
  ...
  Same in your example-page...

Supersubs auto width

I read that you removed the use for supersubs by making a css adjustment.

I have a vertical menu - and use supersubs to also autosize the FIRST LEVEL of the menu.

Is there some similar css change that can be made to make the first level not wrap and be the correct width without using supersubs?

Is the Supposition plugin completely abandoned?

Having menus fly outside the viewport. Discovered the old Supposition plugin.

http://users.tpg.com.au/j_birch/plugins/superfish/supposition-test/

I tried using it with SF 1.6.9 and got an error(Uncaught TypeError: Cannot read property 'onInit' of undefined ) which was completely beyond my JS knowledge so I just gave up. I suppose its just obsolete.

Any chance it could be brought back to life? Did it ever get beyond the initial bugs?

useClick mouseOut delay

If menu was opened by click and user mouseOut, you can try add the feature to hide with some predetermined delay or 0 to infinite, its a good incr (or too you can do, if click in another element hide, all with options).

Server error on zip download

Can anyone guess what is going on with the zip download? The last tag where the zip archive was downloadable is 1.6.2. Seems like it's throwing a 500 server error?

Have pointed the zip link on the readme to an alternate server for now. Halp?

useClick problem in IE9 and Firefox

I am noticing that the new useClick option has an issue in IE9 and Firefox. On the very first click, the dropdown menu is show and hidden immediately. On subsequent clicks, it behaves as expected. This can be seen on the Superfish examples page under the "require click" tab.

Issue when used on a tablet

I have been trying to get this to work when accessed on my iPad and it doesn't seem to work because there is no "hover" on the iPad. It is all touch.

The problem appears when trying to get to the sub-menus. The menu does open; however, the page also immediately tries to access the page in the "href" of the parent menu that was clicked on. On the reload it closes the menu. Had the same issue in some browsers on my Mac if the menu was clicked on instead of just being hovered over. (Not a PC user so not sure about that)

FOUND A FIX:
In the parent menu don't include an "href" at all. Change <a href="#"> to <a>
Doing so ensures that no action to go anywhere is given to the browser so nothing happens except for the sub-menu loading (as desired)

Bug Report - Can not use "without submenus" or "with single submenu"

Hi,

Generally we are using superfish on dynamic menu system. and if you do not use sub-menus getting an error..

TypeError: o is null
not = (o.retainPath === true) ? o.$path : '',

example link for this issue

also, if you want to use one submenu. getting same error again, you can see this issue from here

Sorry for my english, you will understand the issues from links..

Regards, Codestar

Page reloads on iOS every time tab is switched or phone is turned on

Either (a) press power button to 'lock' phone then unlock again; (b) switch tabs, or even just press the tab button and go straight back to the page again. The page reloads when it shouldn't need to.

I saw there is a location.reload at the bottom of the code, with the comment "only way to reset subs after back button click" so I guess it's there to fix a separate issue? I tried removing that reload call and the menu seems to work fine with the back button and tab switching etc.

Navbar always stay at the first menu set

Vaguely remember this was not the case in the older version (though in the demo site it works), but the archive I downloaded doesn't work.

Please see the example below.
"current" class added and navbar always stay at the first menu set when the current page is Menu2. I guess this is because Menu 1 and Menu 2 both have the "current" class so even though the current page is Menu 2 its navbar is covered by Menu1's.
http://bit.ly/ZB6L7A

No "current" class added - navbar doesn't show.
http://bit.ly/16ybcpT

Thought that superfish script auto inserts "current" class but it doesn't have one.

Conflict with Title Tags - Menu Parameters (System)

So we're trying to change the page title for our menu items in joomla 1.5 (using the Parameters (system) Page Title) Under the menu item.

Anyway we have a number of menus and we are able to change every single item so we can customize the page title.

However our one menu that uses your superfish module, will NOT show our custom Page Title that we have in under the menu.

For example on this page: https://www.ocramps.com/quarterpipes.html

YOu will see the page title as Quarter Pipe Ramps - OC Ramps. Which is just generated via article title and sh404sef site wide.

Anyway under Parameters (System) for that menu item we put it, "Halfpipe, Ramps, Mini, For Sale, Skateboard, Portable, BMX"

It's almost as if the superfish menu module is ignoring that field in the menu item which is not allowing us to display the customized page title.

Llike I said we have about 6 other menus and all of them are displaying correctly.

Any ideas?

Thanks!
Gene

Provide a destroy method ?

Hey,
What do you think about a destroy method being added to superfish (remove the data, classes and arrows added by superfish).

I think it would be helpful in some cases.

So what do you think ?

Conflict with WP admin bar

Hi Joel,
I've been using Superfish for years and I'm happy to see that you are continuing to update the plugin.
There is compatibility issue with WordPress admin-bar (wp-includes/js/admin-bar.min.js?ver=3.5.1). When the user is logged in (and/or the admin bar is turned on), menus are not opening on mouseover. Menus are opening only on mouse click (but not behave as intended) , even if "useClick" is set to false. Only if "useClick" is true, then menus are working good. And again, if WP admin bar is off, everything (useClick false/true) works great.

IE 10 and Touch

Using a default Wordpress Genesis theme implementation of Suckerfish and Superfish. Manually upgraded to 1.5.9, called in new hoverIntent.js.

Works fine with mouse/hover on IE, FF, Chrome, Safari. Win8/Win7

Works fine with touch methods on Chrome, Safari Firefox (edit, just tested, does work with FF and touch) on Win8/iOSx

Win8/IE 10, on Surface Pro tablet, the menus do not open unless you leave your finger pressed on the top level href. If you take your finger off, it immediately closes. If you leave it on too long - it triggers the "copy/paste" pop up in Win8/IE10. The menu stays open while the copy/paste dialog is up. Not useful, but it's happening.

Both metro and desktop versions of IE 10, for reference.

Tried using the sf-touchscreen.js from Drupal, didn't have any affect.

If I am missing something, please point me in right direction. If not, and it's a bug, have fun :). I sadly won't be any help, JS is not my thing.

IE8 and 1.5.2

I installed 1.5.1 on a site yesterday. Worked well, so I came back today to grab code and install on 2nd site. Client gave reports of trouble in IE8, no menu on hover, only on click. It took me a while to realize I had installed 1.5.2 on the 2nd site today and when I switched back to superfish.js v1.5.1 it solved the IE8 issue. Checking on your example page, I also have the same issue in IE8. Nothing happens on mouse over and I get the following:

Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; GTB6; .NET CLR 1.0.3705; .NET CLR 1.1.4322; Media Center PC 4.0; .NET CLR 2.0.50727; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729; .NET4.0C; MSN Optimized;US)
Timestamp: Wed, 13 Feb 2013 22:33:05 UTC

Message: Member not found.

Line: 2
Char: 40730
Code: 0
URI: http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js

Message: Member not found.

Line: 2
Char: 40730
Code: 0
URI: http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js

No animation on first few hovers

jsFiddle example: http://jsfiddle.net/eHAtY/embedded/result/

If you hover each menu item they appear instantly as if there is no Superfish running. But once you've moved on and off an element a few times, it starts working as normal! No errors in the console.

Touch interaction on Android isn't working

On Android (Galaxy S3), the first touch opens a sub-menu and then immediately follows the link that was clicked.

I tested with the stock css file using a variety of browsers.

Issue #24 gave me the idea to try enabling hoverintent and that fixed the issue with a few browsers.

Touch doesn't work

• Dolphin
• Firefox
• Firefox Beta
• Opera Mobile

Touch works with hoverintent enabled

• Chrome
• Chrome Beta
• Opera Beta

First dropdown level always expanded

Hi, I need help.
I want to set the first level ul opend, even if it's home page or any other that isn't in the menu.
I've tried to set this by "active" class to the li element but seams it strips it off. Here is screenshot, this is when some item is selected, thats how I would like to be on any page thats not on the menu.
Thanks in advance.

Feature request:

Requesting a feature to be able to set the menu to require a click to open submenus.

Full-width horizontal menu(navbar)

Hi
these is more a improvment suggestion ... couldn't find a better way to propose it.
I, as many others as I have seen, stumbled upon the necessity to have the menu drawn at a certain "fixed" width (fill the whole size of the header for example) but don't "want" or can't set fixed width on the first level elements

a few tricks pop-ed .. using display:table, display:table-cell ... was a good one, to bad that the IE doesn't support it on the older versions, I've toked as final solution to run a loop and increase every "first level element" by 1px until the full size is achieved.

Today an another solution came into my mind, starting from the first "solution".
I've used a table for the first level and maintained the ul+li approach for the other subMenus,
the important thing was that the js and css code needed very little changes.

at http://jsfiddle.net/rZ5mY/3/ is a working copy
using jQuery 1.9.1 and your latest release

Hope it's any good and may could be useful to someone else.

Have a nice day

Rollover on menu craps out in versions 1.6.0 and beyond

Hi there. I know this will be difficult without html files for examples, but something changed between 1.5.13 and 1.6.0. With version 1.6.0 and beyond, I get "retainpath is null or not an object" in ie 8 - line 176; this raises the debugger. The same code yields 'o is not an object' in firefox - line 175. Snippet is below:

175 o = sf.getOptions($$),
176 not = (o.retainPath===true) ? o.$path : '',
177 $ul = $$.find('li.'+o.hoverClass).add(this).not(not).removeClass(o.hoverClass).children('ul'),

Sub-menu links not working, assistance required.

Hello,

I am developing a website and i was trying to set up a superfish menu.

1. The link on my <li class="sub-menu"> does not work on the first left click of the mouse, it opens on the second click though.
2. Links related to sub-menu items do not work at all, if I click once they do not open, if I click a second time, the link related to my <li class="sub-menu> opens.

This is my superfish.js

@import url(http://fonts.googleapis.com/css?family=Anton); nav{position:relative;margin:27px 10px 1px 10px; }.sf-menu ul{ position:absolute;top:-999px; display:none; }.sf-menu ul li{ width:100% }.sf-menu li{ float: left; position: relative; font-family: 'Anton',sans-serif; width: 188px; background: #14361d; text-transform: uppercase; z-index: 1; -moz-transition: all 0.4s ease; -webkit-transition: all 0.4s ease; -o-transition: all 0.4s ease; }.sf-menu li.sub-menu:after{ display: block; position: absolute; content:''; width: 5px; height: 5px; top: 50%; left: 70%; margin-top: -1px; background: url(../images/i.png) 0 0 no-repeat; }.sf-menu li:first-child{ width: 188px; }.sf-menu li:first-child>strong{display:none; }.sf-menu>li>a{ display: block; text-align: center; position: relative; font-size: 20px; line-height: 1.2em; padding: 32px 0 32px 0; color: #fff; overflow: hidden; }.sf-menu li a strong{ display: block; position: absolute; width: 100%; top: 0; left: -100%; right: 0; bottom: 0; z-index: -1; background: #206c15; -moz-transition: all 0.4s ease; -webkit-transition: all 0.4s ease; -o-transition: all 0.3s ease; }.sf-menu>li a:hover strong,.sf-menu>li.current a strong,.sf-menu>li.sfHover a strong{display:block;top:0;left:0;right:0;bottom:0; }.sf-menu>li:hover>strong,.sf-menu>li.current>strong,.sf-menu>li.sfHover>strong{display:none; }.sf-menu>li,.sf-menu>li.current,.sf-menu>li.sfHover{}.sf-menu>li>a:hover,.sf-menu>li.current>a,.sf-menu>li.sfHover>a{text-decoration:none; }.sf-menu>li>ul,.sf-menu>li.sfHover>ul{ left: 20px; top: 87px; width: 126px; padding: 25px 0 25px 0; z-index: 99; background: #14361d; }.sf-menu>li>ul>li{display:block;width:100%;text-align:left;padding:4px 0 4px 27px;background:none;font-family:Arial,Helvetica,sans-serif;position:relative;}.sf-menu>li>ul>li>a{ font-size: 10px; line-height: 20px; display: inline-block; color: #FFF; }.sf-menu li li a:hover,.sf-menu li.sfHover li.sfHover>a{ color: #206c15; text-decoration: none; }.sf-menu li.sfHover li.sfHover:after{display:block;position:absolute;content:'';width:5px;height:9px;content:'';left:166px;top:15px; }@media only screen and (max-width: 995px) {.sf-menu li{ width: 149px; }.sf-menu>li:first-child{ width: 152px; }.sf-menu>li>a{}}@media only screen and (max-width: 767px) {nav{float:none;font:12px/15px Arial,Helvetica,sans-serif;text-transform:uppercase;color:#fff;padding:8px 3px 5px 3px;margin:13px 10px 0 10px;border-radius:4px;display:block;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box; }nav:before{content:'Menu:';display:none;margin-bottom:5px; }.sf-menu{display:none;}nav select{ font: 12px/15px Arial,Helvetica,sans-serif; color: #b4bb92; outline: none; border: 2px solid #9e9e9e; border-radius: 3px; display: block!important; width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }@media only screen and (max-width: 479px) {}
And this is the piece of HTML

                <ul class="sf-menu">
                    <li class="current"><strong></strong><a href="index.html"><strong></strong>Home</a>
                    </li>
                    <li class="sub-menu"><strong></strong><a href="about.html"><strong></strong>About</a>
                        <ul>
                            <li><a href="#">history</a></li>
                            <li><a href="contacts.html">contatti</a>
                        </ul>
                    </li>
                    <li><strong></strong><a href="products.html"><strong></strong>Products</a></li>
                    <li><strong></strong><a href="index2.html"><strong></strong>Services</a></li>
                    <li><strong></strong><a href="#.html"><strong></strong>Store</a></li>
</ul>
                        <div class="clear"></div>
            </nav>

Can you help me fix this issue please?

Replace arrow image with CSS triangles

Replace arrow image with CSS triangles

I have a branch that replaces the autoArrows feature with cssArrows. It uses pseudo-elements to generate CSS triangles on a.sf-with-ul elements. The .sf-with-ul classes will still be applied automatically by Superfish upon initialisation (as per usual) as a styling aid.

Pros:

- Arrow spans will not longer be inserted into anchors, which is a slow and noticeable JavaScript process on menu initialisation. - Removes extra http request for arrow image. Better performance. - Easier to alter arrow colour compared with editing an image.

Cons:

- IE7 will degrade to having no arrows as it does not support pseudo-elements.

I'm happy with IE7 degrading like this, but I'd like to get feedback before I release this change. It would be a "breaking change" for existing menus as they would require the arrow CSS to be updated to match the newer version, so I think I would release this new feature as part of Superfish v1.7.0.

Thoughts? Objections?

useClick Won't Close Submenu

In Webkit (Safari & Chrome), setting useClick to true will not close the submenu when you click outside. Submenu will only close if you click the parent menu.

http://users.tpg.com.au/j_birch/plugins/superfish/#sample6

Secnd level Submenues don´t show in Chrome and Safari

Hi there,

I recoginzed a strange thing with the second level submenues in Chrome and Safari.

When I use the default

jQuery(document).ready(function(){
jQuery("ul.sf-menu").superfish();
});

Everything is just fine and works as expected. But when I change it to

jQuery(document).ready(function() {
jQuery('ul.sf-menu').superfish({
delay: 300,
animation: {opacity:'show',height:'show'},
speed: 'fast',
autoArrows: true
});
});

The second level of the submenues are not displayed in Chrome and Safari but they are displayed in Firefox.

Any ideas?

Thanks in advance and thanks for your work

Cheers
Michael

Dropdown menus fade away

http://www.marathonproducts.com/company.html
I thought I got this to work but after a few minutes, the menus fade away and drop behind the image. Also, if I click a link and go back, the menus don't work right. I am not good at understanding jquery and struggle with CSS. The CSS code I adapted from the SitePoint CSS3 Anthology. I added the z-index to get it to show upon top.

Different Arrows For Multiple Menus On Same Page

We use a primary "admin" menu at the top of the page and then use our standard menu "bar" with grids and other objects on the pages. Each is styled differently but can't seem to get this to work "out of the box."

The top "admin" menu only uses the right arrow (>) on the child/sub menus, e.g., menu 1 has child menus that also have sub menus like sub 1 and sub 3:

menu 1          menu 2          menu 3
  sub 1 >
  sub 2
  sub 3 >
  etc.

The menu "bar" that's used with other objects like grids, uses a different styling but only uses the arrows (down arrow v) on the top-level menu, e.g., menu 3 below would have a sub menu:

menu 1      menu 2      menu 3 v      menu 4

CSS is not my strong suit, so I wasn't sure how to get the different arrows working. It seemed that I had to update the superfish.js code to do this. So here's how I accomplished this.

1. I created separate CSS files, i.e., superfish-adminmenu.css and superfish-menubar.css

2. In each one, I renamed sf-sub-indicator to a respective name like sf-menu-bar-sub-indicator for menu bar and so on

3. I updated superfish.js as follows:
   $.fn.superfish = function(op) {
var setArrowClass = op && typeof op.arrowClass != 'undefined' && op.arrowClass != "" && op.arrowClass != null;
var sf = $.fn.superfish;
if (setArrowClass) { sf.c.arrowClass = op.arrowClass; }
var c = sf.c,
$arrow = $('  '),//»'),
... (I also added arrowClass to defaults)
sf.defaults = {
hoverClass : 'sfHover',
arrowClass : 'sf-sub-indicator',
pathClass : 'overideThisToUse',

4. I updated the call to superfish as follows in our code:
   .superfish({ arrowClass: 'sf-menu-bar-sub-indicator',speed: 'fast', delay: 50 });

This is working like we need. So I guess my question is, is this the best way to accomplish this? If we can do this using the superfish menu "out of the box" how do we do that? Thank you very much.

Suggestion: Use Arrow as Tap Target

Tap Link -> follow the link URL
Arrow -> use as the tap target to open submenus

Problem with Supports touch devices (Windows 7.8 Samsung Omnia 7)

Testet the touch devices Support with:

• Nexus 7 Tablet -> Works great!
• Samsung Omnia 7 Windows Phone 7.8 -> Doesnt Work (If i click a link in sf-menu that contains child links it refers me to that link instead of opening the submenu...

Suggestion: is it possible for suckerfish to use jQuery. instead of $, ?

First I want to say thanks for an excellent jQuery plugin!

I'm successfully using superfish together with jQuery.noConflict() - (just had to replace $. with jQuery. in superfish.js). And I thought it would be great if its possible to replace this in the official superfish.js!

Fatal Error

After installing and publishing the module, all I get is this:

Fatal error: require_once() [function.require]: Failed opening required '/home/bedsfork/public_html/site/modules/mod_mainmenu/helper.php' (include_path='.:/usr/local/php53/pear') in /home/bedsfork/public_html/site/modules/mod_superfishmenu/helper.php on line 3

Any thoughts?

Uncaught TypeError: Object [object Object] has no method 'tooltip'

Hi joeldbirch, first you have a great extension! It's the best between non-comercial extensions in joomla site.

I have a problem with your extension. After install and configure in Joomla Module, some of my menu items are hidden, doesn't appears in my blog site, but when I open Google Chrome Debug I can see all hidden items. They simply are not shown.

In Chrome Console I can see this error: (msg) => file:line

Uncaught TypeError: Object [object Object] has no method 'tooltip' => localhost:156
(anonymous function) => localhost:156
k => jquery.min.js:2
l.fireWith => jquery.min.js:2
p.extend.ready => jquery.min.js:2
D => jquery.min.js:2

This problem appears if I put the menu module type in JQuery, but if I change to CSS it works well, but without the arrow in submenu and without smoothness effect.

I tested in localhost and Production Server... same error in both.

My system has:

• Joomla 3.0.3
• WAMP in localhost and mysql, apache and php in production server
• Superfish Menu for Jooma 3.x: http://www.jtemplate.ru/en/my-work/free-extensions/37-superfish-menu-module.html
• JQuery 1.8.1: I saw this version number in jquery.js files within my site

Can you help me with this problem??? What can I do to correct this issue?

Thank you

Elder Souza

Bug(s) with "useClick:true" 1.6.0

Using the example page at http://users.tpg.com.au/j_birch/plugins/superfish/#

1. Chrome 25:

• Flush cache ;)
• Go directly to require click tab
• Select a menu item
  • Select one of the resulting menu items that has an additional menu (a 2nd level menu)
• Click outside of that menu ... they never close ... e.g. two levels of menu stay open on the screen

2. FF 19:

• Flush cache
• Go directly to require click tab
• Select a menu item
  • Select one of the resulting menu items that has an additional menu (a 2nd level menu)
• Works as expected
• Do it again and the 2nd level menu simply appears and disappears

IE event order causing useClick to be buggy

IE's weird event order causes the new useClick option to be very buggy. Affects all versions of IE, 6 to 10. I'll be chipping away at a solution, but for now, you should avoid useClick.

Touch interaction in IE10 only works if hoverIntent is used

I'm working on it.

Turn Off Hover on Ipad and Iphone

Hi Joeld, I just had an error with superfish when test it on Ipad. I can't turn off the drop down menu after click it. Please help me fix this error.

Thanks!

Sueprfish/Cart Site jQuery conflict?

I have two sites that are running Superfish (Joomla 2.5). Both home pages are having issues with their drop downs 'popping' in Chrome. Meaning, if you hover over the main menu, the drop down pops and attempting to hover over the submenu item, the menu disappears.

This DOES NOT happen in Opera, FF, IE, or Safari. Only Chrome.

I first thought that it was a jQuery conflict so I tried a combination of things. The only things that I noticed was that when we were able to go to an internal page that was a cart page (Virtuemart 2), the submenu hovering didn't have any problems. Only on the home page (which is not a VM page) and other internal pages that were not running VM.

I've tried disabling/enabling jQuery in a variety of ways, but still cannot get the main menu's submenu on the home page to work in Chrome.

Solution? Or is Chrome still too new? I would find that hard to believe because I have a other sites running Superfish very well in Chrome but I cannot figure out how to fix this one.

Drop Down Question

Superfish is used in a template I'm working on, but the template uses an older version, 1.4.8. I tried adding your updated version, and the patch, to the js folder and updated the link to it, but the template has the CSS customized. Please let me know, does your new version have coding for more than one drop-down level? I can't tell if this is a CSS issue or if I need to completely change the template over to your updated version. As a newbie, I'm not sure if I need to redo the template's customized version of your CSS. I would really appreciate any help. (I'm not using IE but Safari.)

Right aligned navi

First of all: thank you for this great tool!

Problem:
I use it on a navigation wich is aligned to the right.
The last menu-entry has a 2nd level. It's child moves to the right out of the vision if i hover over it.

Question:
How can i fix this dynamically (my cms provides a class-name for the last-child of the menu-entry)?

IE10: Submenu Disappears

Browser: IE10
useClick: true
Sample: http://users.tpg.com.au/j_birch/plugins/superfish/#sample6

Case 1:
When you click the parent menu, the submenu open and then closes immediately.

Case 2:
Subsequent clicks on the parent menu will behave as expected.

Case 3:
When you close the submenu by clicking outside ( means not clicking the parent menu ), Case 1 will occur again.

Different Font Size Support

When starting to use this library a year ago, I ran into issues because the code that figures out what the width should be based on the font-size expects the font-size to remain consistent on all levels. The code essentially just does one check on the root menu items to get their font-size and uses that size throughout the code. Our use-case has the main menu items in a larger font-size than the sub-menus. To get this to work, I had to modify the supersubs.js file to do a check for the font-size on each sub menu. I moved the code that determines the font-size inside of the $ULs.each loop and appended to the $ul DOM node instead of the $$. Looking in your current code-base, it looks like I moved lines 29-39 to right after line 42 (changing the $$ reference to $ul). I'm hoping that this change can make it into the code base so that we don't have to modify it each time we upgrade to a new version - and hopefully help other teams who have a similar situation.

Mouseover Not Responding

Hey guys,

I implemented the superfish drop down menu about two months ago, and I've experienced no problems until a few days ago. I recently purchased a Windows 8 ultrabook with Chrome Version 26.0.1410.43 m and FireFox Version 20.0, and, making no changes to my code within the past two months, I have noticed that my drop down menu no longer responds to hovering over the parent element of the drop down. IE 10 works fine on my ultrabook as does the same versions of FireFox and Chrome on other devices.

I inspected the element in Chrome and noticed that the "mouseover" feature is missing under the "Event Listeners" tab. I wouldn't consider myself a javascript expert, so I'm not 100% if this is the issue, but it definitely raised a red flag for me. Does anyone have an idea of what might be the problem here?

My website is: http://www.ryan-taylor.me/ The issue is over the "Portfolio" tab.

Any feedback would be greatly appreciated!