Skip to main content

A mega drop down menu implementation using Products.Collage

Project description

Rough list of features

Plone implementation of a mega drop-down menu based on

Developed for Plone 3 and Plone 4.

Uses collective.collage.nested to support nested Collage objects.

Adds some actions in portal_actions/object_buttons:

  1. Enable Megamenu: adds IMegamenuEnabled interface to current folder.

  2. Current Megamenu: selects current folder as current megamenu (the one that will be displayed in plone.portalheader viewlet manager).

  3. Disable Megamenu: removes IMegamenuEnabled interface to current folder.

  4. Test Megamenu: shows a preview of the current megamenu-enabled folder as if it were the megamenu.

Collage layout-views for ATCTContent: menu and intro.

Collage renderer-views for Collage, Rows and Columns used inside the above layout-views. This is to provide cleaner HTML.

JavaScript and CSS resources to support megamenu. Special CSS for Plone classic theme (Plone 3 theme).

Native support for ATFolders (see atfolder.zcml) and (ploneappfolder.zcm) and can be extended for other custom folder implementations.

How-to create a megamenu

  1. Create a regular folder

  2. Go to Actions | Enable Megamenu

  3. Go to Actions | Current Megamenu to select the folder as the megamenu folder you want to display.

  4. Create as many Link objects to internal or external URLs you want to include in megamenu as regular links (no drop-down). Description is rendered as title attribute.

  5. Create as many Collage objects as items you want to show in your menu. Description is rendered as title attribute.

  6. Add one related item in your Colage objects to provide a default link (for non-JavaScript enabled browsers).

  7. Create as many rows and columns as you need in Collage and select the menu option in layout dropdown.

  8. menu rows have several skins to display horizontal or vertical separating lines between rows and columns.

  9. Create as many objects as you need in the columns and select the menu option in layout dropdown.

  10. menu items have three skins to display just the title (no link), regular link or highlighted (strong) link.

  11. Alternatively, you can select intro layout to provide more details: title, image and description.

Megamenu controlpanel

You can:

  1. Enable / disable megamenu.

  2. Select current megamenu folder (from all the folders providing IMegamenuEnable interface).

  3. Choose whether you want to include drop-down HTML markup in the page or load it via AJAX.

  4. Automatically hide all folder contents (and folder itself) when megamenu-enabling (by setting expiration date).

  5. Automatically show all folder contents (and folder itself) when megamenu-disabling (by removing expiration date).


Collage description is shown as title. “Events” link highlighted with selected CSS class. Second column with highlighted news item with intro layout.

Three rows with one, two and three columns.

Horizontal and vertical line separators

Nested Collage: two columns, each of which with two rows.

Megamenu with classic theme working in Plone 3.


  • Add collective.collage.megamenu to the list of eggs to install and extend to a known good set for

    extends =
    eggs =
  • Tell the plone.recipe.zope2instance recipe to install a ZCML slug:

    recipe = plone.recipe.zope2instance
    zcml =
  • Re-run buildout, e.g. with:

    $ ./bin/buildout

You can skip the ZCML slug if you are using Plone 3.3 or if you are going to explicitly include the package from another package’s configure.zcml file.


Based on Mega Drop Down Menus w/ CSS & jQuery implementation by Soh Tanaka.


  • Marcos F. Romero <marcos.romero {at} inter-cultura {dot} com> (developer)

  • Juan Pablo Gimenez <jpg {at} rcom {dot} com {dot} ar> (advisor)


  • Spanish (es): Marcos F. Romero

  • English (en): Marcos F. Romero


1.1.2 (2011-11-25)

  • Applied visualNoPrint class to megamenu to hide it in print mode

1.1.1 (2011-08-05)

  • Corrected z-index for drop-down and shadow

  • Added native collage class names to triggerMove JS function to work

  • Added collage-patch.js with new version of triggerMove that uses collage elements in the current collage object instead of the whole DOM

  • Automatically install Plone 3 classic theme in Plone 3

1.1 (2011-08-05)

  • Native support for if installed (conditional include)

  • Added shadow to drop-down box

  • Added handy class names to top-level li elements for styling purposes: top-level-1, top-level-2, … top-level-last

  • Added handy class names to prev/next-to active drop-down li element

  • Improved accessibility using new ‘click’ event handlers on menu options

1.0 (2011-04-23)

  • Megamenu implementation with Collage

  • Native support for ATFolder

  • i18n support: English and Spanish translations

  • Tested in Plone 3.3.5 and Plone 4.0.3

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 (69.9 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