I have been thinking about it for some time and here it is. Although it is not very usable with most of the default Drupal themes, it certainly could. Currently it looks OK only in Bluemarine and Pushbutton themes. However, it doesn't clear the floats (?) and this is why other element over lapses the menu and the superfish-navbar menu type looks seriously corrupted.

The script as well as some examples of its usage are available at http://users.tpg.com.au/j_birch/plugins/superfish/.

My patch adds 3 new menu types (superfish-horizontal, superfish-vertical and superfish-navbar), moves conditional JS and CSS loading theme_nice_menu() as it seems that caching is disabled for the module and adds some information to the block configuration form as well as to the README.TXT file.

Apply it with patch -p0 < nice_menu_superfish.patch.
Progressive (that is without JS it still looks and behaves as a Nice Menu) enhancements provided by the Superfish script:

  • dynamic width of the menu items
  • animation of the dropdown
  • shadows in all browsers except IE 6
  • hoverIntent plugin allows a delay of mouseover and mouseout events to avoid accidental vanishing and appearance of the menus

It certainly needs some further work. TODO:

  • make some kind of CSS reset for nice_menus to allow it to work in all themes
  • detection if the Superfish script is available
  • better customization
  • better documentation
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

add1sun’s picture

I haven't had a chance to look at the patch yet, but real quick does it work in the direction of #220443: Add an option for configurable JS? That is, is this a dupe and the patch should be attached there or is this doing something totally different. I'd like anything that adds "extra" JS to be done in line with optional, configurable JS.

domasj’s picture

At the moment the patch doesn't use any CSS or JS from the Nice Menu module. When set to superfish-* mode it uses only the HTML markup that the modules generates, it is styled with CSS from Superfish package and, if available, enhanced by some JS magic. The thing is that almost everything is provided by Superfish package. Thus, in the end we should end up with less code to manage with greater results.

It is certainly a matter of discussion and everyone who has sane ideas should step in if it's of their interest to have and give back nicer menus in Drupal ;)

higherform’s picture

+1 ... I really like the accessability of nice menus, especially in the mobile browser environment, but having the mouseout delay of superfish would be a 1000x improvement

Idea on strategy (no idea if this would work as I have not torn into the code yet):
1. Nicemenu html render, with its CSS selectors, etc.
2. JS "Bridge" functions add/replace Superfish selectors for each Nicemenu CSS selector
3. Then fire/allow real Superfish to work on the modified menu DOM / CSS selectors...

I think this would allow it to continue to "fail gracefully" to Nicemenu functions, but give us the most immediate benefits of Superfish (mouseout delay).

higherform’s picture

Good news:

I dropped a down nicemenu into the superfish menu region of the pixture_reloaded theme.... worked perfectly, kept the nicemenu CSS, added the mouseout delay and everything... so maybe this is a lot more simple of a problem than we thought. I suggest taking a look at what that theme does for that region and simply having the nicemenu blocks do the same thing...

add1sun’s picture

Yeah, honestly i would prefer to not have a whole separate "mode". The HTML and CSS should "just work" and the JS should add (optionally) extra stuff. If the Superfish CSS works better than the Nice menus CSS, I'm open to swapping that out. Actually I just looked and it seems that Superfish is just a jQuery script that comes with CSS if you need it but that basically it should work by adding on features to any working CSS menu. So I think this would be an easy thing to simply add the Superfish code with a checkbox to "use Superfish JS" and just make any minor tweaks as needed in the default nice menus code so that Superfish has its hooks.

I'd rather not replace the CSS wholesale because many people have built and customized on the existing CSS so upgrading would be a nightmare if all the selectors changed on them suddenly.

To be clear on how to make a patch to get this in to the module:
- Add the Superfish JS
- Add a checkbox in the admin for people to enable it
- When the checkbox is checked pull in the Superfish code with drupal_add_js
- Make sure it doesn't blow up the nice menus JS (or see if it can replace it, etc)
- Tweak the nice menu selectors, if needed, so Superfish can find what it needs to work

higherform’s picture

Additional items to hang on add1sun's list:

- Add the Superfish JS

And be sure to include the "Fire Superfish on document ready" code (taken from Pixture Reloaded theme I think):

      <script type="text/javascript">
      $(document).ready(function() {
        $('#superfish-inner ul').superfish();
      });
    </script>

Plus wrap the entire menu system with the following two divs:

          <!-- Primary || Superfish -->
          <div id="superfish">
            <div id="superfish-inner">

- Add a checkbox in the admin for people to enable it

I agree this should be an option, but probably enabled by default?

- When the checkbox is checked pull in the Superfish code with drupal_add_js
- Make sure it doesn't blow up the nice menus JS (or see if it can replace it, etc)

Yes, the Nicemenu CSS + SF JS + SF CSS play nicely, respects Nicemenu CSS pretty well. I think it handles the down/right arrow, padding, and column placement better with SF than Nicemenus alone.

- Tweak the nice menu selectors, if needed, so Superfish can find what it needs to work

Again, I dont think its much needed. If anything, perhaps prune the Nicemenu CSS to remove any conflicting or overridden selectors ?

torpy’s picture

Modified patch to work with drupal 5 if anyone's interested.

add1sun’s picture

Status: Needs work » Needs review
FileSize
2.31 KB
2.83 KB

OK, here is a patch against HEAD that adds the minimal Superfish along with a checkbox (enabled by default). Works fine with just the js file (which I needed to zip up to add to this issue since it is a new dir in the module). Testing IE would be great in addition to general testing, since it is using the base nice menus js.

To test this, apply the patch attached then unzip and add the the "superfish" dir inside your nice_menus folder (so that you will have nice_menus/superfish/js/superfish.js).

add1sun’s picture

Doh! I forgot to make the patch to include the new file in the top-level dir at least. Duh. Here is a new patch file. Use the same superfish zip from #8.

add1sun’s picture

Title: Superfish option to enhance look and feel of Nice Menus » Add configurable JS with Superfish

changing title

add1sun’s picture

Category: task » feature

marking this correctly as a feature request

higherform’s picture

Applied patch #9 with zip from #8 to:

  • 6.x-1.2
  • or to 6.x-1.3
  • works as expected in:

  • FF3.0
  • Opera 9.27
  • in Ubuntu/Gnome

    superfish does not seem to be applying in IEs4Linux IE5 or IE6 w/ recent wine, but does fail gracefully.

    with:

  • the IE6 JS, and
  • with, and
  • without some custom CSS applied on the theme global config page

    After further cross-browser checking, recommend commit to head.

    GiorgosK’s picture

    The patch against 6.x-1.2 and 6.x-1.3 was applied succesfully
    used this command patch -p0 < PATCHNAME.patch --binary

    tested in windows
    FF 3.0.4
    FF 2.0.0.18
    Opera 9.61
    Safari 3.1.2
    Google Chrome 0.3.154.9
    IE 7
    And it worked fine in all of them

    -----------------------

    In IE 6
    it falls back to plain old "nice menus" functionality

    but if you uncheck "Enable minimal JavaScript"
    it gets a perfect "superfish" behavior

    Is that the way it should work ??
    Shouldn't the "superfish" behavior take precedence according to this description ??

    This will add JavaScript Superfish effects to all browsers in addition to the minimal needed for Internet Explorer 6.

    add1sun’s picture

    Status: Needs review » Needs work

    Great feedback @GiorgosK, no it shouldn't work that way so having someone that can test that is great. I won't be able to work a new patch until this weekend. (It occurs to me that the three options should be radios and not checkboxes.)

    geerlingguy’s picture

    Subscribing. I would like to add a mouseout delay, as users with IE 7 are complaining about not being able to roll over children items.

    add1sun’s picture

    Status: Needs work » Needs review
    FileSize
    5.76 KB

    OK, still using the same superfish.zip file from #8, here is a new patch that makes the JS settings radio buttons. I've also added configuration for the mouse out delay and animation speed. This isn't really tested, so please test this out, especially in IE6. Also feel free to make suggestions for the text, like the help text for JS options.

    This patch is against HEAD.

    add1sun’s picture

    Hm, you know the more I think about this, I am tempted to remove the minimal option and just have JS on or off. Are there folks that feel that the "minimal - IE only" option is really needed?

    geerlingguy’s picture

    I would rather have it 'on or off'.

    marqpdx’s picture

    Just to add to the good news...
    I installed the patch as per #'s 8 and 9 above, and it worked flawlessly in
    FF3
    Chrome.

    Failed in stupid IE7 until i found that one cannot have more than 31 stylesheets, and this was 32 i guess. once i turned on css optimization in the Performance section of admin, it worked fine in IE too.

    Thanks!!
    great addition to a great module.
    m

    geerlingguy’s picture

    I can't get either of these patches to apply; it always fails... using Mac OS X/Terminal. I followed the directions in the handbook, on 6.x - 1.3.

    marqpdx’s picture

    hey geerlingguy,

    did you run the patch as noted in #13 above?

    says it runs on the 6.1.3 code...
    mind worked per #8 and #9 above.
    good luck,
    m

    geerlingguy’s picture

    I will try that... But you're saying use the command from #13, but with the patch from #8/9, right?

    [EDIT]

    Awesome! Works great, and now I have fading menus that don't disappear immediately after a mouseout. Very slick. When's this getting rolled into the main module?

    jannalexx’s picture

    nice_menu_superfish.patch
    superfish is working in 2.x, 2 errors in patch, had to be corrected manually, i do not know other patches if applicable to 2.x after main patch.
    I hope someone put all those in one place, probably 2.x version, seems pretty stable here
    nice..

    add1sun’s picture

    Well here is a new patch that simplifies a bunch of things by making a plain on/off toggle and replacing all of the existing NM js with Superfish (using the bgiframe plugin to take care of the IE select/z-index crap).

    I have not tested this new patch *at all* so please let me know if it works. I'll try to get to testing on my flight home later today. If this proves reasonable stable, it will go in to V2 in the next week - but I need testers.

    geerlingguy’s picture

    Will try to test this on Monday; can't do it before then, though :-(

    GiorgosK’s picture

    The patch against 6.x-2.x-dev was applied succesfully
    used this command patch -p0 < PATCHNAME.patch --binary (in windows)
    and had to update.php (since I was using older nice menus version)
    went in to admin/settings/nice_menus
    and checked "use javascript"

    tested in windows
    FF 3.0.4
    FF 2.0.0.18
    Opera 9.61
    Safari 3.1.2
    Google Chrome 0.3.154.9
    IE 7
    And it worked fine in all of them

    However I do not have IE6 at the moment
    (going to test it there soon)

    2 usability Comments

    "use javascript" can safely be the default right ?

    I think the arrows ">>" next to the menu items should
    be left to the template to implement or at least
    have a choice of disabling them from the options ...

    otherwise nice work, much appreciated

    add1sun’s picture

    "use javascript" can safely be the default right ?
    Yep, and it should be on by default. It should only be off if you had the Enable IE support off on a previous version. I didn't test the upgrade stuff, so I may need to tinker in there. On a fresh install it is on by default.

    I think the arrows ">>" next to the menu items should be left to the template to implement or at least have a choice of disabling them from the options ..
    The reason I removed them by default is that they conflict with the arrow images (conflict meaning "look butt ugly" when overlapping) that are part of the NM default CSS. I plan to add more things to tweak and config for Superfish once this patch lands, so I can easily add a toggle to turn those on if you want them.

    Thanks for the testing!

    imp7’s picture

    Thanks this is terrific, I just tested this with 6.x-2.x-dev in a vista local xampp
    FF 3.0.6

    It fades great only after the second hover over a menu item with children items. I don't see why it only fading after the second time.
    Is this the default behavior?

    I'll try testing on a fresh install later ...Cheers

    jannalexx’s picture

    patch is working, first version could use css from original superfish download itself and selection between methods, it is useful if we could select between old and superfish methods again (per nicemenu block option) and use alternate original css also.

    add1sun’s picture

    Sorry, I'm not interested in supporting two versions of CSS. If you want a pure Superfish menu, you may want to check out Lucid menu module. Of course, you can also always take the SF CSS and use that to override the NM CSS on your own too.

    imp7’s picture

    I just tried this again.
    - new drupal 6.9x installation on vista using xampp FF 3.0.6 / IE 7.0.6x
    - copied superfish directory http://drupal.org/node/322962#comment-1242185
    - patched nice menu files through eclipse inside vista, http://drupal.org/node/322962#comment-1242185
    - install patched nice menu module
    - js is enabled by default so upon adding header block its on straight away.
    But its the fade effect only works after the second time the menu item is rolled over.
    I don't know what else to try.

    jannalexx’s picture

    I will keep the 1st version patch as it implements both worlds ok. A want the old nm for the main navigation as it is fast for administration, for more end user tasks without many options I can use superfish, both with different css (no matter if hacked or not). In my opinion there has to be an option or at least emulation of the fast old one

    ...the fade effect only works after the second time the menu item is rolled over. thats true

    add1sun’s picture

    Hm, well the only CSS in the new patch is the "old" original NM CSS. It does not use Superfish CSS at all. The Superfish addition is just for the JS features.

    yeah, I've no idea why the fade only works the second time. I'll need to check the superfish issues about that maybe.

    add1sun’s picture

    Anyone been able to test this on IE6 yet?

    ridolfidesigns’s picture

    I patched it successfully. However, for some reason when I tried to enable the module I got this error: Fatal error: require_once() [function.require]: Failed opening required './sites/all/modules/nice_menus/nice_menus.install' (include_path='.;C:\php5\pear') in C:\wamp\www\drupal-6.8test\includes\module.inc on line 262.

    Was I supposed to enable the module and then patch the module?

    Thanks,

    Eric

    ridolfidesigns’s picture

    Not sure what I am doing wrong, everybody else seems to have it working. This time I enabled the module first and then patched it. Now I am getting this drupal error:

    * warning: include_once(./sites/all/modules/nice_menus/nice_menus.module) [function.include-once]: failed to open stream: Permission denied in C:\wamp\www\drupal-6.8test\includes\bootstrap.inc on line 601.
        * warning: include_once() [function.include]: Failed opening './sites/all/modules/nice_menus/nice_menus.module' for inclusion (include_path='.;C:\php5\pear') in C:\wamp\www\drupal-6.8test\includes\bootstrap.inc on line 601.
        * warning: include_once(./sites/all/modules/nice_menus/nice_menus.module) [function.include-once]: failed to open stream: Permission denied in C:\wamp\www\drupal-6.8test\includes\bootstrap.inc on line 601.
        * warning: include_once() [function.include]: Failed opening './sites/all/modules/nice_menus/nice_menus.module' for inclusion (include_path='.;C:\php5\pear') in C:\wamp\www\drupal-6.8test\includes\bootstrap.inc on line 601.
    

    Any suggestions would be appreciated.

    Thanks,

    Eric

    jcmarco’s picture

    I have tested it and it works fine.
    No weird messages and everything fine.

    ridolfidesigns’s picture

    So what did I do wrong? I didn't just pull that error message out of a hat.

    Thanks,

    Eric

    add1sun’s picture

    @ridolfidesigns, the "Permission denied" errors make it look like something changed perms on the dir or files? I don't know, but there is definitely some sort of local server issues with accessing the files it needs. No idea why exactly, but I am also not a guru with Windows or WAMP. :-/

    ridolfidesigns’s picture

    Thanks for the reply add1sun. I will look into my wamp configuration. I am new to php and drupal so I didn't realize it was a local thing, thanks again.

    Eric

    pjunker’s picture

    i get an error when i'm trying to apply the patch:

    patching file nice_menus.module
    Hunk #2 FAILED at 236.
    1 out of 2 hunks FAILED -- saving rejects to file nice_menus.module.rej
    add1sun’s picture

    @pjunker, it applies fine for me. Please make sure you are applying the patch against HEAD (6.x-2.x) and not the version 1 release.

    pjunker’s picture

    Thanks Addison! I really took the wrong version. Shame on me! It worked fine for me but i still have the problem if i am using a theme with a lots of floats and overflow:hidden (e.g. yaml) the Menu will be cutting off by the border of the sidebar. This problem is in every browser except the IE. In IE it works fine. I have played with the css of the theme and Nice Menu but I have no solution. Can anybody help me?

    add1sun’s picture

    Status: Needs review » Fixed

    OK, since I'm not really getting IE6 testing here, I've gone ahead and added this to HEAD. Please open new issues for problems or further feature requests now that the base, mostly working bit is in.

    http://drupal.org/cvs?commit=187852

    Status: Fixed » Closed (fixed)

    Automatically closed -- issue fixed for 2 weeks with no activity.

    pauln600’s picture

    I've been looking at the menu delay issue - one way to make the menu better behaved without js is to modify the css to overlap the edge of a submenu onto the
    higher level menu, which makes the menu much more tolerant of mouse action.

    Paul N.

    marktheshark’s picture

    Has anyone addressed the issue with super-fish delay working only after the second hover over the menu?

    rgracia’s picture

    subscribe