collective.superfish 1.0

A suckerfish/superfish integration into plone

Contents

• What is it?

• How do i use it?

• Customization

  • Add portal_actions

  • Do not show arrows

  • CSS Styles

• TODO

• History

  • 1.0 - 2014-10-15

  • 0.6 - 2010-08-11

  • 0.5 - 2010-06-17

  • 0.4 - 2010-05-12

  • 0.3 - 2010-03-17

  • 0.2 - 2009-06-12

  • 0.1 - 2009-06-09

• Thanks

• Links

What is it?

collective.superfish integrates the jQuery Superfish plugin into Plone.

Superfish is a really nice solution for dropdown menus using css, valid xhtml and JavaScript which degrades gracefully if JavaScript is not available.

Attention!

Dropdown currently does not work on iOS devices. The hoverintent.js requires jQuery 1.9.1+ and Plone 4.3.3 ships with 1.7.2

see https://github.com/collective/collective.superfish/issues/1 for workarounds or use 0.X releases

How do i use it?

Hide plone.global_sections and replace it with collective.superfish in viewlets.xml somehow like this:

<!-- superfish: use superfish instead of global_sections -->
<hidden manager="plone.portalheader" skinname="MySkin">
    <viewlet name="plone.global_sections" />
</hidden>

<order manager="plone.portalheader" skinname="MySkin">
    <viewlet name="collective.superfish" insert-after="plone.global_sections" />
</order>

Customization

Add portal_actions

By default, collecive.superfish does not include portal_actions in the menu. To activate them, subclass the viewlet:

from collective.superfish.browser.sections import SuperFishViewlet as SuperFishBase

class SuperFishViewlet(SuperFishBase):

    ADD_PORTAL_TABS = True

and register it for your skin:

<browser:viewlet
    name="collective.superfish"
    manager="plone.app.layout.viewlets.interfaces.IPortalHeader"
    class=".viewlets.SuperFishViewlet"
    permission="zope2.View"
    layer=".interfaces.IThemeSpecific"/>

Do not show arrows

To not show the arrows for menuitems with subitems, customize the Javascript initialization:

jQuery('ul.sf-menu').superfish({
    cssArrows: false
});

See http://users.tpg.com.au/j_birch/plugins/superfish/options/ for a complete list of available options.

CSS Styles

By using superfish.css you should have everyting in place to get a working superfish navigation.

Specific fixes and colors for plone’s Sunburst Theme can be found in superfish-plone.css (you might deactivate these styles for your custom theme layer to not need to override these styles)

You might want to have a look at the examples provided in the superfish download

eg: https://github.com/joeldbirch/superfish/tree/1.7.4/examples

TODO

• Add tests

History

1.0 - 2014-10-15

• Update superfish.js from 1.4.8 to 1.7.3 and hoverIntent.js from r5 to r7 [fRiSi]

  Attention!

  This update breaks css compatibility with the previous version!

• Add default formatting for superfish menu based on the DEMO SKIN in the superfish default css to make it fit the Sunburst Theme

  Superfish Menu Layout changed from

  <li><span class="selected"><a .../></span></li> to

  <li class="selected"><a .../></li>

  since javascript could not handle the additional span tag for setting the .sf-with-ul class. [fRiSi]

0.6 - 2010-08-11

• fixed dropdown for IE7 and IE8 [fRiSi]

• replace ‘ with &#39; instead of &apos; since IE7/8 can’t handle this xhtml entity (http://inthemaze.net/post/2008/04/08/46-ie7-and-apos) [fRiSi]

0.5 - 2010-06-17

• use official hoverIntent.js with docstring and versioninfo and replaced (function($){})(jQuery); with jQuery(function($){}); syntax so the script does not conflict with collective.carousel (when both are merged to the same file by portal_javascript). [fRiSi]

0.4 - 2010-05-12

• removed desc.replace(…) and added a custom entities method to fix #1. [saily]

• don’t use version in metadata.xml for the package version in setup.py. the metadata version this is meant to reflect the version of the GS profile and must not be mixed up with the package version. [fRiSi]

0.3 - 2010-03-17

• Replace “ with &quot; to keep valid HTML if description contains quotes. [saily]

• Made id-generation more resistent against duplicated id’s. We now use normalized urls to generate the item id. [saily]

• added support to include portal_tabs in the superfish navigation by setting ADD_PORTAL_TABS = True in subclasses [fRiSi]

• added some documentation targeted at integrators [fRiSi]

• don’t render superfish_init.js with inline=True since this leads to strange errors in Products.ResourceRegistries-2.0b2-py2.6.egg/Products/ResourceRegistries/browser/scripts.pt eg when adding a StaticText Portlet

  AttributeError: 'DirContainedFileResource5' object has no attribute 'POST'

  according to the resourceregistry documentation it’s better to set inline to False in any case.

• Removed caching after some discussions with fRiSi. We left the code but disabled it by default, enable it again uncommenting the ram.cache line:

  #@ram.cache(_render_sections_cachekey)
  def render(self):
      return self.index()

• Displaying superfish menu only when installed in portal_quickinstaller by adding a superfish-browserlayer through browserlayer.xml file. [saily]

• Changed default values for ‘interval’ and ‘timeout’ of hoverIntent which controls the show and hide process of the submenu. Read more about configuration of hoverIntent here: http://cherne.net/brian/resources/jquery.hoverIntent.html

0.2 - 2009-06-12

• Moved from full to safe compression for javascript files. [saily]

• Removed unused class attributes for SuperFishViewlet. [saily]

• Added caching to improve rendering performance. [saily]

0.1 - 2009-06-09

• Initial import and idea [saily]

Thanks

• Daniel Widerin

• Patrick Griffiths

• Dan Webb

• Joel Birch

• Harald Friessnegger (fRiSi)

Links

• Superfish http://users.tpg.com.au/j_birch/plugins/superfish

• hoverIntent http://cherne.net/brian/resources/jquery.hoverIntent.html

• Suckerfish Dropdowns http://www.alistapart.com/articles/dropdowns

• jQuery http://jquery.com