Skip to main content

A suckerfish/superfish integration into plone

Project description

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.

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]

  • 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

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)

Project details


Download files

Download the file for your platform. If you're not sure which to choose, learn more about installing packages.

Source Distribution

collective.superfish-1.0.zip (36.5 kB view hashes)

Uploaded Source

Supported by

AWS AWS Cloud computing and Security Sponsor Datadog Datadog Monitoring Fastly Fastly CDN Google Google Download Analytics Microsoft Microsoft PSF Sponsor Pingdom Pingdom Monitoring Sentry Sentry Error logging StatusPage StatusPage Status page